dark mode & header tweaks

README.md

@@ -20,3 +20,9 @@ For a static site build:
 
     $ yarn build
 
+
+## Notes
+
+**Theme colors** are defined in `/doczrc.js` > `themeConfig > colors`, which can then be used in `styles.js` of underlying components.
+
+**Inherited layout files** in `node_modules/gatsby-theme-docz/src/components/`.

doczrc.js

@@ -13,12 +13,16 @@ export default {
   themeConfig: {
     colors: {
       primary: '#943733',
-      secondary: '#9e9e9e',
+      secondary: '#772824',
       h5: {
         color: '#943733',
       },
       header: {
         bg: '#943733',
+        button: {
+          bg: '#fff',
+          color: '#943733',
+        }
       },
       sidebar: {
         bg: '#f9f9f9',
@@ -26,13 +30,17 @@ export default {
       },
       modes: {
         dark: {
-          primary: '#9e9e9e',
-          secondary: '#943733',
+          primary: '#AF79CE',
+          secondary: '#9F4DCE',
           header: {
-            bg: '#943733',
+            bg: '#57356B',
+            button: {
+              bg: '#1D2330',
+              color: '#AF79CE',
+            }
           },
           sidebar: {
-            navLinkActive: '#fff',
+            navLinkActive: '#AF79CE',
           },
         },
       },

src/gatsby-theme-docz/components/Header/styles.js

@@ -1,6 +1,7 @@
 import * as mixins from '~utils/mixins'
 import { media } from '~theme/breakpoints'
 
+// header wrapper
 export const wrapper = {
   bg: 'header.bg',
   color: "#fff",
@@ -11,6 +12,7 @@ export const wrapper = {
   fontFamily: 'Inter var,sans-serif',
 }
 
+// container for inner items (logo, social links)
 export const innerContainer = {
   ...mixins.centerAlign,
   px: 4,
@@ -42,14 +44,15 @@ export const menuButton = {
   cursor: 'pointer',
 }
 
+// social icons
 export const headerButton = {
   ...mixins.centerAlign,
   outline: 'none',
   p: '12px',
   border: 'none',
   borderRadius: 9999,
-  bg: '#fff', //'header.button.bg',
-  color: '#943733', //'header.button.color',
+  bg: 'header.button.bg', //'#fff', //'header.button.bg',
+  color: 'header.button.color',//'#943733', //'header.button.color',
   fontSize: 0,
   fontWeight: 600,
   cursor: 'pointer',
@@ -70,6 +73,7 @@ export const editButton = {
   borderRadius: 'radius',
 }
 
+// links to homepage, cloud, github, help
 export const external_links = {
   borderBottom: t => `1px solid ${t.colors.border}`,
   boxShadow: '0 -5px 0 rgba(0,0,0,.03)',
@@ -119,6 +123,7 @@ export const links = {
   margin: '0px !important',
 }
 
+// external links
 export const linksli = {
   padding: '25px 0',
   width: 'auto',
@@ -126,6 +131,7 @@ export const linksli = {
   listStyle: 'none',
 }
 
+// external links (hidden on mobile)
 export const linksli2 = {
   padding: '25px 0',
   width: 'auto',

src/gatsby-theme-docz/index.css

@@ -36,9 +36,6 @@ html { font-family: 'Inter', sans-serif; }
   --card-footer-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.07);
   --box-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.04), 0 3px 4px 0 rgba(0, 0, 0, 0.1);
   --modal-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.24), 0 3px 4px 0 rgba(0, 0, 0, 0.2);
-
-  /* Docs variables */
-  --theme-ui-colors-text: var(var(--text-muted));
 }
 
 ul {