From 371691a6423dfe3b56d8463ec4d4db34f37098d8 Mon Sep 17 00:00:00 2001 From: Eduardo Date: Sun, 29 Sep 2019 00:02:59 +0200 Subject: [PATCH] WIP Dark mode --- README.md | 3 +- package.json | 2 +- src/js/app.js | 3 ++ src/package-lock.json | 46 +++++++------------ src/package.json | 1 + src/sass/app.scss | 1 + src/sass/common/_colors.scss | 29 ++++++++++++ src/sass/common/_global.scss | 12 ++--- src/sass/common/_helpers.scss | 6 +-- src/sass/common/_variables.scss | 4 +- src/sass/components/404/_subtitle.scss | 2 +- src/sass/components/404/_title.scss | 2 +- src/sass/components/_footer.scss | 2 +- .../components/articles/_article-card.scss | 22 ++++----- src/sass/components/author/_author.scss | 6 ++- .../components/comments/_load-comments.scss | 2 +- src/sass/components/header/_header.scss | 6 +-- src/sass/components/header/_nav.scss | 2 +- .../components/header/_recent-article.scss | 4 +- src/sass/components/header/_submenu.scss | 4 +- src/sass/components/header/_tags.scss | 2 +- src/sass/components/hero/_hero.scss | 4 +- src/sass/components/search/_result.scss | 2 +- .../subscribe/_subscribe-section.scss | 2 +- src/sass/components/ui/_button.scss | 2 +- src/sass/components/ui/_icon-button.scss | 12 ++--- src/sass/components/ui/_section-title.scss | 2 +- src/sass/layouts/_post-content.scss | 4 +- 28 files changed, 105 insertions(+), 84 deletions(-) create mode 100644 src/sass/common/_colors.scss diff --git a/README.md b/README.md index 3a64ab8..0b25f55 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Liebling -Liebling is a beautiful and clean Ghost theme that is easy and comfortable to use. **It's free** and you can use it for any kind of content you might have. +Liebling is a beautiful and clean Ghost theme that is easy and comfortable to use. **It's free** and you can use it for any kind of content you might have. Now with dark mode 🌓! If you use it and you like it, please consider to make a donation to support its development! 🙏🏼 @@ -48,6 +48,7 @@ To get the latest version please head over the [releases page](https://github.co ### Liebling unique features +* Dark mode * Search * Custom Subscribe page * Custom authors page diff --git a/package.json b/package.json index db0569a..82c65f8 100644 --- a/package.json +++ b/package.json @@ -54,5 +54,5 @@ "desktop": "assets/screenshot-desktop.jpg", "mobile": "assets/screenshot-mobile.jpg" }, - "version": "0.4.1" + "version": "0.5.0" } diff --git a/src/js/app.js b/src/js/app.js index d83cd20..6396fde 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,3 +1,4 @@ +import cssVars from 'css-vars-ponyfill' import $ from 'jquery' import slick from 'slick-carousel' import tippy from 'tippy.js' @@ -5,6 +6,8 @@ import AOS from 'aos' import GhostContentAPI from '@tryghost/content-api' import Fuse from 'fuse.js' +cssVars({}) + $(document).ready(() => { const isRTL = $('html').attr('lang') === 'ar' || $('html').attr('lang') === 'he' diff --git a/src/package-lock.json b/src/package-lock.json index bd4d226..1bb3154 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -3531,6 +3531,11 @@ "integrity": "sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=", "dev": true }, + "css-vars-ponyfill": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/css-vars-ponyfill/-/css-vars-ponyfill-2.1.2.tgz", + "integrity": "sha512-Jfff/j2AGwr+WJaIbxVroTa9sFXy9b0xe5zjWEVQ9aoeCpd0e6iOo4D+d3OoLDTWcHCf2UBTswis/hN6fKEKiA==" + }, "css-what": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz", @@ -5447,8 +5452,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -5469,14 +5473,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5491,20 +5493,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -5621,8 +5620,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -5634,7 +5632,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5649,7 +5646,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5657,14 +5653,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5683,7 +5677,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -5764,8 +5757,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -5777,7 +5769,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -5863,8 +5854,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -5900,7 +5890,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5920,7 +5909,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5964,14 +5952,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, diff --git a/src/package.json b/src/package.json index e9ac6f5..cd1266f 100644 --- a/src/package.json +++ b/src/package.json @@ -29,6 +29,7 @@ "dependencies": { "@tryghost/content-api": "^1.0.0", "aos": "^2.3.4", + "css-vars-ponyfill": "^2.1.2", "fitvids": "^2.0.0", "fuse.js": "^3.4.2", "jquery": "^3.3.1", diff --git a/src/sass/app.scss b/src/sass/app.scss index a15c24b..af7d46e 100644 --- a/src/sass/app.scss +++ b/src/sass/app.scss @@ -2,6 +2,7 @@ @import "common/reset"; @import "common/mixins"; +@import "common/colors"; @import "common/variables"; @import "common/helpers"; @import "common/global"; diff --git a/src/sass/common/_colors.scss b/src/sass/common/_colors.scss new file mode 100644 index 0000000..0dd5113 --- /dev/null +++ b/src/sass/common/_colors.scss @@ -0,0 +1,29 @@ +:root { + --background-color: #fff; + --primary-foreground-color: #4a4a4a; + --secondary-foreground-color: #000; + --primary-subtle-color: #04aeee; + --secondary-subtle-color: #f4f8fd; + --titles-color: #333; + --link-color: #293951; + --primary-border-color: #9b9b9b; + --secondary-border-color: aliceblue; + --article-shadow: 0 4px 60px 0 rgba(0,0,0,.2); + --foter-background-color: #293951; +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color: #111; + --primary-foreground-color: #ccc; + --secondary-foreground-color: #fff; + --primary-subtle-color: #04aeee; + --secondary-subtle-color: #141920; + --titles-color: #b4b4b4; + --link-color: #2c5de6; + --primary-border-color: #9b9b9b; + --secondary-border-color: #0f0f0f; + --article-shadow: 0 4px 0px 10px rgba(0,0,0,.2); + --foter-background-color: #080808; + } +} diff --git a/src/sass/common/_global.scss b/src/sass/common/_global.scss index f2c3e1d..998102f 100644 --- a/src/sass/common/_global.scss +++ b/src/sass/common/_global.scss @@ -5,12 +5,12 @@ body { flex-direction: column; width: 100%; min-height: 100vh; - color: $body; + color: var(--primary-foreground-color); font-size: 1rem; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-display: swap; overflow-x: hidden; - background-color: white; + background-color: var(--background-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -56,17 +56,17 @@ fieldset { } ::-webkit-input-placeholder { - color: $gray; + color: var(--primary-border-color); } ::-moz-placeholder { - color: $gray; + color: var(--primary-border-color); } :-ms-input-placeholder { - color: $gray; + color: var(--primary-border-color); } :-moz-placeholder { - color: $gray; + color: var(--primary-border-color); } diff --git a/src/sass/common/_helpers.scss b/src/sass/common/_helpers.scss index 9d1b612..3c10caa 100644 --- a/src/sass/common/_helpers.scss +++ b/src/sass/common/_helpers.scss @@ -1,8 +1,4 @@ -@charset "UTF-8"; - -/** - * Helpers - */ +/** Helpers */ .hide { display: none; diff --git a/src/sass/common/_variables.scss b/src/sass/common/_variables.scss index 54d3e6f..cc4ae60 100644 --- a/src/sass/common/_variables.scss +++ b/src/sass/common/_variables.scss @@ -1,4 +1,5 @@ /** Colors */ + $white: #fff; $black: #000; $main-color: #04aeee; @@ -8,7 +9,8 @@ $light-blue: #f4f8fd; $dark-blue: #293951; $gray: #9b9b9b; -/** Box Model */ +/** Config */ + $mobile-space: 20px; $mobile-bar-height: 50px; $desktop-bar-height: 64px; diff --git a/src/sass/components/404/_subtitle.scss b/src/sass/components/404/_subtitle.scss index df351de..2f6820b 100644 --- a/src/sass/components/404/_subtitle.scss +++ b/src/sass/components/404/_subtitle.scss @@ -1,5 +1,5 @@ .m-404-subtitle { - color: $body; + color: var(--primary-foreground-color); letter-spacing: 0.4px; line-height: 1; font-size: 1.250rem; diff --git a/src/sass/components/404/_title.scss b/src/sass/components/404/_title.scss index 3c0805d..f1e63ae 100644 --- a/src/sass/components/404/_title.scss +++ b/src/sass/components/404/_title.scss @@ -1,5 +1,5 @@ .m-404-title { - color: $body; + color: var(--primary-foreground-color); letter-spacing: 3px; line-height: 1; font-size: 9.000rem; diff --git a/src/sass/components/_footer.scss b/src/sass/components/_footer.scss index 3142156..f471fff 100644 --- a/src/sass/components/_footer.scss +++ b/src/sass/components/_footer.scss @@ -1,6 +1,6 @@ .m-footer { flex-shrink: 0; - background-color: $dark-blue; + background-color: var(--foter-background-color); } .m-footer__content { diff --git a/src/sass/components/articles/_article-card.scss b/src/sass/components/articles/_article-card.scss index b551453..5a2fca0 100644 --- a/src/sass/components/articles/_article-card.scss +++ b/src/sass/components/articles/_article-card.scss @@ -4,9 +4,9 @@ position: relative; margin-bottom: 20px; height: 400px; - background-color: $white; + background-color: var(--background-color); border-radius: 10px; - border: 1px solid aliceblue; + border: 1px solid var(--secondary-border-color); z-index: 1; @include transition(all .25s cubic-bezier(.02,.01,.47,1)); @@ -14,7 +14,7 @@ @include transform(translateY(-5px)); &:before { - @include bs(0 4px 60px 0 rgba(0,0,0,.2)); + @include bs(var(--article-shadow)); } .m-article-card__author { @@ -43,7 +43,7 @@ } .m-article-card__info { - background-color: $light-blue; + background-color: var(--secondary-subtle-color); } .m-article-card__title { @@ -94,7 +94,7 @@ position: relative; height: 200px; border-radius: 10px 10px 0 0; - background-color: $light-blue; + background-color: var(--secondary-subtle-color); background-repeat: no-repeat; background-position: center; background-size: cover; @@ -191,7 +191,7 @@ height: 200px; overflow: hidden; border-radius: 0 0 10px 10px; - background-color: $white; + background-color: var(--background-color); @include respond-to('medium') { padding-top: 53px; @@ -214,7 +214,7 @@ position: absolute; top: $mobile-space; left: $mobile-space; - color: $dark-blue; + color: var(--link-color); letter-spacing: 0.2px; font-size: 0.875rem; font-weight: 600; @@ -240,7 +240,7 @@ } .m-article-card__title { - color: $titles; + color: var(--titles-color); letter-spacing: 0.4px; line-height: 1.3; font-size: 1.250rem; @@ -257,7 +257,7 @@ position: relative; overflow: hidden; height: 100%; - color: $titles; + color: var(--titles-color); letter-spacing: 0.3px; line-height: 1.5; font-size: 1rem; @@ -276,7 +276,7 @@ .m-article-card__author-stats { display: flex; align-items: center; - color: $titles; + color: var(--titles-color); letter-spacing: 0.2px; font-size: 0.875rem; @@ -308,7 +308,7 @@ margin-left: 22px; a { - color: $body; + color: var(--primary-foreground-color); font-size: 0.938rem; span { diff --git a/src/sass/components/author/_author.scss b/src/sass/components/author/_author.scss index 3493e45..b9220d6 100644 --- a/src/sass/components/author/_author.scss +++ b/src/sass/components/author/_author.scss @@ -1,8 +1,10 @@ .m-author { padding: 40px $mobile-space; - border-color: $light-blue; + border-color: var(--secondary-subtle-color); border-top-width: 2px; border-bottom-width: 2px; + border-left-width: 0; + border-right-width: 0; border-style: solid; margin: 0 auto; @@ -17,7 +19,7 @@ } &.no-subscribers { - background-color: $light-blue; + background-color: var(--secondary-subtle-color); } } diff --git a/src/sass/components/comments/_load-comments.scss b/src/sass/components/comments/_load-comments.scss index 62a576d..aecf945 100644 --- a/src/sass/components/comments/_load-comments.scss +++ b/src/sass/components/comments/_load-comments.scss @@ -15,7 +15,7 @@ top: 50%; height: 1px; z-index: 1; - background-color: $light-blue; + background-color: var(--secondary-subtle-color); } .m-load-comments__iframe { diff --git a/src/sass/components/header/_header.scss b/src/sass/components/header/_header.scss index a71d5af..7b01a89 100644 --- a/src/sass/components/header/_header.scss +++ b/src/sass/components/header/_header.scss @@ -12,7 +12,7 @@ &.fixed { position: fixed; opacity: 0; - background-color: $white; + background-color: var(--background-color); @include transform(translateY(-100%)); @include bs(0 4px 8px rgba(0, 0, 0, 0.05)); @include transition(transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)); @@ -28,7 +28,7 @@ } &.submenu-is-active { - background-color: $white; + background-color: var(--background-color); .m-header__shadow { display: none; @@ -36,6 +36,6 @@ } &.with-picture { - background-color: $white; + background-color: var(--background-color); } } diff --git a/src/sass/components/header/_nav.scss b/src/sass/components/header/_nav.scss index 0eb711f..bb99bed 100644 --- a/src/sass/components/header/_nav.scss +++ b/src/sass/components/header/_nav.scss @@ -23,7 +23,7 @@ } li { - color: $titles; + color: var(--titles-color); letter-spacing: 0.3px; font-size: 1.125rem; margin-bottom: 15px; diff --git a/src/sass/components/header/_recent-article.scss b/src/sass/components/header/_recent-article.scss index d381edd..bc1f754 100644 --- a/src/sass/components/header/_recent-article.scss +++ b/src/sass/components/header/_recent-article.scss @@ -42,7 +42,7 @@ } .m-recent-article__title { - color: $titles; + color: var(--titles-color); letter-spacing: 0.2px; line-height: 1.438rem; font-size: 1rem; @@ -56,7 +56,7 @@ } .m-recent-article__date { - color: $titles; + color: var(--titles-color); letter-spacing: 0.15px; font-size: 0.813rem; } diff --git a/src/sass/components/header/_submenu.scss b/src/sass/components/header/_submenu.scss index 666efc6..cdd9e8b 100644 --- a/src/sass/components/header/_submenu.scss +++ b/src/sass/components/header/_submenu.scss @@ -8,8 +8,8 @@ left: 0; width: 100%; padding: 30px 0 20px 0; - background-color: $white; - border-top: 1px solid aliceblue; + background-color: var(--background-color); + border-top: 1px solid var(--secondary-border-color); z-index: 5; @include bs(0 60px 60px rgba(0,0,0,0.25)); } diff --git a/src/sass/components/header/_tags.scss b/src/sass/components/header/_tags.scss index eb09784..99f23d2 100644 --- a/src/sass/components/header/_tags.scss +++ b/src/sass/components/header/_tags.scss @@ -15,7 +15,7 @@ } a { - color: $dark-blue; + color: var(--link-color); } } } diff --git a/src/sass/components/hero/_hero.scss b/src/sass/components/hero/_hero.scss index 48993fb..30f7d60 100644 --- a/src/sass/components/hero/_hero.scss +++ b/src/sass/components/hero/_hero.scss @@ -4,7 +4,7 @@ min-height: 365px; overflow: hidden; padding: 100px 0 75px; - background-color: $light-blue; + background-color: var(--secondary-subtle-color); @extend .content-centered; @include respond-to('medium') { @@ -14,7 +14,7 @@ &.with-picture { color: $white; - background-color: darken($body, 25%); + background-color: $black; @include respond-to('medium') { min-height: 450px; diff --git a/src/sass/components/search/_result.scss b/src/sass/components/search/_result.scss index 103a7f7..8a00c6e 100644 --- a/src/sass/components/search/_result.scss +++ b/src/sass/components/search/_result.scss @@ -18,7 +18,7 @@ } .m-result__title { - color: $body; + color: var(--primary-foreground-color); letter-spacing: 0.3px; line-height: 1.4; font-size: 1rem; diff --git a/src/sass/components/subscribe/_subscribe-section.scss b/src/sass/components/subscribe/_subscribe-section.scss index 0c2d4ee..36755c0 100644 --- a/src/sass/components/subscribe/_subscribe-section.scss +++ b/src/sass/components/subscribe/_subscribe-section.scss @@ -1,6 +1,6 @@ .m-subscribe-section { padding: 50px 0; - background-color: $light-blue; + background-color: var(--secondary-subtle-color); @include respond-to('medium') { padding: 80px 0; diff --git a/src/sass/components/ui/_button.scss b/src/sass/components/ui/_button.scss index 5989f64..3d607fc 100644 --- a/src/sass/components/ui/_button.scss +++ b/src/sass/components/ui/_button.scss @@ -16,7 +16,7 @@ @include transition(all .25s cubic-bezier(.02,.01,.47,1)); &.outlined { - border: 1px solid $body; + border: 1px solid var(--primary-foreground-color); } &.filled, diff --git a/src/sass/components/ui/_icon-button.scss b/src/sass/components/ui/_icon-button.scss index f691236..46d4836 100644 --- a/src/sass/components/ui/_icon-button.scss +++ b/src/sass/components/ui/_icon-button.scss @@ -1,5 +1,5 @@ .m-icon-button { - color: $titles; + color: var(--titles-color); font-size: 1.125rem; border: 0; outline: 0; @@ -11,11 +11,11 @@ &.outlined { border-radius: 50%; - border: 1px solid $body; + border: 1px solid var(--primary-foreground-color); } &.filled { - background-color: $white; + background-color: var(--background-color); border-radius: 50%; @include bs(0 2px 4px rgba(108, 108, 108, 0.2)); @include transition(all .25s cubic-bezier(.02,.01,.47,1)); @@ -52,7 +52,7 @@ height: 32px; font-size: 0.625rem; z-index: 2; - background-color: $white; + background-color: var(--background-color); @include respond-to('medium') { top: 30px; @@ -113,7 +113,7 @@ &.in-featured-articles { position: absolute; - color: $white; + color: var(--background-color); font-size: 0.875rem; width: 29px; height: 22px; @@ -175,7 +175,7 @@ } &.in-share { - color: $titles; + color: var(--titles-color); font-size: 0.750rem; text-decoration: none; width: 31px; diff --git a/src/sass/components/ui/_section-title.scss b/src/sass/components/ui/_section-title.scss index 061610a..c565769 100644 --- a/src/sass/components/ui/_section-title.scss +++ b/src/sass/components/ui/_section-title.scss @@ -1,5 +1,5 @@ .m-section-title { - color: $body; + color: var(--primary-foreground-color); text-align: center; letter-spacing: 0.3px; line-height: 1.3; diff --git a/src/sass/layouts/_post-content.scss b/src/sass/layouts/_post-content.scss index f310902..2f2f1ac 100644 --- a/src/sass/layouts/_post-content.scss +++ b/src/sass/layouts/_post-content.scss @@ -411,7 +411,7 @@ } button:not(.m-icon-button) { - border: 1px solid $body !important; + border: 1px solid var(--primary-foreground-color) !important; @extend .m-button; } @@ -432,7 +432,7 @@ .kg-bookmark-container { display: flex; - color: $body; + color: var(--primary-foreground-color); text-decoration: none !important; min-height: 148px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px,