feat: keep improving styles – panel backgrounds and default color mode (

#266) This PR sets the default color mode to match the system's preference: dark vs light mode. It also lightens up the panel backgrounds in the light mode to help make text more prominent and clearer to read.
chrisvogt · Dec 8, 2024 · d05d24f · d05d24f
1 parent 00af169
commit d05d24f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/theme/src/gatsby-plugin-theme-ui/__snapshots__/theme.spec.js.snap b/theme/src/gatsby-plugin-theme-ui/__snapshots__/theme.spec.js.snap
@@ -171,15 +171,15 @@ exports[`Theme Configuration a snapshot of the configuration matches the snapsho
     "modes": {
       "dark": {
         "background": "#1e1e2f",
-        "panel-background": "rgba(1, 1, 1, 0.28)",
+        "panel-background": "rgba(1, 1, 1, 0.30)",
         "panel-divider": [Function],
         "panel-highlight": [Function],
         "primary": "#1E90FF",
         "text": "#fff",
         "textMuted": "#d8d8d8",
       },
     },
-    "panel-background": "rgba(255, 229, 224, 0.10)",
+    "panel-background": "rgba(255, 255, 255, 0.35)",
     "panel-divider": [Function],
     "panel-highlight": [Function],
     "primary": "#422EA3",
@@ -190,8 +190,8 @@ exports[`Theme Configuration a snapshot of the configuration matches the snapsho
     "textMuted": "#333",
   },
   "config": {
-    "initialColorModeName": "dark",
-    "useColorSchemeMediaQuery": false,
+    "printColorModeName": "default",
+    "useColorSchemeMediaQuery": "system",
     "useLocalStorage": true,
   },
   "fontSizes": [

diff --git a/theme/src/gatsby-plugin-theme-ui/theme.js b/theme/src/gatsby-plugin-theme-ui/theme.js
@@ -107,9 +107,9 @@ export const PostCard = {
 
 export default merge(tailwind, {
   config: {
-    initialColorModeName: 'dark', // Default to dark mode
     useLocalStorage: true, // Persist user preferences
-    useColorSchemeMediaQuery: false // Disable automatic detection of system preference
+    useColorSchemeMediaQuery: 'system', // Disable automatic detection of system preference
+    printColorModeName: 'default'
   },
 
   badges: {
@@ -189,13 +189,13 @@ export default merge(tailwind, {
   colors: {
     accent: 'deeppink',
     background: '#fdf8f5',
-    'panel-background': 'rgba(255, 229, 224, 0.10)',
+    'panel-background': 'rgba(255, 255, 255, 0.35)',
     'panel-divider': () => '1px solid rgba(255, 229, 224, 0.17)',
     'panel-highlight': theme => theme.colors.gray[1],
     modes: {
       dark: {
         background: '#1e1e2f',
-        'panel-background': 'rgba(1, 1, 1, 0.28)',
+        'panel-background': 'rgba(1, 1, 1, 0.30)',
         'panel-divider': theme => `1px solid ${theme.colors.gray[8]}`,
         'panel-highlight': theme => theme.colors.gray[8],
         primary: '#1E90FF',

diff --git a/theme/src/gatsby-plugin-theme-ui/theme.spec.js b/theme/src/gatsby-plugin-theme-ui/theme.spec.js
@@ -20,8 +20,7 @@ describe('Theme Configuration', () => {
     })
 
     it('defaults the color mode to dark', () => {
-      expect(theme.config.initialColorModeName).toBe('dark')
-      expect(theme.config.useColorSchemeMediaQuery).toBe(false)
+      expect(theme.config.useColorSchemeMediaQuery).toBe('system')
       expect(theme.config).toHaveProperty('useLocalStorage')
     })
   })
@@ -122,7 +121,7 @@ describe('Theme Configuration', () => {
   describe('color mode configurations', () => {
     it('defines light mode background colors', () => {
       expect(theme.colors.background).toBe('#fdf8f5')
-      expect(theme.colors['panel-background']).toContain('rgba(255, 229, 224, 0.10)')
+      expect(theme.colors['panel-background']).toContain('rgba(255, 255, 255, 0.35)')
     })
 
     it('defines dark mode background colors', () => {