update styles for light mode

coinbase · Aug 6, 2024 · 73aac4d · 73aac4d
1 parent fd9ed11
commit 73aac4d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/site/docs/styles.css b/site/docs/styles.css
@@ -17,16 +17,18 @@
   }
 }
 
-.vocs_CodeGroup,
-.vocs_Tabs_list,
-.vocs_Tabs_content,
-.vocs_CodeBlock,
-.vocs_CodeTitle,
-.vocs_Pre_wrapper,
-.vocs_Heading::before,
-.vocs_Code {
-  background-color: #1F2937 !important;
-  border-color: #1F2937 !important;
+.dark {
+  .vocs_CodeGroup,
+  .vocs_Tabs_list,
+  .vocs_Tabs_content,
+  .vocs_CodeBlock,
+  .vocs_CodeTitle,
+  .vocs_Pre_wrapper,
+  .vocs_Heading::before,
+  .vocs_Code {
+    background-color: #1F2937 !important;
+    border-color: #1F2937 !important;
+  }
 }
 
 .vocs_Tabs_trigger {
@@ -122,7 +124,7 @@
   padding: 60px 0px 0px 0px;
 }
 
-.dark .vocs_Content:has(#blobs) {
+.vocs_Content:has(#blobs) {
   padding: 60px 0px 0px 0px;
   background-color: #030713;
 }
@@ -131,7 +133,7 @@
   display: none;
 }
 
-.dark .css-main-container {
+.css-main-container {
   background-color: #111827;
 }
 

diff --git a/site/vocs.config.tsx b/site/vocs.config.tsx
@@ -80,12 +80,20 @@ export default defineConfig({
   ],
   theme: {
     accentColor: '#73F7FF',
-    colorScheme: 'dark',
     variables: {
       color: {
-        background: '#151A26',
-        backgroundDark: '#0F131E',
-        textAccent: 'white',
+        background: {
+          dark: '#151A26',
+          light: 'white',
+        },
+        backgroundDark: {
+          dark:  '#0F131E',
+          light:  '#F3F4F6',
+        },
+        textAccent: {
+          dark: 'white',
+          light: '#030712',
+        },
       },
     },
   },