diff --git a/README.md b/README.md index 78c550d78d8fe..a7eeab282e89e 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ 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: @@ -46,6 +47,7 @@ header_pages: - about.md style: dark # dark (default) or light +listen_for_clients_preferred_style: true # true or false (default) footer: 'follow us on twitter' diff --git a/_config.yml b/_config.yml index e6aa30258d6b0..1b28bf031531a 100644 --- a/_config.yml +++ b/_config.yml @@ -9,6 +9,7 @@ #footer: 'follow us on twitter' #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 index e7a623654bb29..e8dc9375e6781 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -5,10 +5,14 @@ {{ site.title }}{{ page.title }} {%- seo title=false -%} - {%- if site.style == 'light' -%} - + {%- if site.listen_for_clients_preferred_style -%} + {%- else -%} - + {%- if site.style == 'light' -%} + + {%- else -%} + + {%- endif -%} {%- endif -%} {%- if jekyll.environment == 'production' and site.google_analytics -%} diff --git a/_sass/_dark.scss b/_sass/_dark.scss new file mode 100644 index 0000000000000..22c8cdab7acf3 --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/_sass/_light.scss b/_sass/_light.scss new file mode 100644 index 0000000000000..5a27b684e3213 --- /dev/null +++ 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); + +} \ No newline at end of file diff --git a/_sass/base.scss b/_sass/base.scss index c7683a03a2294..5a9b4b3a241a2 100644 --- 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,7 +33,7 @@ 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; } @@ -41,8 +41,8 @@ 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 deleted file mode 100644 index 4f766b0683cf2..0000000000000 --- a/_sass/dark.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Style variables - */ -$base-color: #DBDBDB !default; -$primary-color: #a1fc8f !default; -$text-color: $base-color !default; -$placeholder-color: $base-color !default; -$link-color: $base-color !default; -$border: dashed 1px rgba(219,219,219,0.9) !default; -$selection-background: rgba(219,219,219,0.99) !default; -$selection-text: #000 !default; -$background-color: #000 !default; - - -@import "base"; diff --git a/_sass/light.scss b/_sass/light.scss deleted file mode 100644 index d4f8575091e2d..0000000000000 --- a/_sass/light.scss +++ /dev/null @@ -1,15 +0,0 @@ -/** - * Style variables - */ -$base-color: #000 !default; -$primary-color: #0000EE !default; -$text-color: $base-color !default; -$placeholder-color: $base-color !default; -$link-color: $base-color !default; -$border: dashed 1px rgba(0,0,0,1) !default; -$selection-background: rgba(0,0,0,0.99) !default; -$selection-text: #fff !default; -$background-color: #fff !default; - - -@import "base"; diff --git a/assets/main-dark.scss b/assets/main-dark.scss index 6aaa75bfc134c..64c0632947aa2 100644 --- 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 index 5bbf5e1cea15c..8edca099714ac 100644 --- 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 new file mode 100644 index 0000000000000..502a8ecdce558 --- /dev/null +++ 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 index 3b28bcfc0aa7a..69b11b64127a1 100644 --- 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