diff --git a/README.md b/README.md
index b6e6b69789..682157b7f1 100644
--- 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](https://godalming123.github.io/minimal/), or even [use it today](#usage).*
 
 ![Thumbnail of Minimal](thumbnail.png)
 
@@ -13,7 +13,7 @@ To use the Minimal theme:
 1. Add the following to your site's `_config.yml`:
 
     ```yml
-    remote_theme: pages-themes/minimal@v0.2.0
+    remote_theme: "godalming123/minimal"
     plugins:
     - jekyll-remote-theme # add this line to the plugins list if you already have one
     ```
@@ -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-default-dark" auto is the default setting and changes theme based on device theme, auto-default-dark is the same except if you device does not support changing theme based on device theme it will default to dark and the others are fairly self explanetory.]
 ```
 
 ### Stylesheet
diff --git a/_config.yml b/_config.yml
index c90d804d8d..8ff84919bc 100644
--- 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-default-dark
diff --git a/_layouts/default.html b/_layouts/default.html
index 0870472281..db98e7c73a 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -5,8 +5,15 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <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 }}">
+    {% seo %}
+
+    {%if site.color-scheme %}
+      <link rel="stylesheet" href="{{ "/assets/css/colors-ColorScheme.css?v=" | replace: "ColorScheme", site.color-scheme | append: site.github.build_revision | relative_url }}">
+    {% else %}
+      <link rel="stylesheet" href="{{ "/assets/css/colors-auto.css?v=" | append: site.github.build_revision | relative_url }}">
+    {% endif %}
+    
+    <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
new file mode 100644
index 0000000000..5a5660365a
--- /dev/null
+++ b/_sass/colors.scss
@@ -0,0 +1,124 @@
+/*
+H -> hue
+L -> luminosity
+S -> saturation
+clr -> color
+bg -> background
+hvr -> hover
+*/
+
+// colors that do not change depending on dark/light theme (each color catogry goes from brighter to darker)
+:root {
+    // red colors
+    --code-d14:    #d14;
+    --code-aa0000: #aa0000;
+    --code-990000: #990000;
+    // cyan colors
+    --code-009999: #009999;
+    --code-008080: #008080;
+    --code-3c5d5d: #3c5d5d;
+    // green colors
+    --code-009926: #009926;
+    // pink colors
+    --code-990073: #990073;
+    --code-800080: #800080;
+    // purple colors
+    --code-445588: #445588;
+    // blue colors
+    --code-000080: #000080;
+    // grey colors
+    --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: 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-visual-separation: 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
index fecbca3e0a..f8faa4d7b5 100644
--- a/_sass/jekyll-theme-minimal.scss
+++ b/_sass/jekyll-theme-minimal.scss
@@ -2,115 +2,115 @@
 @import "rouge-github";
 
 body {
-  background-color: #fff;
-  padding:50px;
+  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;
-  margin:0 0 20px;
+  margin: 0 0 20px;
 }
 
 p, ul, ol, table, pre, dl {
-  margin:0 0 20px;
+  margin: 0 0 20px;
 }
 
 h1, h2, h3 {
-  line-height:1.1;
+  line-height: 1.1;
 }
 
 h1 {
-  font-size:28px;
+  color: var(--clr-h1);
+  font-size: 28px;
 }
 
 h2 {
-  color:#393939;
+  color: var(--clr-h2);
 }
 
 h3, h4, h5, h6 {
-  color:#494949;
+  color: var(--clr-h-3-6);
 }
 
 a {
-  color:#267CB9;
-  text-decoration:none;
+  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;
-  margin-top:-0.3em;
-  display:block;
+  font-size: 11px;
+  color: var(--clr-small-in-a);
+  margin-top: -0.3em;
+  display: block;
 }
 
 a:hover small {
-  color:#777;
+  color: var(--clr-small-in-a);
 }
 
 .wrapper {
-  width:860px;
-  margin:0 auto;
+  width: 860px;
+  margin: 0 auto;
 }
 
 blockquote {
-  border-left:1px solid #e5e5e5;
-  margin:0;
-  padding:0 0 0 20px;
-  font-style:italic;
+  border-left: 1px solid var(--clr-visual-separation);
+  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;
+  font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
+  color: var(--clr-code-text);
 }
 
 pre {
-  padding:8px 15px;
-  background: #f8f8f8;
-  border-radius:5px;
-  border:1px solid #e5e5e5;
+  padding: 8px 15px;
+  background: var(--clr-code-bg);
+  border-radius: 5px;
+  border: 1px solid var(--clr-code-border);
   overflow-x: auto;
 }
 
 table {
-  width:100%;
-  border-collapse:collapse;
+  width: 100%;
+  border-collapse: collapse;
 }
 
 th, td {
-  text-align:left;
-  padding:5px 10px;
-  border-bottom:1px solid #e5e5e5;
+  text-align: left;
+  padding: 5px 10px;
+  border-bottom: 1px solid var(--clr-visual-separation);
 }
 
 dt {
-  color:#444;
-  font-weight:700;
+  color: var(--clr-table-header-and-dt);
+  font-weight: 700;
 }
 
 th {
-  color:#444;
+  color: var(--clr-table-header-and-dt);
 }
 
 img {
-  max-width:100%;
+  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;
@@ -119,87 +119,86 @@ kbd {
 }
 
 header {
-  width:270px;
-  float:left;
-  position:fixed;
-  -webkit-font-smoothing:subpixel-antialiased;
+  width: 270px;
+  float: left;
+  position: fixed;
 }
 
 ul.downloads {
-  list-style:none;
-  height:40px;
-  padding:0;
-  background: #f4f4f4;
-  border-radius:5px;
-  border:1px solid #e0e0e0;
-  width:270px;
+  list-style: none;
+  height: 40px;
+  padding: 0;
+  background: var(--clr-buttons-main-bg);
+  border-radius: 5px;
+  border: 1px solid var(--clr-buttons-main-border);
+  width: 270px;
 }
 
 .downloads li {
-  width:89px;
-  float:left;
-  border-right:1px solid #e0e0e0;
-  height:40px;
+  width: 89px;
+  float: left;
+  border-right: 1px solid var(--clr-buttons-main-border);
+  height: 40px;
 }
 
 .downloads li:first-child a {
-  border-radius:5px 0 0 5px;
+  border-radius: 5px 0 0 5px;
 }
 
 .downloads li:last-child a {
-  border-radius:0 5px 5px 0;
+  border-radius: 0 5px 5px 0;
 }
 
 .downloads a {
-  line-height:1;
-  font-size:11px;
-  color:#676767;
-  display:block;
-  text-align:center;
-  padding-top:6px;
-  height:34px;
+  line-height: 1;
+  font-size: 11px;
+  color: var(--clr-buttons-main-text);
+  display: block;
+  text-align: center;
+  padding-top: 6px;
+  height: 34px;
 }
 
 .downloads a:hover, .downloads a:focus {
-  color:#675C5C;
-  font-weight:bold;
+  color: var(--clr-buttons-main-text-hover);
+  font-weight: bold;
 }
 
 .downloads ul a:active {
-  background-color:#f0f0f0;
+  background-color: #f0f0f0;
 }
 
 strong {
-  color:#222;
-  font-weight:700;
+  color: var(--clr-h1-and-bold);
+  font-weight: 700;
 }
 
 .downloads li + li + li {
-  border-right:none;
-  width:89px;
+  border-right: none;
+  width: 89px;
 }
 
 .downloads a strong {
-  font-size:14px;
-  display:block;
-  color:#222;
+  font-size: 14px;
+  display: block;
+  color: var(--clr-h1-and-bold);
 }
 
 section {
-  width:500px;
-  float:right;
-  padding-bottom:50px;
+  width: 500px;
+  float: right;
+  padding-bottom: 50px;
 }
 
 small {
-  font-size:11px;
+  font-size: 11px;
 }
 
 hr {
-  border:0;
-  background:#e5e5e5;
-  height:1px;
-  margin:0 0 20px;
+  border: 0;
+  background: var(--clr-visual-separation);
+  height: 1px;
+  margin: 0 0 20px;
 }
 
 footer {
@@ -228,7 +227,7 @@ footer {
   }
 
   section {
-    border:1px solid #e5e5e5;
+    border:1px solid var(--clr-visual-separation);
     border-width:1px 0;
     padding:20px 0;
     margin:0 0 20px;
diff --git a/_sass/rouge-github.scss b/_sass/rouge-github.scss
index daf76adee9..a7e903fe7b 100644
--- a/_sass/rouge-github.scss
+++ b/_sass/rouge-github.scss
@@ -26,11 +26,11 @@
   background-color: #e3d2d2;
 }
 .highlight .gd {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   background-color: #ffdddd;
 }
 .highlight .ge {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   font-style: italic;
 }
 .highlight .gr {
@@ -40,7 +40,7 @@
   color: #999999;
 }
 .highlight .gi {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   background-color: #ddffdd;
 }
 .highlight .go {
@@ -59,23 +59,23 @@
   color: #aa0000;
 }
 .highlight .kc {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   font-weight: bold;
 }
 .highlight .kd {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   font-weight: bold;
 }
 .highlight .kn {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   font-weight: bold;
 }
 .highlight .kp {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   font-weight: bold;
 }
 .highlight .kr {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   font-weight: bold;
 }
 .highlight .kt {
@@ -83,7 +83,7 @@
   font-weight: bold;
 }
 .highlight .k, .highlight .kv {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   font-weight: bold;
 }
 .highlight .mf {
@@ -198,12 +198,9 @@
   font-weight: bold;
 }
 .highlight .o {
-  color: #000000;
+  color: var(--clr-code-bold-text);
   font-weight: bold;
 }
 .highlight .w {
   color: #bbbbbb;
 }
-.highlight {
-  background-color: #f8f8f8;
-}
diff --git a/assets/css/colors-auto-default-dark.scss b/assets/css/colors-auto-default-dark.scss
new file mode 100644
index 0000000000..f1513cf9e1
--- /dev/null
+++ b/assets/css/colors-auto-default-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;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/colors-auto.scss b/assets/css/colors-auto.scss
new file mode 100644
index 0000000000..4a2342ccaa
--- /dev/null
+++ 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;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/colors-dark.scss b/assets/css/colors-dark.scss
new file mode 100644
index 0000000000..e5675642c1
--- /dev/null
+++ b/assets/css/colors-dark.scss
@@ -0,0 +1,15 @@
+---
+---
+
+@import "colors";
+
+:root {
+  @include colors;
+  @include dark-colors;
+}
+
+@media print {
+  :root {
+    @include light-colors;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/colors-light.scss b/assets/css/colors-light.scss
new file mode 100644
index 0000000000..bccbf3d5b6
--- /dev/null
+++ b/assets/css/colors-light.scss
@@ -0,0 +1,9 @@
+---
+---
+
+@import "colors";
+
+:root {
+  @include colors;
+  @include light-colors;
+}
\ No newline at end of file
diff --git a/index.md b/index.md
index 8611051996..72608e9383 100644
--- a/index.md
+++ b/index.md
@@ -2,7 +2,8 @@
 layout: default
 ---
 
-Text can be **bold**, _italic_, or ~~strikethrough~~.
+Theme can be **dark** or **light** the color is dependent on your system theme so go ahead turn it dark.
+Text can be **bold**, _italic_, or ~~strikethrough~~ or <kbd>keyboard shortcuts</kbd>.
 
 [Link to another page](./another-page.html).
 
diff --git a/thumbnail.png b/thumbnail.png
index e6c0478764..d0d72f3cbf 100644
Binary files a/thumbnail.png and b/thumbnail.png differ