Extract the common variables from the two themes to a new file

assets/stylesheets/application-dark.css.scss

@@ -12,6 +12,7 @@
  */
 
 @import 'global/variables-dark',
+        'global/variables',
         'global/mixins',
         'global/icons',
         'global/classes',

assets/stylesheets/application.css.scss

@@ -11,7 +11,8 @@
  * http://mozilla.org/MPL/2.0/
  */
 
-@import 'global/variables',
+@import 'global/variables-light',
+        'global/variables',
         'global/mixins',
         'global/icons',
         'global/classes',

assets/stylesheets/global/_variables-dark.scss

@@ -1,23 +1,12 @@
 html.dark {
-  --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
-  --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  --boldFontWeight: 500;
-  --bolderFontWeight: 600;
-
   --absolute: white;
 
-  --maxWidth: 80rem;
-  --headerHeight: 3rem;
-  --sidebarWidth: 20rem;
-  --sidebarMediumWidth: 16rem;
-
   --documentBackground: #222;
   --contentBackground: #33373a;
 
   --textColor: #cbd0d0;
   --textColorLight: #9da5ad;
   --textColorLighter: #77787a;
-  --textColorRed: #f44336;
 
   --inputFocusBorder: transparent;
 
@@ -26,12 +15,9 @@ html.dark {
   --focusText: #f7f2f2;
 
   --loadingText: #5d6164;
-  --splashText: var(--loadingText);
 
   --selectionBackground: #007acc;
   --selectionBorder: #000;
-  --selectionText: #fff;
-  --transparentSelectionText: rgba(255, 255, 255, 0.9);
 
   --highlightBackground: #64675f;
 
@@ -81,15 +67,7 @@ html.dark {
 
   --notifBackground: rgba(#555, .95);
   --notifBorder: 1px solid #000;
-  --notifColor: #fff;
-  --notifColorLight: #ccc;
 
   --tipBackground: var(--notifBackground);
   --tipBorder: var(--notifBorder);
-
-  --contentZ: 1;
-  --sidebarZ: 2;
-  --headerZ: 3;
-  --noticeZ: 4;
-  --hoverZ: 5;
 }

assets/stylesheets/global/_variables-light.scss

@@ -0,0 +1,73 @@
+html:not(.dark) {
+  --absolute: black;
+
+  --documentBackground: #f3f3f3;
+  --contentBackground: #fff;
+
+  --textColor: #333;
+  --textColorLight: #666;
+  --textColorLighter: #888;
+
+  --inputFocusBorder: #35b5f4;
+
+  --focusBackground: #e5e5e5;
+  --focusBorder: #d4d4d4;
+  --focusText: #000;
+
+  --loadingText: #ccc;
+
+  --selectionBackground: #398df0;
+  --selectionBorder: #196fc2;
+
+  --highlightBackground: #fffdcd;
+
+  --linkColor: #3377c0;
+  --linkColorHover: #2f6cb6;
+  --linkTextDecoration: none;
+
+  --headerBackground: #eee;
+  --headerBorder: #d7d7d7;
+  --searchTagBackground: darken(#eee, 5%);
+
+  --sidebarBackground: #f9f9f9;
+  --transparentSidebarBackground: rgba(#f9f9f9, 0);
+  --sidebarBorder: #e1e1e1;
+
+  --scrollbarColor: #ccc;
+  --scrollbarColorHover: #999;
+
+  --pathBackground: var(--sidebarBackground);
+  --pathBorder: var(--sidebarBorder);
+
+  --noticeBackground: #faf9e2;
+  --noticeBorder: #e2e2c1;
+
+  --boxBackground: #fafafa;
+  --boxBorder: #d8d8d8;
+  --boxBorderLight: #e5e5e5;
+  --boxHeaderColor: var(--textColor);
+  --boxHeaderBackground: #f5f5f5;
+
+  --noteBackground: #f8f8dd;
+  --noteBorder: #d3d952;
+
+  --noteGreenBackground: #e7f8e1;
+  --noteGreenBorder: #89da70;
+
+  --noteBlueBackground: #d4f3fd;
+  --noteBlueBorder: #94bbeb;
+
+  --noteOrangeBackground: #fbe6d1;
+  --noteOrangeBorder: #ec8b01;
+
+  --noteRedBackground: #fed5d3;
+  --noteRedBorder: #dc7874;
+
+  --labelBackground: #f4f4f4;
+
+  --notifBackground: rgba(#333, .85);
+  --notifBorder: none;
+
+  --tipBackground: rgba(#fffdcd, .95);
+  --tipBorder: 1px solid #e7dca9;
+}

assets/stylesheets/global/_variables.scss

@@ -1,91 +1,27 @@
-html:not(.dark) {
+html {
   --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
   --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   --boldFontWeight: 500;
   --bolderFontWeight: 600;
 
-  --absolute: black;
-
-  --maxWidth: 80rem;
-  --headerHeight: 3rem;
-  --sidebarWidth: 20rem;
-  --sidebarMediumWidth: 16rem;
-
-  --documentBackground: #f3f3f3;
-  --contentBackground: #fff;
-
-  --textColor: #333;
-  --textColorLight: #666;
-  --textColorLighter: #888;
   --textColorRed: #f44336;
 
-  --inputFocusBorder: #35b5f4;
+  --splashText: var(--loadingText);
 
-  --focusBackground: #e5e5e5;
-  --focusBorder: #d4d4d4;
-  --focusText: #000;
-
-  --loadingText: #ccc;
-  --splashText: #ccc;
-
-  --selectionBackground: #398df0;
-  --selectionBorder: #196fc2;
   --selectionText: #fff;
   --transparentSelectionText: rgba(255, 255, 255, 0.9);
 
-  --highlightBackground: #fffdcd;
-
-  --linkColor: #3377c0;
-  --linkColorHover: #2f6cb6;
-  --linkTextDecoration: none;
-
-  --headerBackground: #eee;
-  --headerBorder: #d7d7d7;
-  --searchTagBackground: darken(#eee, 5%);
-
-  --sidebarBackground: #f9f9f9;
-  --transparentSidebarBackground: rgba(#f9f9f9, 0);
-  --sidebarBorder: #e1e1e1;
-
-  --scrollbarColor: #ccc;
-  --scrollbarColorHover: #999;
-
-  --pathBackground: var(--sidebarBackground);
-  --pathBorder: var(--sidebarBorder);
-
-  --noticeBackground: #faf9e2;
-  --noticeBorder: #e2e2c1;
-
-  --boxBackground: #fafafa;
-  --boxBorder: #d8d8d8;
-  --boxBorderLight: #e5e5e5;
-  --boxHeaderColor: var(--textColor);
-  --boxHeaderBackground: #f5f5f5;
-
-  --noteBackground: #f8f8dd;
-  --noteBorder: #d3d952;
-
-  --noteGreenBackground: #e7f8e1;
-  --noteGreenBorder: #89da70;
-
-  --noteBlueBackground: #d4f3fd;
-  --noteBlueBorder: #94bbeb;
-
-  --noteOrangeBackground: #fbe6d1;
-  --noteOrangeBorder: #ec8b01;
-
-  --noteRedBackground: #fed5d3;
-  --noteRedBorder: #dc7874;
-
-  --labelBackground: #f4f4f4;
-
-  --notifBackground: rgba(#333, .85);
-  --notifBorder: none;
   --notifColor: #fff;
   --notifColorLight: #ccc;
 
-  --tipBackground: rgba(#fffdcd, .95);
-  --tipBorder: 1px solid #e7dca9;
+  --maxWidth: 80rem;
+  --headerHeight: 3rem;
+  --sidebarWidth: 20rem;
+  --sidebarMediumWidth: 16rem;
+
+  --focusBackground: #e5e5e5;
+  --focusBorder: #d4d4d4;
+  --focusText: #000;
 
   --contentZ: 1;
   --sidebarZ: 2;