Merge pull request barryclark#8 from schwigri/dev

Allow site owners to let users choose light/dark theme
qeesung · Oct 17, 2019 · d15e7b1 · d15e7b1
2 parents a7d0668 + cc0705b
commit d15e7b1
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -39,13 +39,15 @@ In addition to jekyll's default configuration options, you can provide:
 - `header_pages` to specify which pages should be displayed in navbar
 - `footer` string, which will be inserted on the end of the page (doesn't support markup, but html)
 - `google_analytics` tracking id (tracking will be enabled only in production environments)
+- `listen_for_clients_preferred_style` boolean, used to allow users to choose theme based on their preferences
 
 ```yaml
 header_pages:
   - index.md
   - about.md
 
 style: dark # dark (default) or light
+listen_for_clients_preferred_style: true # true or false (default)
 
 footer: 'follow us on <a href="https://twitter.com/xxx">twitter</a>'
 

diff --git a/_config.yml b/_config.yml
@@ -9,6 +9,7 @@
 #footer: 'follow us on <a href="https://twitter.com/">twitter</a>'
 
 #style: light # dark (default) or light
+#listen_for_clients_preferred_style: true # true or false (default)
 
 plugins:
   - jekyll-seo-tag
diff --git a/_includes/head.html b/_includes/head.html
@@ -5,10 +5,14 @@
   <title>{{ site.title }}{{ page.title }}</title>
   {%- seo title=false -%}
 
-  {%- if site.style == 'light' -%}
-    <link rel="stylesheet" type="text/css" href="{{ "/assets/main-light.css" | relative_url }}">
+  {%- if site.listen_for_clients_preferred_style -%}
+    <link rel="stylesheet" type="text/css" href="{{ "/assets/main.css" | relative_url }}">
   {%- else -%}
-    <link rel="stylesheet" type="text/css" href="{{ "/assets/main-dark.css" | relative_url }}">
+    {%- if site.style == 'light' -%}
+     <link rel="stylesheet" type="text/css" href="{{ "/assets/main-light.css" | relative_url }}">
+   {%- else -%}
+      <link rel="stylesheet" type="text/css" href="{{ "/assets/main-dark.css" | relative_url }}">
+    {%- endif -%}
   {%- endif -%}
 
   {%- if jekyll.environment == 'production' and site.google_analytics -%}

diff --git a/_sass/_dark.scss b/_sass/_dark.scss
@@ -0,0 +1,15 @@
+/**
+ * Dark theme variables
+ */
+
+:root {
+  --base-color: #DBDBDB;
+  --primary-color: #A2FC8F;
+  --border: dashed 1px rgba(219, 219, 219, 0.9);
+  --selection-background: rgba(219, 219, 219, 0.99);
+  --selection-text: #000;
+  --background-color: #000;
+  --text-color: var(--base-color);
+  --placeholder-color: var(--base-color);
+  --link-color: var(--base-color);
+}
diff --git a/_sass/_light.scss b/_sass/_light.scss
@@ -0,0 +1,16 @@
+/**
+ * Light theme variables
+ */
+
+:root {
+  --base-color: #000;
+  --primary-color: #0000EE;
+  --border: dashed 1px rgba(0, 0, 0, 1);
+  --selection-background: rgba(0, 0, 0, 0.99);
+  --selection-text: #FFF;
+  --background-color: #FFF;
+  --text-color: var(--base-color);
+  --placeholder-color: var(--base-color);
+  --link-color: var(--base-color);
+
+}
diff --git a/_sass/base.scss b/_sass/base.scss
@@ -14,12 +14,12 @@ $container-max-width:  600px !default;
 /**
  * Global
  */
-body { background-color: $background-color;  margin: 0 auto;  padding: 0;  font-family: $base-font-family;  font-size: $base-font-size;  color: $text-color;  text-align: left;  line-height: $base-line-height !important; }
-h1, h2, h3, h4, h5, h6 { font-size: $base-font-size;  margin: 0px;  margin-top: 22px;  font-weight: bold;  color: $text-color; }
-p, ul, ol { margin: 0px;  color: $text-color; }
-a { text-decoration: underline;  color: $link-color; }
-a:hover { color: $background-color; background-color: $base-color; }
-.primary-text { color: $primary-color; }
+body { background-color: var(--background-color);  margin: 0 auto;  padding: 0;  font-family: $base-font-family;  font-size: $base-font-size;  color: var(--text-color);  text-align: left;  line-height: $base-line-height !important; }
+h1, h2, h3, h4, h5, h6 { font-size: $base-font-size;  margin: 0px;  margin-top: 22px;  font-weight: bold;  color: var(--text-color); }
+p, ul, ol { margin: 0px;  color: var(--text-color); }
+a { text-decoration: underline;  color: var(--link-color); }
+a:hover { color: var(--background-color); background-color: var(--base-color); }
+.primary-text { color: var(--primary-color); }
 @media only screen and (max-device-width: 500px) { * { font-size: $mobile-font-size !important; } }
 /*h1:before { content: "#";  margin-right: 9px; }
 h2:before { content: "##";  margin-right: 9px; }
@@ -33,16 +33,16 @@ h6:before { content: "######";  margin-right: 9px; }*/
  */
 .container { width: $container-width;  max-width: $container-max-width;  margin-right: auto;  margin-left: auto; }
 p { word-wrap: break-word;  word-break: break-word;  white-space: pre-wrap; }
-footer { color: $text-color;  border-top: $border;  margin: 20px auto 15px;  padding-top: 10px;  text-align: right; }
+footer { color: var(--text-color);  border-top: var(--border);  margin: 20px auto 15px;  padding-top: 10px;  text-align: right; }
 header { margin-top: 25px;  margin-bottom: 10px; }
 header p { text-align: left;  margin: 0; }
 footer { margin-bottom: 20px; }
 
 /**
  * Highlight/Markup
  */
-::selection { background: $selection-background;  color: $selection-text; }
-::-moz-selection { background: $selection-background;  color: $selection-text; }
+::selection { background: var(--selection-background);  color: var(--selection-text); }
+::-moz-selection { background: var(--selection-background);  color: var(--selection-text); }
 
 /**
  * Lists
@@ -54,30 +54,30 @@ footer { margin-bottom: 20px; }
 /**
  * Header/Navigation
  */
-.menu { border-top: $border;  border-bottom: $border;  margin-bottom: 25px; }
+.menu { border-top: var(--border);  border-bottom: var(--border);  margin-bottom: 25px; }
 .menu ul { margin-top: 12px;  margin-bottom: 12px;  padding-left: 0px;  list-style-type: none;  text-align: right; }
 .menu ul li { display: inline;  margin-left: 10px; }
-.menu ul li a { text-decoration: none;  color: $text-color; }
-.menu ul li a:hover { text-decoration: none; color: $background-color; background-color: $base-color; }
+.menu ul li a { text-decoration: none;  color: var(--text-color); }
+.menu ul li a:hover { text-decoration: none; color: var(--background-color); background-color: var(--base-color); }
 
 /**
  * Form
  */
 input, select, textarea { padding: 0;  margin: 0;  -webkit-appearance: none;  -webkit-border-radius: 0;  border: none; }
-input[type=text], select, textarea { width: 100%;  resize: none;  background-color: $background-color;  color: $text-color;  caret-color: $text-color;  font-size: $base-font-size;  font-family: $base-font-family;  line-height: $base-line-height; }
+input[type=text], select, textarea { width: 100%;  resize: none;  background-color: var(--background-color);  color: var(--text-color);  caret-color: var(--text-color);  font-size: $base-font-size;  font-family: $base-font-family;  line-height: $base-line-height; }
 input, select, textarea, textarea::-webkit-input-placeholder { text-indent: 0px; }
-::placeholder { color: $placeholder-color;  opacity: 1; }
-:-ms-input-placeholder { color: $placeholder-color; }
-::-ms-input-placeholder { color: $placeholder-color; }
-input[type=submit] { font-size: $base-font-size;  font-family: $base-font-family;  line-height: $base-line-height;  cursor: pointer;  color: $link-color;  background-color: $background-color; }
-input[type=submit]:hover { color: $background-color; background-color: $base-color; }
+::placeholder { color: var(--placeholder-color);  opacity: 1; }
+:-ms-input-placeholder { color: var(--placeholder-color); }
+::-ms-input-placeholder { color: var(--placeholder-color); }
+input[type=submit] { font-size: $base-font-size;  font-family: $base-font-family;  line-height: $base-line-height;  cursor: pointer;  color: var(--link-color);  background-color: var(--background-color); }
+input[type=submit]:hover { color: var(--background-color); background-color: var(--base-color); }
 *:focus { outline: none; }
 textarea { vertical-align: top; }
 
 /**
  * Code and syntax highlighting
  */
-pre { background-color: $background-color;  border: none;  padding: 0px;  overflow:auto;  font-size: $base-font-size;  color: rgba(255,255,255,0.65);  line-height: 1.7 !important; }
+pre { background-color: var(--background-color);  border: none;  padding: 0px;  overflow:auto;  font-size: $base-font-size;  color: rgba(255,255,255,0.65);  line-height: 1.7 !important; }
 .highlight .c { color: #999988; font-style: italic } /* Comment */
 .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
 .highlight .k { font-weight: bold } /* Keyword */

diff --git a/_sass/dark.scss b/_sass/dark.scss
diff --git a/_sass/light.scss b/_sass/light.scss
diff --git a/assets/main-dark.scss b/assets/main-dark.scss
@@ -3,3 +3,4 @@
 ---
 
 @import "dark";
+@import "base";
diff --git a/assets/main-light.scss b/assets/main-light.scss
@@ -3,3 +3,4 @@
 ---
 
 @import "light";
+@import "base";
diff --git a/assets/main.scss b/assets/main.scss
@@ -0,0 +1,10 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+@import "light";
+@import "base";
+
+@media (prefers-color-scheme: dark) {
+	@import "dark";
+}
diff --git a/jekyll-theme-console.gemspec b/jekyll-theme-console.gemspec
@@ -14,6 +14,6 @@ Gem::Specification.new do |spec|
 
   spec.add_runtime_dependency "jekyll", ">= 3.5"
   spec.add_runtime_dependency "jekyll-seo-tag"
-  spec.add_development_dependency "bundler", "~> 1.16"
+  spec.add_development_dependency "bundler", "> 1.16"
   spec.add_development_dependency "rake", "~> 12.0"
 end