godalming123 · godalming123 · Aug 26, 2021 · Aug 23, 2021 · Aug 23, 2021 · Aug 23, 2021
diff --git a/README.md b/README.md
@@ -40,6 +40,7 @@ Additionally, you may choose to set the following optional variables:
 ```yml
 show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
 google_analytics: [Your Google Analytics tracking ID]
+color-scheme: ["dark", "light", "auto" or "auto-deafualt-dark" auto is deafault setting and changes theme based on device theme, auto-deafualt-dark is the same except if you device does not support changing theme based on device theme it will deafault to dark and the others are fairly explanetory.]
 ```
 
 ### Stylesheet

diff --git a/_config.yml b/_config.yml
@@ -4,3 +4,4 @@ description: Minimal is a theme for GitHub Pages.
 show_downloads: true
 google_analytics:
 theme: jekyll-theme-minimal
+#color-scheme: auto-deafualt-dark
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,3 +1,11 @@
+{% case site.color-scheme %}
+  {% when "", nil, false, 0, empty %}
+    {% assign ColorScheme = "auto" %}
+  {% else %}
+    {% assign ColorScheme = site.color-scheme %}
+{% endcase %}
+
+
 <!DOCTYPE html>
 <html lang="{{ site.lang | default: "en-US" }}">
   <head>
@@ -6,7 +14,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
 {% seo %}
-    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
+    <link rel="stylesheet" href="{{ "/assets/css/colors-ColorScheme.css?v=" | append: site.github.build_revision | relative_url | replace: "ColorScheme", {{ColorScheme}} }}">
+    <link rel="stylesheet" href="{{ "/assets/css/style.css?v="              | append: site.github.build_revision | relative_url }}">
     <!--[if lt IE 9]>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
     <![endif]-->

diff --git a/_sass/colors.scss b/_sass/colors.scss
@@ -35,6 +35,7 @@ hvr -> hover
 
 @mixin colors {  
     // buttons
+    --L-a-text-hover-change: 0.8;//the number that --L-a-text gets changed by when it is hovered eg a button has 30% luminosity when left it luminosity is then timesed by 0.8 when the button is hovered
     --clr-a-text: hsl(200, 100%, var(--L-a-text));
     --clr-a-text-hvr: hsl(200, 100%, calc(var(--L-a-text) * var(--L-a-text-hover-change)));
     --clr-buttons-main-bg: hsl(0, 0%, var(--L-buttons-main-bg));//the buttons in the main section at the top titled "download zip" "download tarbell" "veiw on github"
@@ -121,15 +122,3 @@ hvr -> hover
   --L-small-in-a: 60%;
   --L-table-header-and-dt: 90%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
 }
-
-:root {
-  --L-a-text-hover-change: 0.8;//the number that --L-a-text gets changed by when it is hovered eg a button has 30% luminosity when left it luminosity is then timesed by 0.8 when the button is hovered
-  @include colors;
-  @include light-colors;
-}
-
-@media screen and (prefers-color-scheme: dark) {//we would not like to apply dark mode if content is on printer as that would use a lot of ink
-    :root{
-        @include dark-colors;
-    }
-}
diff --git a/_sass/jekyll-theme-minimal.scss b/_sass/jekyll-theme-minimal.scss
@@ -1,6 +1,5 @@
 @import "fonts";
 @import "rouge-github";
-@import "colors";
 
 body {
   background-color: var(--clr-bg);

diff --git a/assets/css/colors-auto-deafualt-dark.scss b/assets/css/colors-auto-deafualt-dark.scss
@@ -0,0 +1,17 @@
+---
+---
+
+//this mode is like colors-auto but if the device does not support @media prefers-color-scheme it will deafault to dark mode
+
+@import "colors";
+
+:root {
+    @include colors;
+    @include dark-colors;
+  }
+
+@media print, (prefers-color-scheme: light) {//we would not like to apply dark mode if content is on printer as that would use a lot of ink
+  :root {
+    @include light-colors;
+  }
+}
diff --git a/assets/css/colors-auto.scss b/assets/css/colors-auto.scss
@@ -0,0 +1,15 @@
+---
+---
+
+@import "colors";
+
+:root {
+    @include colors;
+    @include light-colors;
+  }
+
+@media screen and (prefers-color-scheme: dark) {//we would not like to apply dark mode if content is on printer as that would use a lot of ink
+  :root{
+    @include dark-colors;
+  }
+}
diff --git a/assets/css/colors-dark.scss b/assets/css/colors-dark.scss
@@ -0,0 +1,15 @@
+---
+---
+
+@import "colors";
+
+:root {
+  @include colors;
+  @include dark-colors;
+}
+
+@media print {
+  :root {
+    @include light-colors;
+  }
+}
diff --git a/assets/css/colors-light.scss b/assets/css/colors-light.scss
@@ -0,0 +1,9 @@
+---
+---
+
+@import "colors";
+
+:root {
+  @include colors;
+  @include light-colors;
+}