fix(ui): dark theme tweaks

egoist · Mar 23, 2019 · db24f18 · db24f18
1 parent c069379
commit db24f18
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/src/components/MobileHeaderNav.vue b/src/components/MobileHeaderNav.vue
@@ -38,16 +38,14 @@ export default {
   padding: 0 20px;
   margin-bottom: 30px;
   padding-bottom: 30px;
-  font-weight: bold;
   font-size: 1.1rem;
   border-bottom: 1px solid var(--border-color);
 
   & a {
-    color: #000;
+    color: var(--link-color);
     text-decoration: none;
-
     &.active {
-      color: var(--accent-color);
+      font-weight: bold;
     }
   }
 

diff --git a/src/css/markdown.css b/src/css/markdown.css
@@ -60,7 +60,7 @@
   }
 
   & thead th {
-    color: #666;
+    color: var(--table-header-color);
     background: var(--table-header-background);
     border-bottom: 1px solid var(--border-color);
     border-top: 1px solid var(--border-color);
@@ -84,7 +84,7 @@
     position: relative;
     border-radius: 4px;
     background: var(--code-block-background);
-    box-shadow: inset 0 0 0 1px var(--code-block-shadow-color);
+    box-shadow: inset 0 0 0 var(--code-block-shadow-width) var(--code-block-shadow-color);
 
     &:before {
       content: attr(data-lang);
@@ -154,10 +154,10 @@
   & code {
     font-family: var(--code-font);
     font-size: 90%;
-    background: var(--code-span-background);
+    background: var(--inline-code-background);
     border-radius: 4px;
     padding: 3px 5px;
-    color: var(--code-span-color);
+    color: var(--inline-code-color);
   }
 
   & > ul,

diff --git a/src/plugins/dark-theme-toggler/DarkThemeToggler.vue b/src/plugins/dark-theme-toggler/DarkThemeToggler.vue
@@ -38,6 +38,7 @@ export default {
     return {
       dark:
         localStorage.getItem('docute:theme') === 'dark' ||
+        'dark' in this.$route.query ||
         this.$store.getters.config.theme === 'dark'
     }
   },

diff --git a/src/utils/cssVariables.js b/src/utils/cssVariables.js
@@ -18,38 +18,42 @@ const defaultCssVariables = {
   navLinkActiveColor: '#000',
   codeBlockBackground: '#fdfaf6',
   codeBlockShadowColor: '#faede5',
+  codeBlockShadowWidth: '1px',
   highlightedLineBackground: '#faede5',
   highlightedLineBorderColor: '#f1beb6',
-  codeSpanColor: 'inherit',
-  codeSpanBackground: '#fdfaf6',
+  inlineCodeColor: 'inherit',
+  inlineColorBackground: '#fdfaf6',
   loaderPrimaryColor: '#f3f3f3',
   loaderSecondaryColor: '#ecebeb',
   contentLinkBorder: '2px solid var(--border-color)',
   contentLinkHoverBorderColor: '#ccc',
-  tableHeaderBackground: '#fafafa'
+  tableHeaderBackground: '#fafafa',
+  tableHeaderColor: '#666'
 }
 
 const darkCssVariables = {
   ...defaultCssVariables,
-  pageBackground: '#282c35',
-  headerBackground: '#282c35',
-  sidebarBackground: '#282c35',
+  pageBackground: '#2f3136',
+  headerBackground: '#2f3136',
+  sidebarBackground: '#2f3136',
   textColor: 'hsla(0,0%,100%,0.88)',
   linkColor: 'currentColor',
   navLinkColor: '#eee',
   navLinkActiveColor: '#fff',
   codeBlockBackground: '#011627',
   codeBlockShadowColor: '#333',
-  borderColor: 'hsla(0, 0%, 100%, 0.08)',
+  codeBlockShadowWidth: '0px',
+  borderColor: '#3e4147',
   highlightedLineBackground: '#022a4b',
   highlightedLineBorderColor: '#ffa7c4',
-  codeSpanColor: '#e6e6e6',
-  codeSpanBackground: '#373c49',
+  inlineCodeColor: '#e6e6e6',
+  inlineCodeBackground: '#373c49',
   loaderPrimaryColor: 'hsla(0, 0%, 100%, 0.08)',
   loaderSecondaryColor: 'hsla(0, 0%, 100%, 0.18)',
   contentLinkBorder: '2px solid hsla(0, 0%, 100%, 0.28)',
   contentLinkHoverBorderColor: 'currentColor',
-  tableHeaderBackground: 'var(--border-color)'
+  tableHeaderBackground: 'var(--border-color)',
+  tableHeaderColor: '#868686'
 }
 
 export {defaultCssVariables, darkCssVariables}