pages-themes · godalming123 · Aug 18, 2021 · Aug 18, 2021 · Aug 18, 2021 · Aug 19, 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-default-dark" auto is default 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 default to dark and the others are fairly explanetory.]
 ```
 
 ### Stylesheet

diff --git a/_config.yml b/_config.yml
@@ -2,4 +2,5 @@ title: Cayman theme
 description: Cayman is a clean, responsive theme for GitHub Pages.
 show_downloads: true
 google_analytics:
-theme: jekyll-theme-cayman
+theme: jekyll-theme-cayman
+#color-scheme: auto-default-dark
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,13 +2,17 @@
 <html lang="{{ site.lang | default: "en-US" }}">
   <head>
     <meta charset="UTF-8">
-
-{% seo %}
+    {% seo %}
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" as="style" type="text/css" crossorigin>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#157878">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    {% if site.color-scheme %}
+      <link rel="stylesheet" href="{{ "/assets/css/color-schemes/colors-ColorScheme.css?v=" | replace: "ColorScheme", site.color-scheme | append: site.github.build_revision | relative_url }}">
+    {% else %}
+      <link rel="stylesheet" href="{{ "/assets/css/color-schemes/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 }}">
     {% include head-custom.html %}
   </head>

diff --git a/_sass/colors.scss b/_sass/colors.scss
@@ -0,0 +1,115 @@
+@mixin header-colors {
+      --header-heading-color: #fff;
+      --header-bg-color: #159957;
+      --header-bg-color-secondary: #155799;
+}
+
+@mixin light-colors {
+    // Text
+    --section-headings-color: #22cc77;
+    --body-text-color: #606c71;
+    --body-link-color: #1e6bb8;
+    --blockquote-text-color: #819198;
+
+    // Code
+    --code-bg-color: #f3f6fa;
+    --code-text-color: #567482;
+    //colors
+    --code-d14: #d14;
+    --code-red-dark: #aa0000;
+    --code-lightblue: #009999;
+    --code-009926: #009926;
+    --code-990073: #990073;
+    --code-008080: #008080;
+    --code-445588: #445588;
+    --code-grey-as: #aaaaaa;
+    --code-grey-9s: #999999;
+    --code-grey-8s: #888888;
+    --code-grey-5s: #555555;
+    --code-000080: #000080;
+    --code-990000: #990000;
+    --code-800080: #800080;
+    --code-3c5d5d: #3c5d5d;
+
+    // Borders
+    --border-color: #dce6f0;
+    --table-border-color: #e9ebec;
+    --hr-border-color: #eff0f1;
+
+    // Miscellaneous
+    --bg-color: white;
+  }
+
+  @mixin dark-colors {
+    // Text
+    --section-headings-color: #159957;
+    --body-text-color: #ffffff;
+    --body-link-color: #1e6bb8;
+    --blockquote-text-color: #b4b4b4;
+
+    // Code
+    --code-bg-color: #2e2e2e;
+    --code-text-color: #dbdbdb;
+    --code-bold-text-color: hsl(0, 0, 100%);
+    //colors
+    --code-d14: #d14;
+    --code-red-dark: #aa0000;
+    --code-lightblue: #009999;
+    --code-009926: #009926;
+    --code-990073: #990073;
+    --code-008080: #008080;
+    --code-445588: #445588;
+    --code-grey-as: #aaaaaa;
+    --code-grey-9s: #999999;
+    --code-grey-8s: #888888;
+    --code-grey-5s: #555555;
+    --code-000080: #000080;
+    --code-990000: #990000;
+    --code-800080: #800080;
+    --code-3c5d5d: #3c5d5d;
+
+    // Borders
+    --border-color: #606468;
+    --table-border-color: #3a3a3a;
+    --hr-border-color: #242424;
+
+    // Miscellaneous
+    --bg-color:hsl(0, 0%, 10%);
+  }
+
+@mixin experimental-black-code-block-colors {
+      // Text
+      --section-headings-color: #159957;
+      --body-text-color: #ffffff;
+      --body-link-color: #1e6bb8;
+      --blockquote-text-color: #b4b4b4;
+
+      // Code
+      --code-bg-color: #080808;
+      --code-text-color: #dbdbdb;
+      --code-bold-text-color: hsl(0, 0, 100%);
+      //colors
+      --code-d14: #d14;
+      --code-red-dark: #aa0000;
+      --code-lightblue: #009999;
+      --code-009926: #009926;
+      --code-990073: #990073;
+      --code-008080: #008080;
+      --code-445588: #445588;
+      --code-grey-as: #aaaaaa;
+      --code-grey-9s: #999999;
+      --code-grey-8s: #888888;
+      --code-grey-5s: #555555;
+      --code-000080: #000080;
+      --code-990000: #990000;
+      --code-800080: #800080;
+      --code-3c5d5d: #3c5d5d;
+
+      // Borders
+      --border-color: #3c3c3c;
+      --table-border-color: #3a3a3a;
+      --hr-border-color: #242424;
+
+      // Miscellaneous
+      --bg-color:hsl(0, 0%, 10%);
+}
diff --git a/_sass/jekyll-theme-cayman.scss b/_sass/jekyll-theme-cayman.scss
@@ -26,12 +26,13 @@
 }
 
 body {
+  background-color: var(--bg-color);
   padding: 0;
   margin: 0;
   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5;
-  color: $body-text-color;
+  color: var(--body-text-color);
 }
 
 #skip-to-content {
@@ -40,20 +41,21 @@ body {
   position: absolute;
   overflow: hidden;
   top: -10px;
+  border-radius: 1px;
 
   &:focus {
     position: fixed;
     top: 10px;
     left: 10px;
     height: auto;
     width: auto;
-    background: invert($body-link-color);
-    outline: thick solid invert($body-link-color);
+    background: var(--body-link-color);
+    outline: solid var(--body-link-color);
   }
 }
 
 a {
-  color: $body-link-color;
+  color: var(--body-link-color);
   text-decoration: none;
 
   &:hover {
@@ -106,10 +108,9 @@ a {
 }
 
 .page-header {
-  color: $header-heading-color;
+  color: var(--header-heading-color);
   text-align: center;
-  background-color: $header-bg-color;
-  background-image: linear-gradient(120deg, $header-bg-color-secondary, $header-bg-color);
+  background-image: linear-gradient(120deg, var(--header-bg-color-secondary), var(--header-bg-color));
 
   @include large {
     padding: 5rem 6rem;
@@ -210,7 +211,7 @@ a {
     margin-top: 2rem;
     margin-bottom: 1rem;
     font-weight: normal;
-    color: $section-headings-color;
+    color: var(--section-headings-color);
   }
 
   p {
@@ -221,8 +222,8 @@ a {
     padding: 2px 4px;
     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
     font-size: 0.9rem;
-    color: $code-text-color;
-    background-color: $code-bg-color;
+    color: var(--code-text-color);
+    background-color: var(--code-bg-color);
     border-radius: 0.3rem;
   }
 
@@ -231,17 +232,17 @@ a {
     margin-top: 0;
     margin-bottom: 1rem;
     font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    color: $code-text-color;
+    color: var(--code-text-color);
     word-wrap: normal;
-    background-color: $code-bg-color;
-    border: solid 1px $border-color;
+    background-color: var(--code-bg-color);
+    border: solid 1px var(--border-color);
     border-radius: 0.3rem;
 
     > code {
       padding: 0;
       margin: 0;
       font-size: 0.9rem;
-      color: $code-text-color;
+      color: var(--code-text-color);
       word-break: normal;
       white-space: pre;
       background: transparent;
@@ -294,8 +295,8 @@ a {
   blockquote {
     padding: 0 1rem;
     margin-left: 0;
-    color: $blockquote-text-color;
-    border-left: 0.3rem solid $border-color;
+    color: var(--blockquote-text-color);
+    border-left: 0.3rem solid var(--border-color);
 
     > :first-child {
       margin-top: 0;
@@ -321,7 +322,7 @@ a {
     th,
     td {
       padding: 0.5rem 1rem;
-      border: 1px solid $table-border-color;
+      border: 1px solid var(--table-border-color);
     }
   }
 
@@ -345,15 +346,15 @@ a {
     height: 2px;
     padding: 0;
     margin: 1rem 0;
-    background-color: $hr-border-color;
+    background-color: var(--hr-border-color);
     border: 0;
   }
 }
 
 .site-footer {
   padding-top: 2rem;
   margin-top: 2rem;
-  border-top: solid 1px $hr-border-color;
+  border-top: solid 1px var(--hr-border-color);
 
   @include large {
     font-size: 1rem;
@@ -374,5 +375,5 @@ a {
 }
 
 .site-footer-credits {
-  color: $blockquote-text-color;
+  color: var(--blockquote-text-color);
 }