pages-themes · godalming123 · Aug 18, 2021 · Aug 18, 2021 · Aug 18, 2021 · Aug 18, 2021
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![.github/workflows/ci.yaml](https://github.com/pages-themes/minimal/actions/workflows/ci.yaml/badge.svg)](https://github.com/pages-themes/minimal/actions/workflows/ci.yaml) [![Gem Version](https://badge.fury.io/rb/jekyll-theme-minimal.svg)](https://badge.fury.io/rb/jekyll-theme-minimal)
 
-*Minimal is a Jekyll theme for GitHub Pages. You can [preview the theme to see what it looks like](http://pages-themes.github.io/minimal), or even [use it today](#usage).*
+*Minimal is a Jekyll theme for GitHub Pages that supports dark mode based on device color scheme. You can [preview the theme to see what it looks like](http://pages-themes.github.io/minimal), or even [use it today](#usage).*
 
 ![Thumbnail of Minimal](thumbnail.png)
 
@@ -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,10 @@
+{% 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 +13,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
@@ -0,0 +1,124 @@
+/*
+H -> hue
+L -> luminosity
+S -> saturation
+clr -> color
+bg -> background
+hvr -> hover
+*/
+
+//colors
+:root {
+    //red
+    --code-d14:    #d14;
+    --code-aa0000: #aa0000;
+    --code-990000: #990000;
+    //cyan
+    --code-009999: #009999;
+    --code-008080: #008080;
+    --code-3c5d5d: #3c5d5d;
+    //green
+    --code-009926: #009926;
+    //pink
+    --code-990073: #990073;
+    --code-800080: #800080;
+    //purple
+    --code-445588: #445588;
+    //blue
+    --code-000080: #000080;
+    //grey
+    --code-aaaaaa: #aaaaaa;
+    --code-999999: #999999;
+    --code-888888: #888888;
+    --code-555555: #555555;
+}
+
+@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"
+    --clr-buttons-main-border: hsl(0, 0%, var(--L-buttons-main-border));
+    --clr-buttons-main-text: hsl(0, 0%, var(--L-buttons-main-text));
+    --clr-buttons-main-text-hover: hsl(0, 6%, var(--L-buttons-main-text-hover));
+    // headers + text
+    --clr-h1-and-bold: hsl(0, 0%, var(--L-h1-and-bold));
+    --clr-h2: hsl(0, 0%, var(--L-h2));
+    --clr-h-3-6: hsl(0, 0%, var(--L-h-3-6));
+    --clr-text: hsl(0, 0%, var(--L-text));
+    // code blocks
+    --clr-code-text: hsl(0, 0%, var(--L-code-text));
+    --clr-code-bg: hsl(0, 0%, var(--L-code-bg));
+    --clr-code-border: hsl(0, 0%, var(--L-code-border));
+    --clr-code-bold-text: hsl(0, 0%, var(--L-code-bold-text));
+    //kbd these are keyboard shortcuts eg <kbd>CMD+R</kbd>
+    --clr-kbd-bg: hsl(210, 25%, var(--L-kbd-bg));
+    --clr-kbd-border: hsl(212.7, 10.7%, var(--L-kbd-border));
+    --clr-kbd-border-bottom-and-shadow: hsl(210, 8.2%, var(--L-kbd-border-bottom-and-shadow));// akbd elemnts border bottom and its shadow color
+    --clr-kbd-text: hsl(210, 11.7%, var(--L-kbd-text));
+    // miselainies
+    --clr-bg: hsl(0, 0%, var(--L-bg));//the bg of the page
+    --clr-splitter-blockquote-and-section: hsl(0, 0%, var(--L-splitter-blockquote-and-section));//a color for the lines that split tables, appear on the left pf blockquotes and mark new sections
+    --clr-small-in-a: hsl(0, 0%, var(--L-small-in-a));//the color for small elements in a's this color is used on the veiw on github button above the download buttons
+    --clr-table-header-and-dt: hsl(0, 0%, var(--L-table-header-and-dt)); //more info on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
+  }
+
+  @mixin light-colors {
+    // buttons
+    --L-a-text: 35%;
+    --L-buttons-main-bg: 96%;
+    --L-buttons-main-border: 88%;
+    --L-buttons-main-text: 40%;
+    --L-buttons-main-text-hover: 38%;
+    // headers + text
+    --L-h1-and-bold: 13%;
+    --L-h2: 22%;
+    --L-h-3-6: 29%;
+    --L-text-bold: 36%;
+    --L-text: 45%;
+    // code blocks
+    --L-code-text: 20%;
+    --L-code-bg: 97%;
+    --L-code-border: 90%;
+    --L-code-bold-text: 0%;
+    //kbd these are keyboard shortcuts eg <kbd>CMD+R</kbd>
+    --L-kbd-bg: 98%;
+    --L-kbd-border: 80%;
+    --L-kbd-border-bottom-and-shadow: 62%;
+    --L-kbd-text: 30%;
+    // misilainius
+    --L-bg: 100%;
+    --L-splitter-blockquote-and-section: 90%;//for elements like hr + blockquote
+    --L-small-in-a: 47%;
+    --L-table-header-and-dt: 27%; //more on dt's https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
+  }
+
+@mixin dark-colors {
+  // buttons
+  --L-a-text: 60%;
+  --L-buttons-main-bg: 17%;
+  --L-buttons-main-border: 26%;
+  --L-buttons-main-text: 76%;
+  --L-buttons-main-text-hover: 80%;
+  // headers + text
+  --L-h1-and-bold: 90%;
+  --L-h2: 83%;
+  --L-h-3-6: 76%;
+  --L-text: 70%;
+  // code blocks  
+  --L-code-text: 80%;
+  --L-code-bg: 3%;
+  --L-code-border: 5%;
+  --L-code-bold-text: 100%;
+  //kbd these are keyboard shortcuts eg <kbd>CMD+R</kbd>
+  --L-kbd-bg: 30%;
+  --L-kbd-border: 45%;
+  --L-kbd-border-bottom-and-shadow: 55%;
+  --L-kbd-text: 100%;
+  // misilainius
+  --L-splitter-blockquote-and-section: 15%;// for elements like hr and blockquote
+  --L-bg: 10%;
+  --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
+}
diff --git a/_sass/jekyll-theme-minimal.scss b/_sass/jekyll-theme-minimal.scss
@@ -2,15 +2,15 @@
 @import "rouge-github";
 
 body {
-  background-color: #fff;
+  background-color: var(--clr-bg);
   padding:50px;
   font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color:#727272;
+  color: var(--clr-text);
   font-weight:400;
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color:#222;
+  color: var(--clr-h1-and-bold);
   margin:0 0 20px;
 }
 
@@ -27,32 +27,32 @@ h1 {
 }
 
 h2 {
-  color:#393939;
+  color: var(--clr-h2);
 }
 
 h3, h4, h5, h6 {
-  color:#494949;
+  color: var(--clr-h-3-6);
 }
 
 a {
-  color:#267CB9;
+  color:var(--clr-a-text);
   text-decoration:none;
 }
 
 a:hover, a:focus {
-  color:#069;
+  color: var(--clr-a-text-hvr);
   font-weight: bold;
 }
 
 a small {
   font-size:11px;
-  color:#777;
+  color:var(--clr-small-in-a);
   margin-top:-0.3em;
   display:block;
 }
 
 a:hover small {
-  color:#777;
+  color:var(--clr-small-in-a);
 }
 
 .wrapper {
@@ -61,22 +61,22 @@ a:hover small {
 }
 
 blockquote {
-  border-left:1px solid #e5e5e5;
+  border-left:1px solid var(--clr-splitter-blockquote-and-section);
   margin:0;
   padding:0 0 0 20px;
   font-style:italic;
 }
 
 code, pre {
   font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
-  color:#333;
+  color: var(--clr-code-text);
 }
 
 pre {
   padding:8px 15px;
-  background: #f8f8f8;
+  background: var(--clr-code-bg);
   border-radius:5px;
-  border:1px solid #e5e5e5;
+  border:1px solid var(--clr-code-border);
   overflow-x: auto;
 }
 
@@ -88,29 +88,29 @@ table {
 th, td {
   text-align:left;
   padding:5px 10px;
-  border-bottom:1px solid #e5e5e5;
+  border-bottom:1px solid var(--clr-splitter-blockquote-and-section);
 }
 
 dt {
-  color:#444;
+  color:var(--clr-table-header-and-dt);
   font-weight:700;
 }
 
 th {
-  color:#444;
+  color:var(--clr-table-header-and-dt);
 }
 
 img {
   max-width:100%;
 }
 
 kbd {
-  background-color: #fafbfc;
-  border: 1px solid #c6cbd1;
-  border-bottom-color: #959da5;
+  background-color: var(--clr-kbd-bg) ;
+  border: 1px solid var(--clr-kbd-border);
+  border-bottom-color: var(--clr-kbd-border-bottom-and-shadow);
   border-radius: 3px;
-  box-shadow: inset 0 -1px 0 #959da5;
-  color: #444d56;
+  box-shadow: inset 0 -1px 0 var(--clr-kbd-border-bottom-and-shadow);
+  color: var(--clr-kbd-text);
   display: inline-block;
   font-size: 11px;
   line-height: 10px;
@@ -129,16 +129,16 @@ ul.downloads {
   list-style:none;
   height:40px;
   padding:0;
-  background: #f4f4f4;
+  background: var(--clr-buttons-main-bg);
   border-radius:5px;
-  border:1px solid #e0e0e0;
+  border:1px solid var(--clr-buttons-main-border);
   width:270px;
 }
 
 .downloads li {
   width:89px;
   float:left;
-  border-right:1px solid #e0e0e0;
+  border-right:1px solid var(--clr-buttons-main-border);
   height:40px;
 }
 
@@ -153,15 +153,15 @@ ul.downloads {
 .downloads a {
   line-height:1;
   font-size:11px;
-  color:#676767;
+  color:var(--clr-buttons-main-text);
   display:block;
   text-align:center;
   padding-top:6px;
   height:34px;
 }
 
 .downloads a:hover, .downloads a:focus {
-  color:#675C5C;
+  color: var(--clr-buttons-main-text-hover);
   font-weight:bold;
 }
 
@@ -170,7 +170,7 @@ ul.downloads {
 }
 
 strong {
-  color:#222;
+  color:var(--clr-h1-and-bold);
   font-weight:700;
 }
 
@@ -182,7 +182,7 @@ strong {
 .downloads a strong {
   font-size:14px;
   display:block;
-  color:#222;
+  color:var(--clr-h1-and-bold);
 }
 
 section {
@@ -197,7 +197,7 @@ small {
 
 hr {
   border:0;
-  background:#e5e5e5;
+  background:var(--clr-splitter-blockquote-and-section);
   height:1px;
   margin:0 0 20px;
 }
@@ -228,7 +228,7 @@ footer {
   }
 
   section {
-    border:1px solid #e5e5e5;
+    border:1px solid var(--clr-splitter-blockquote-and-section);
     border-width:1px 0;
     padding:20px 0;
     margin:0 0 20px;