[Docs] add dark mode variables (issue reduxjs#3762) (reduxjs#3765)

Former-commit-id: 8244e85
webMasterMrBin · May 6, 2020 · 57ebeef · 57ebeef
1 parent 0d37c9b
commit 57ebeef
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -7,7 +7,7 @@ module.exports = {
   organizationName: 'reduxjs',
   projectName: 'redux',
   themeConfig: {
-    disableDarkMode: true,
+    disableDarkMode: false,
     prism: {
       theme: require('./src/js/monokaiTheme.js')
     },
@@ -100,7 +100,7 @@ module.exports = {
         src: 'img/redux.svg',
         href: 'https://redux.js.org/'
       },
-      copyright:
+      copyright: 
         `Copyright © 2015–${new Date().getFullYear()} Dan Abramov and the Redux documentation authors.`
     },
     algolia: {

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -15,6 +15,24 @@
   --ifm-code-padding-horizontal: 0.2rem;
 }
 
+:root[data-theme='dark'] {
+  --ifm-color-primary: #ba8fff;
+  --ifm-color-primary-dark: #7431ca;
+  --ifm-color-primary-darker: #6d1cac;
+  --ifm-color-primary-darkest: #730c9a;
+  --ifm-color-primary-light: #b97cfd;
+  --ifm-color-primary-lighter: #cc8ffc;
+  --ifm-color-primary-lightest: #fcf2ff;
+
+  --ifm-blockquote-color: #1a1d1e;
+  --ifm-blockquote-color-dark: #6d1cac;
+}
+
+:root[data-theme='dark'] .hero.hero--primary {
+  --ifm-hero-background-color: #593d88;
+  --ifm-hero-text-color: #ffffff;
+}
+
 blockquote {
   color: var(--ifm-font-base-color);
   background-color: var(--ifm-blockquote-color);
@@ -27,6 +45,10 @@ code {
   border-radius: 0.2rem;
 }
 
+:root[data-theme='dark'] code {
+  background-color: rgb(39, 40, 34);
+}
+
 a code {
   color: inherit;
 }
@@ -102,15 +124,15 @@ a code {
 
 .style-guide .priority-essential h3:after {
   content: ' ESSENTIAL';
-  color: #6b2a2a;
+  color: var(--ifm-color-danger);
 }
 
 .style-guide .priority-stronglyrecommended h3:after {
   content: ' STRONGLY RECOMMENDED';
-  color: #8c480a;
+  color: var(--ifm-color-warning);
 }
 
 .style-guide .priority-recommended h3:after {
   content: ' RECOMMENDED';
-  color: #2b5a99;
+  color: var(--ifm-color-info);
 }
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
@@ -32,7 +32,7 @@
 .featureImage {
   height: 100px;
   width: 100px;
-  fill: var(--ifm-font-base-color);
+  fill: var(--ifm-font-color-base);
 }
 
 .featureAnchor svg {