diff --git a/.stylelintrc.json b/.stylelintrc.json
index 108fc51..2253e64 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,7 +1,7 @@
 {
   "ignoreFiles" : [
-    "assets/css/just-the-docs.scss",
-    "assets/css/dark-mode-preview.scss",
+    "assets/css/just-the-docs-light.scss",
+    "assets/css/just-the-docs-dark.scss",
     "_sass/vendor/**/*.scss"
   ],
   "extends": [
diff --git a/_config.yml b/_config.yml
index d12d439..17441c0 100644
--- a/_config.yml
+++ b/_config.yml
@@ -35,7 +35,7 @@ aux_links:
 # Footer content appears at the bottom of every page's main content
 footer_content: "Copyright &copy; 2017-2019 Patrick Marsceill. Distributed by an <a href=\"https://github.com/pmarsceill/just-the-docs/tree/master/LICENSE.txt\">MIT license.</a>"
 
-# Color scheme currently only supports "dark" or nil (default)
+# Color scheme currently only supports "dark" or "light"/nil (default)
 color_scheme: nil
 
 # Google Analytics Tracking (optional)
diff --git a/_includes/head.html b/_includes/head.html
index eae6a5e..f7ab6ed 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -12,7 +12,11 @@
 
   <link rel="shortcut icon" href="{{ 'favicon.ico' | absolute_url }}" type="image/x-icon">
 
-  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs.css' | absolute_url }}">
+  {% assign color_scheme = site.color_scheme %}
+  {% if color_theme == nil %}
+    {% assign color_scheme = 'light' %}
+  {% endif %}
+  <link rel="stylesheet" href="{{ color_scheme | prepend: '/assets/css/just-the-docs-' | append: '.css' | absolute_url }}">
 
   {% if site.ga_tracking != nil %}
     <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.ga_tracking }}"></script>
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index f0e6505..333c2b1 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -1,3 +1,4 @@
+// override this file to change the dark theme
 
 $body-background-color: $grey-dk-300;
 $sidebar-color: $grey-dk-300;
diff --git a/_sass/color_schemes/light.scss b/_sass/color_schemes/light.scss
new file mode 100644
index 0000000..e9624b3
--- /dev/null
+++ b/_sass/color_schemes/light.scss
@@ -0,0 +1 @@
+// override this file to change the light (default) theme
\ No newline at end of file
diff --git a/assets/css/dark-mode-preview.scss b/_sass/modules.scss
similarity index 54%
rename from assets/css/dark-mode-preview.scss
rename to _sass/modules.scss
index 8b77da6..c0b017b 100644
--- a/assets/css/dark-mode-preview.scss
+++ b/_sass/modules.scss
@@ -1,28 +1,11 @@
----
-# this ensures Jekyll reads the file to be transformed into CSS later
-# only Main files contain this front matter, not partials.
----
-
 //
 // Import external dependencies
 //
-
 @import "./vendor/normalize.scss/normalize.scss";
 
 //
-// Import Just the Docs scss
-//
-
-// Support
-@import "./support/support";
-
-//
-// Import custom color scheme scss
-//
-
-@import "./color_schemes/dark.scss";
-
 // Modules
+//
 @import "./base";
 @import "./layout";
 @import "./content";
@@ -38,4 +21,4 @@
 //
 // Import custom overrides
 //
-@import "./custom/custom";
+@import "./custom/custom";
\ No newline at end of file
diff --git a/assets/css/just-the-docs-dark.scss b/assets/css/just-the-docs-dark.scss
new file mode 100644
index 0000000..a19ffc7
--- /dev/null
+++ b/assets/css/just-the-docs-dark.scss
@@ -0,0 +1,5 @@
+---
+---
+@import "./support/support";
+@import "./color_schemes/dark";
+@import "./modules";
\ No newline at end of file
diff --git a/assets/css/just-the-docs-light.scss b/assets/css/just-the-docs-light.scss
new file mode 100644
index 0000000..c32b314
--- /dev/null
+++ b/assets/css/just-the-docs-light.scss
@@ -0,0 +1,5 @@
+---
+---
+@import "./support/support";
+@import "./color_schemes/light";
+@import "./modules";
diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss
deleted file mode 100644
index 6a2eefa..0000000
--- a/assets/css/just-the-docs.scss
+++ /dev/null
@@ -1,44 +0,0 @@
----
-# this ensures Jekyll reads the file to be transformed into CSS later
-# only Main files contain this front matter, not partials.
----
-
-//
-// Import external dependencies
-//
-
-@import "./vendor/normalize.scss/normalize.scss";
-
-//
-// Import Just the Docs scss
-//
-
-// Support
-@import "./support/support";
-
-//
-// Import custom overrides
-//
-
-@import "./custom/custom";
-
-//
-// Import custom color scheme scss
-//
-
-{% if site.color_scheme == "dark" %}
-@import "./color_schemes/dark.scss";
-{% endif %}
-
-// Modules
-@import "./base";
-@import "./layout";
-@import "./content";
-@import "./navigation";
-@import "./typography";
-@import "./labels";
-@import "./buttons";
-@import "./search";
-@import "./tables";
-@import "./code";
-@import "./utilities/utilities";
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index aadbf82..c765a9b 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -274,11 +274,25 @@ function initSearch() {
   }
 }
 
+// Focus
+
 function pageFocus() {
   var mainContent = document.querySelector('.js-main-content');
   mainContent.focus();
 }
 
+// Switch theme
+
+jtd.getTheme = function() {
+  var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
+  return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
+}
+
+jtd.setTheme = function(theme) {
+  var cssFile = document.querySelector('[rel="stylesheet"]');
+  cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | absolute_url }}' + theme + '.css');
+}
+
 // Document ready
 
 jtd.onReady(function(){
diff --git a/docs/configuration.md b/docs/configuration.md
index 14422fd..cb00b1a 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -67,17 +67,14 @@ color_scheme: "dark"
 
 <script>
 const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
-const cssFile = document.querySelector('[rel="stylesheet"]');
-const originalCssRef = cssFile.getAttribute('href');
-const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css');
 
 jtd.addEvent(toggleDarkMode, 'click', function(){
-  if (cssFile.getAttribute('href') === originalCssRef) {
-    cssFile.setAttribute('href', darkModeCssRef);
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
   } else {
-    cssFile.setAttribute('href', originalCssRef);
+    jtd.setTheme('dark');
   }
-})
+});
 </script>
 
 See [Customization]({{ site.baseurl }}{% link docs/customization.md %}) for more information.
diff --git a/docs/customization.md b/docs/customization.md
index eccb4bc..6f715bf 100644
--- a/docs/customization.md
+++ b/docs/customization.md
@@ -36,17 +36,14 @@ color_scheme: "dark"
 
 <script>
 const toggleDarkMode = document.querySelector('.js-toggle-dark-mode');
-const cssFile = document.querySelector('[rel="stylesheet"]');
-const originalCssRef = cssFile.getAttribute('href');
-const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css');
 
 jtd.addEvent(toggleDarkMode, 'click', function(){
-  if (cssFile.getAttribute('href') === originalCssRef) {
-    cssFile.setAttribute('href', darkModeCssRef);
+  if (jtd.getTheme() === 'dark') {
+    jtd.setTheme('light');
   } else {
-    cssFile.setAttribute('href', originalCssRef);
+    jtd.setTheme('dark');
   }
-})
+});
 </script>
 
 ## Specific visual customization