diff options
Diffstat (limited to '')
| -rw-r--r-- | _sass/colors/dark-typography.scss | 161 | ||||
| -rw-r--r-- | _sass/colors/light-typography.scss | 110 | ||||
| -rw-r--r-- | _sass/jekyll-theme-chirpy.scss | 24 |
3 files changed, 295 insertions, 0 deletions
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss new file mode 100644 index 0000000..515f084 --- /dev/null +++ b/_sass/colors/dark-typography.scss @@ -0,0 +1,161 @@ +/* + * The main dark mode styles + */ + +@mixin dark-scheme { + /* Framework color */ + --main-bg: rgb(27, 27, 30); + --mask-bg: rgb(68, 69, 70); + --main-border-color: rgb(44, 45, 45); + + /* Common color */ + --text-color: rgb(175, 176, 177); + --text-muted-color: rgb(107, 116, 124); + --heading-color: #cccccc; + --blockquote-border-color: rgb(66, 66, 66); + --blockquote-text-color: rgb(117, 117, 117); + --link-color: rgb(138, 180, 248); + --link-underline-color: rgb(82, 108, 150); + --button-bg: rgb(39, 40, 43); + --btn-border-color: rgb(63, 65, 68); + --btn-backtotop-color: var(--text-color); + --btn-backtotop-border-color: var(--btn-border-color); + --btn-box-shadow: var(--main-bg); + --card-header-bg: rgb(51, 50, 50); + --label-color: rgb(108, 117, 125); + --checkbox-color: rgb(118, 120, 121); + --checkbox-checked-color: var(--link-color); + --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); + --shimmer-bg: linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(58, 55, 55, 0.4) 50%, + rgba(255, 255, 255, 0) 100% + ); + + --mark-text: Green; + + /* Sidebar */ + --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); + --sidebar-muted-color: #6d6c6b; + --sidebar-active-color: rgb(255, 255, 255, 0.8); + --nav-cursor-color: rgb(183, 182, 182); + --sidebar-btn-bg: rgb(117, 116, 116, 0.2); + + /* Topbar */ + --topbar-text-color: var(--text-color); + --topbar-wrapper-bg: rgb(39, 40, 43); + --search-wrapper-bg: rgb(34, 34, 39); + --search-wrapper-border-color: rgb(34, 34, 39); + --search-icon-color: rgb(100, 102, 105); + --input-focus-border-color: rgb(112, 114, 115); + + /* Home page */ + --post-list-text-color: rgb(175, 176, 177); + --btn-patinator-text-color: var(--text-color); + --btn-paginator-hover-color: rgb(64, 65, 66); + --btn-paginator-border-color: var(--btn-border-color); + --btn-text-color: var(--text-color); + --pin-bg: rgb(34, 35, 37); + --pin-color: inherit; + + /* Posts */ + --toc-highlight: rgb(116, 178, 243); + --tag-bg: rgb(41, 40, 40); + --tag-hover: rgb(43, 56, 62); + --tb-odd-bg: rgba(42, 47, 53, 0.52); /* odd rows of the posts' table */ + --tb-even-bg: rgb(31, 31, 34); /* even rows of the posts' table */ + --tb-border-color: var(--tb-odd-bg); + --footnote-target-bg: rgb(63, 81, 181); + --btn-share-color: #6c757d; + --btn-share-hover-color: #bfc1ca; + --relate-post-date: var(--text-muted-color); + --card-bg: #212121; + --card-hovor-bg: #3a3a3a; + --card-border-color: rgb(53, 53, 60); + --card-box-shadow: var(--main-bg); + --kbd-wrap-color: #6a6a6a; + --kbd-text-color: #d3d3d3; + --kbd-bg-color: #242424; + --prompt-text-color: rgb(216, 212, 212, 0.75); + --prompt-tip-bg: rgba(77, 187, 95, 0.2); + --prompt-tip-icon-color: rgb(5, 223, 5, 0.68); + --prompt-info-bg: rgb(7, 59, 104, 0.8); + --prompt-info-icon-color: #0075d1; + --prompt-warning-bg: rgb(90, 69, 3, 0.95); + --prompt-warning-icon-color: rgb(255, 165, 0, 0.8); + --prompt-danger-bg: rgb(86, 28, 8, 0.8); + --prompt-danger-icon-color: #cd0202; + + /* tags */ + --tag-border: rgb(59, 79, 88); + --tag-shadow: rgb(32, 33, 33); + --search-tag-bg: var(--tag-bg); + --dash-color: rgb(63, 65, 68); + + /* categories */ + --categories-border: rgb(64, 66, 69); + --categories-hover-bg: rgb(73, 75, 76); + --categories-icon-hover-color: white; + + /* archives */ + --timeline-node-bg: rgb(150, 152, 156); + --timeline-color: rgb(63, 65, 68); + --timeline-year-dot-color: var(--timeline-color); + + .post img[data-src] { + &.lazyloaded { + -webkit-filter: brightness(95%); + filter: brightness(95%); + } + } + + .light { + display: none; + } + + hr { + border-color: var(--main-border-color); + } + + /* categories */ + .categories.card, + .list-group-item { + background-color: var(--card-bg); + } + + .categories { + .card-header { + background-color: var(--card-header-bg); + } + + .list-group-item { + border-left: none; + border-right: none; + padding-left: 2rem; + border-color: var(--categories-border); + + &:last-child { + border-bottom-color: var(--card-bg); + } + } + } + + #archives li:nth-child(odd) { + background-image: linear-gradient( + to left, + rgb(26, 26, 30), + rgb(39, 39, 45), + rgb(39, 39, 45), + rgb(39, 39, 45), + rgb(26, 26, 30) + ); + } + + color-scheme: dark; + + /* stylelint-disable-next-line selector-id-pattern */ + #disqus_thread { + color-scheme: none; + } +} /* dark-scheme */ diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss new file mode 100644 index 0000000..fd00621 --- /dev/null +++ b/_sass/colors/light-typography.scss @@ -0,0 +1,110 @@ +/* + * The syntax light mode typography colors + */ + +@mixin light-scheme { + /* Framework color */ + --main-bg: white; + --mask-bg: #c1c3c5; + --main-border-color: #f3f3f3; + + /* Common color */ + --text-color: #34343c; + --text-muted-color: gray; + --heading-color: black; + --blockquote-border-color: #eeeeee; + --blockquote-text-color: #9a9a9a; + --link-color: #2a408e; + --link-underline-color: #dee2e6; + --button-bg: #ffffff; + --btn-border-color: #e9ecef; + --btn-backtotop-color: #686868; + --btn-backtotop-border-color: #f1f1f1; + --btn-box-shadow: #eaeaea; + --checkbox-color: #c5c5c5; + --checkbox-checked-color: #07a8f7; + --img-bg: radial-gradient( + circle, + rgb(255, 255, 255) 0%, + rgb(249, 249, 249) 100% + ); + --shimmer-bg: linear-gradient( + 90deg, + rgba(250, 250, 250, 0) 0%, + rgba(232, 230, 230, 1) 50%, + rgba(250, 250, 250, 0) 100% + ); + + --mark-text: orange; + + /* Sidebar */ + --sidebar-bg: #eeeeee; + --sidebar-muted-color: #a2a19f; + --sidebar-active-color: #424242; + --nav-cursor-color: #757575; + --sidebar-btn-bg: white; + + /* Topbar */ + --topbar-text-color: rgb(78, 78, 78); + --topbar-wrapper-bg: white; + --search-wrapper-bg: rgb(245, 245, 245, 0.5); + --search-wrapper-border-color: rgb(245, 245, 245); + --search-tag-bg: #f8f9fa; + --search-icon-color: #c2c6cc; + --input-focus-border-color: var(--btn-border-color); + + /* Home page */ + --post-list-text-color: dimgray; + --btn-patinator-text-color: #555555; + --btn-paginator-hover-color: var(--sidebar-bg); + --btn-paginator-border-color: var(--sidebar-bg); + --btn-text-color: #676666; + --pin-bg: #f5f5f5; + --pin-color: #999fa4; + + /* Posts */ + --toc-highlight: #563d7c; + --btn-share-hover-color: var(--link-color); + --card-hovor-bg: #eeeeee; + --card-border-color: #ececec; + --card-box-shadow: rgba(234, 234, 234, 0.76); + --label-color: #616161; + --relate-post-date: rgba(30, 55, 70, 0.4); + --footnote-target-bg: lightcyan; + --tag-bg: rgba(0, 0, 0, 0.075); + --tag-border: #dee2e6; + --tag-shadow: var(--btn-border-color); + --tag-hover: rgb(222, 226, 230); + --tb-odd-bg: #fbfcfd; + --tb-border-color: #eaeaea; + --dash-color: silver; + --kbd-wrap-color: #bdbdbd; + --kbd-text-color: var(--text-color); + --kbd-bg-color: white; + --prompt-text-color: rgb(46, 46, 46, 0.77); + --prompt-tip-bg: rgb(123, 247, 144, 0.2); + --prompt-tip-icon-color: #03b303; + --prompt-info-bg: #e1f5fe; + --prompt-info-icon-color: #0070cb; + --prompt-warning-bg: rgb(255, 243, 205); + --prompt-warning-icon-color: #ef9c03; + --prompt-danger-bg: rgb(248, 215, 218, 0.56); + --prompt-danger-icon-color: #df3c30; + + [class^='prompt-'] { + --link-underline-color: rgb(219, 216, 216); + } + + .dark { + display: none; + } + + /* Categories */ + --categories-hover-bg: var(--btn-border-color); + --categories-icon-hover-color: darkslategray; + + /* Archive */ + --timeline-color: rgba(0, 0, 0, 0.075); + --timeline-node-bg: #c2c6cc; + --timeline-year-dot-color: #ffffff; +} /* light-scheme */ diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss new file mode 100644 index 0000000..1424a57 --- /dev/null +++ b/_sass/jekyll-theme-chirpy.scss @@ -0,0 +1,24 @@ +/*! + * The styles for Jekyll theme Chirpy + * + * Chirpy v5.6.1 (https://github.com/cotes2020/jekyll-theme-chirpy) + * © 2019 Cotes Chung + * MIT Licensed + */ + +@import + "colors/light-typography", + "colors/dark-typography", + + "addon/variables", + "variables-hook", + "addon/module", + "addon/syntax", + "addon/commons", + + "layout/home", + "layout/post", + "layout/tags", + "layout/archives", + "layout/categories", + "layout/category-tag"; |