Merge branch 'feature/auto-theme-switch' into dev

cytoscape · May 30, 2024 · 33aa5bc · 33aa5bc
2 parents 40302ff + 9b1e72e
commit 33aa5bc
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/public/images/hero-figure-dark.png b/public/images/hero-figure-dark.png
diff --git a/public/images/hero-figure-light.png b/public/images/hero-figure-light.png
diff --git a/src/client/components/network-editor/right-drawer.js b/src/client/components/network-editor/right-drawer.js
@@ -17,7 +17,6 @@ import CheckIcon from '@material-ui/icons/Check';
 const useStyles = makeStyles((theme) => ({
   paper: {
     width: RIGHT_DRAWER_WIDTH,
-    background: theme.palette.background.paper,
     borderLeft: `1px solid ${theme.palette.divider}`,
   },
   header: {

diff --git a/src/client/theme.js b/src/client/theme.js
@@ -67,6 +67,7 @@ export const lightTheme = createTheme({
     },
     MuiBackdrop: {
       root: {
+        backgroundColor: 'rgba(0, 0, 0, 0.25)',
         backdropFilter: 'blur(1px)',
       },
     },
@@ -90,7 +91,7 @@ export const darkTheme = createTheme({
     type: 'dark',
     primary: {
       main: '#1f78b4',
-      light: '#A7c1de',
+      light: '#a7c1de',
     },
     secondary: {
       main: '#1f78b4',
@@ -101,7 +102,7 @@ export const darkTheme = createTheme({
       field: '#464646',
       header: '#242424',
       accent: 'rgba(45, 52, 43, 0.25)',
-      network: '#ffffff',
+      network: '#e8e8e8',
     },
     action: {
       hover: 'rgba(167, 193, 222, 0.1)',
@@ -115,7 +116,7 @@ export const darkTheme = createTheme({
       primary: '#f5f5f5',
       secondary: 'rgba(255, 255, 255, 0.8)',
       disabled: 'rgba(255, 255, 255, 0.5)',
-      accent: '#Acd5a1',
+      accent: '#acd5a1',
     },
   },
   typography: {
@@ -163,6 +164,16 @@ export const darkTheme = createTheme({
         border: '1px solid rgba(116, 116, 116, 0.1)',
       },
     },
+    MuiDrawer: {
+      paperAnchorTop: {
+        background: 'rgba(18, 18, 18, 0.66)',
+        backdropFilter: 'blur(8px)',
+      },
+      paperAnchorRight: {
+        background: 'rgba(18, 18, 18, 0.66)',
+        backdropFilter: 'blur(8px)',
+      },
+    },
     MuiLink: {
       root: {
         color: '#6194c5',