From 46522c61c39c32f9d813b34b43fe4231d3c3fd97 Mon Sep 17 00:00:00 2001 From: Wladimir Palant Date: Thu, 21 May 2020 08:14:35 +0200 Subject: [PATCH] fix: Respect user's preferred theme even when JavaScript isn't enabled (#169) --- assets/js/dark-mode.js | 56 +++++++------------ assets/scss/components/_dark-mode.scss | 13 ----- assets/scss/main.scss | 6 ++ assets/scss/themes/_dark.scss | 27 ++++++++- assets/scss/themes/_light.scss | 27 ++++++++- ...s_a899b346ffc3a4bc65b84e40528dea51.content | 2 +- ...scss_a899b346ffc3a4bc65b84e40528dea51.json | 2 +- layouts/_default/baseof.html | 2 +- layouts/partials/head.html | 14 ----- 9 files changed, 81 insertions(+), 68 deletions(-) diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js index 937de2f0..f8fa6c60 100644 --- a/assets/js/dark-mode.js +++ b/assets/js/dark-mode.js @@ -1,34 +1,13 @@ // Back to Previous Mode & Respect System Preferences -// `userPrefers`, `darkModeMediaQuery`, `lightModeMediaQuery` is defined in layouts/partials/head.html - -if (userPrefers === 'dark') { - changeMode('dark'); -} else if (userPrefers === 'light') { - changeMode('light'); -} else if (darkModeMediaQuery.matches) { - changeMode('dark'); -} else if (lightModeMediaQuery.matches) { - changeMode('light'); -} + +changeMode(); // Reactive Dark Mode // https://web.dev/prefers-color-scheme/#reacting-on-dark-mode-changes // https://twitter.com/ChromeDevTools/status/1197175265643745282 -darkModeMediaQuery.addListener((e) => { - const darkModeOn = e.matches; - if (darkModeOn) { - changeModeMeta('dark'); - changeMode('dark'); - } -}); - -lightModeMediaQuery.addListener((e) => { - const lightModeOn = e.matches; - if (lightModeOn) { - changeModeMeta('light'); - changeMode('light'); - } +window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => { + changeMode(); }); // Theme Switcher @@ -39,15 +18,13 @@ const themeSwitcher = document.getElementById('theme-switcher'); if (themeSwitcher) { themeSwitcher.addEventListener('click', (e) => { e.preventDefault(); - if (document.documentElement.dataset.theme == "dark") { + if (getCurrentTheme() == "dark") { changeModeMeta('light'); - changeMode('light'); - storePrefers('light'); } else { changeModeMeta('dark'); - changeMode('dark'); - storePrefers('dark'); } + changeMode(); + storePrefers(); }); } @@ -57,17 +34,24 @@ if (themeSwitcher) { window.addEventListener('storage', function (event) { if (event.newValue === 'dark') { changeModeMeta('dark'); - changeMode('dark'); } else { changeModeMeta('light'); - changeMode('light'); } + changeMode(); }); // Functions -function changeMode(theme) { - const isDark = theme === 'dark'; +function getCurrentTheme() { + return JSON.parse(window.getComputedStyle(document.documentElement, null).getPropertyValue("--theme-name")); +} + +function changeMode() { + const isDark = getCurrentTheme() === 'dark'; + + // Change theme color meta + const themeColor = isDark ? '{{ .Site.Params.themeColorDark }}': '{{ .Site.Params.themeColor }}'; + document.querySelector('meta[name="theme-color"]').setAttribute('content', themeColor); // Change Chroma Code Highlight Theme const oldChromaTheme = isDark ? 'chroma' : 'chroma-dark'; @@ -98,6 +82,6 @@ function changeMode(theme) { {{ end }} } -function storePrefers(theme) { - window.localStorage.setItem('theme', theme); +function storePrefers() { + window.localStorage.setItem('theme', getCurrentTheme()); } diff --git a/assets/scss/components/_dark-mode.scss b/assets/scss/components/_dark-mode.scss index e7adc864..b488c0ad 100644 --- a/assets/scss/components/_dark-mode.scss +++ b/assets/scss/components/_dark-mode.scss @@ -7,19 +7,6 @@ color: var(--color-primary); } - .theme-icon-dark { - display: none; - } - - [data-theme="dark"] & { - .theme-icon-light { - display: none; - } - .theme-icon-dark { - display: inline-block; - } - } - .icon { margin-right: 0 !important; } diff --git a/assets/scss/main.scss b/assets/scss/main.scss index f5df08d2..75eccaab 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -156,6 +156,12 @@ {{ end }} {{ end }} +{{ if and .Site.Params.enableDarkMode (eq .Site.Params.defaultTheme "dark") }} + $defaultTheme: dark; +{{ else }} + $defaultTheme: light; +{{ end }} + @import "themes/light"; // Dark Mode diff --git a/assets/scss/themes/_dark.scss b/assets/scss/themes/_dark.scss index 2f795f81..df5e61ba 100644 --- a/assets/scss/themes/_dark.scss +++ b/assets/scss/themes/_dark.scss @@ -1,7 +1,8 @@ // https://codyhouse.co/ds/globals/colors // https://github.com/dracula/dracula-theme/ -[data-theme="dark"] { +@mixin dark-theme { + --theme-name: "dark"; @include defineColorHSL(--color-primary, $primaryColorDarkH, $primaryColorDarkS, $primaryColorDarkL); @include defineColorHSL(--color-bg, 231, 14%, 10%); // 0% @include defineColorHSL(--color-contrast-lower, 230, 8%, 15%); // 8% @@ -9,4 +10,28 @@ @include defineColorHSL(--color-contrast-medium, 80, 1%, 50%); // 60% @include defineColorHSL(--color-contrast-high, 69, 4%, 68%); // 85% @include defineColorHSL(--color-contrast-higher, 60, 10%, 80%); // 100% + .theme-icon-light { + display: none; + } + .theme-icon-dark { + display: inline-block; + } +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme]) + { + @include dark-theme; + } +} + +@if $defaultTheme == dark { + :root { + @include dark-theme; + } +} +@else { + :root[data-theme="dark"] { + @include dark-theme; + } } diff --git a/assets/scss/themes/_light.scss b/assets/scss/themes/_light.scss index 5edacc66..c1f4a704 100644 --- a/assets/scss/themes/_light.scss +++ b/assets/scss/themes/_light.scss @@ -1,6 +1,7 @@ // https://codyhouse.co/ds/globals/colors -:root { +@mixin light-theme { + --theme-name: "light"; @include defineColorHSL(--color-primary, $primaryColorLightH, $primaryColorLightS, $primaryColorLightL); @include defineColorHSL(--color-bg, 0, 0%, 100%); @include defineColorHSL(--color-contrast-lower, 0, 0%, 95%); @@ -8,4 +9,28 @@ @include defineColorHSL(--color-contrast-medium, 240, 1%, 48%); @include defineColorHSL(--color-contrast-high, 240, 4%, 20%); @include defineColorHSL(--color-contrast-higher, 240, 8%, 12%); + .theme-icon-light { + display: inline-block; + } + .theme-icon-dark { + display: none; + } +} + +@media (prefers-color-scheme: light) { + :root:not([data-theme]) + { + @include light-theme; + } +} + +@if $defaultTheme == light { + :root { + @include light-theme; + } +} +@else { + :root[data-theme="light"] { + @include light-theme; + } } diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.content b/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.content index 49d6d668..6f242982 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.content +++ b/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.content @@ -1,4 +1,4 @@ -html,body{margin:0;width:100%;height:100%;font-size:20px;text-size-adjust:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none}body{-moz-tab-size:4;tab-size:4;color:var(--color-contrast-high);background-color:var(--color-bg);overflow-wrap:break-word;word-wrap:break-word;line-height:1.618;transition:all .5s}.container{min-height:100%;min-width:100%;position:relative}.main{padding:2em 1em 15em;display:block}.main{padding-top:7em}.main-inner{margin:0 auto;display:block}.icon{width:1em;height:1em;fill:currentColor;display:inline-block}svg{vertical-align:middle}h1,h2,h3,h4,h5,h6{margin:1.618em 0 1em;color:var(--color-contrast-higher)}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration:none !important;color:var(--color-contrast-higher)}h1{font-size:2em}h2{font-size:1.8em}h3{font-size:1.6em}h4{font-size:1.4em}h5{font-size:1.2em}h6{font-size:1em}a{color:var(--color-contrast-high);text-decoration:none;transition:all .5s}a:hover{color:var(--color-primary)}::selection{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3)}::-webkit-scrollbar{width:0.4rem;height:0.4rem}::-webkit-scrollbar-track{background-color:var(--color-bg)}::-webkit-scrollbar-thumb{background-color:var(--color-contrast-low)}::-webkit-scrollbar-thumb:hover{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5)}::-webkit-scrollbar-thumb:active{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.75)}::-webkit-scrollbar-corner{background-color:var(--color-bg)}.list-title,.term-title,.list-year,.list-month,.post-title,.post-subtitle,.related-title,.post-nav,thead,dt{font-family:"Comfortaa",sans-serif}.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{font-family:"Comfortaa",sans-serif}.contents-title{font-family:"Comfortaa",sans-serif}code,pre,sup,.post-meta,.updated-badge,.post-gitinfo,.minimal-footer,.minimal-footer-about,.busuanzi-site-uv-and-pv,.copy-button{font-family:"Source Code Pro",monospace}body{font-family:"IBM Plex Serif",serif}[data-indent="true"] .contents-title{text-align:center}[data-indent="true"] .post-body p{text-indent:2em;margin:0}[data-indent="true"] .post-body .caption{text-indent:0;margin:0 0 1em}[data-indent="true"] .post-body blockquote{margin:1em 0;padding:0;border:none}[data-indent="true"] .post-body img,[data-indent="true"] .post-body video{margin:1em auto}[data-indent="true"] .post-body table{margin:1em 0}[data-indent="true"] .post-body pre,[data-indent="true"] .post-body .highlight{margin:1rem 0}[data-indent="true"] .post-body h1,[data-indent="true"] .post-body h2,[data-indent="true"] .post-body h3,[data-indent="true"] .post-body h4,[data-indent="true"] .post-body h5,[data-indent="true"] .post-body h6{text-align:center}[data-indent="true"] .post-body .anchor-link{position:relative;transform:none;display:block;float:none}[data-indent="true"] .post-body ol,[data-indent="true"] .post-body ul{margin:0;padding-left:4em}[data-indent="true"] .post-body ol p,[data-indent="true"] .post-body ul p{text-indent:0}[data-indent="true"] .post-body li ol,[data-indent="true"] .post-body li ul{padding-left:2em}[data-indent="true"] .post-body dl{text-indent:2em}[data-indent="true"] .post-body dl dd{text-indent:0;margin-left:4em}[data-indent="true"] .post-body dl p{text-indent:0}:root{--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}[data-theme="dark"]{--color-primary:hsl(201, 65%, 62%);--color-primary-h:201;--color-primary-s:65%;--color-primary-l:62%;--color-bg:hsl(231, 14%, 10%);--color-bg-h:231;--color-bg-s:14%;--color-bg-l:10%;--color-contrast-lower:hsl(230, 8%, 15%);--color-contrast-lower-h:230;--color-contrast-lower-s:8%;--color-contrast-lower-l:15%;--color-contrast-low:hsl(240, 2%, 25%);--color-contrast-low-h:240;--color-contrast-low-s:2%;--color-contrast-low-l:25%;--color-contrast-medium:hsl(80, 1%, 50%);--color-contrast-medium-h:80;--color-contrast-medium-s:1%;--color-contrast-medium-l:50%;--color-contrast-high:hsl(69, 4%, 68%);--color-contrast-high-h:69;--color-contrast-high-s:4%;--color-contrast-high-l:68%;--color-contrast-higher:hsl(60, 10%, 80%);--color-contrast-higher-h:60;--color-contrast-higher-s:10%;--color-contrast-higher-l:80%}#theme-switcher{color:var(--color-contrast-medium);transition:color .5s;z-index:4}#theme-switcher:hover{color:var(--color-primary)}#theme-switcher .theme-icon-dark{display:none}[data-theme="dark"] #theme-switcher .theme-icon-light{display:none}[data-theme="dark"] #theme-switcher .theme-icon-dark{display:inline-block}#theme-switcher .icon{margin-right:0 !important}[data-theme="dark"] img{filter:brightness(50%)}.chroma-dark{color:#f8f8f2;background-color:#282a36}.chroma-dark .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma-dark .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma-dark .hl{display:block;width:100%;background-color:#3c3c3c}.chroma-dark .lnt{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma-dark .ln{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma-dark .k{color:#ff79c6}.chroma-dark .kc{color:#ff79c6}.chroma-dark .kd{color:#8be9fd;font-style:italic}.chroma-dark .kn{color:#ff79c6}.chroma-dark .kp{color:#ff79c6}.chroma-dark .kr{color:#ff79c6}.chroma-dark .kt{color:#8be9fd}.chroma-dark .na{color:#50fa7b}.chroma-dark .nb{color:#8be9fd;font-style:italic}.chroma-dark .nc{color:#50fa7b}.chroma-dark .nf{color:#50fa7b}.chroma-dark .nl{color:#8be9fd;font-style:italic}.chroma-dark .nt{color:#ff79c6}.chroma-dark .nv{color:#8be9fd;font-style:italic}.chroma-dark .vc{color:#8be9fd;font-style:italic}.chroma-dark .vg{color:#8be9fd;font-style:italic}.chroma-dark .vi{color:#8be9fd;font-style:italic}.chroma-dark .s{color:#f1fa8c}.chroma-dark .sa{color:#f1fa8c}.chroma-dark .sb{color:#f1fa8c}.chroma-dark .sc{color:#f1fa8c}.chroma-dark .dl{color:#f1fa8c}.chroma-dark .sd{color:#f1fa8c}.chroma-dark .s2{color:#f1fa8c}.chroma-dark .se{color:#f1fa8c}.chroma-dark .sh{color:#f1fa8c}.chroma-dark .si{color:#f1fa8c}.chroma-dark .sx{color:#f1fa8c}.chroma-dark .sr{color:#f1fa8c}.chroma-dark .s1{color:#f1fa8c}.chroma-dark .ss{color:#f1fa8c}.chroma-dark .m{color:#bd93f9}.chroma-dark .mb{color:#bd93f9}.chroma-dark .mf{color:#bd93f9}.chroma-dark .mh{color:#bd93f9}.chroma-dark .mi{color:#bd93f9}.chroma-dark .il{color:#bd93f9}.chroma-dark .mo{color:#bd93f9}.chroma-dark .o{color:#ff79c6}.chroma-dark .ow{color:#ff79c6}.chroma-dark .c{color:#6272a4}.chroma-dark .ch{color:#6272a4}.chroma-dark .cm{color:#6272a4}.chroma-dark .c1{color:#6272a4}.chroma-dark .cs{color:#6272a4}.chroma-dark .cp{color:#ff79c6}.chroma-dark .cpf{color:#ff79c6}.chroma-dark .gd{color:#ffcccc}.chroma-dark .ge{text-decoration:underline}.chroma-dark .gh{font-weight:bold}.chroma-dark .gi{color:#ccffcc}.chroma-dark .go{color:#44475a}.chroma-dark .gu{font-weight:bold}.chroma-dark .gl{text-decoration:underline}.header{z-index:3}.header{position:fixed;width:100%}.header-wrapper{padding:1em 0;-webkit-backdrop-filter:saturate(180%) blur(1em);backdrop-filter:saturate(180%) blur(1em);background:linear-gradient(90deg, rgba(247,149,51,0.101961) 0, rgba(243,112,85,0.101961) 15%, rgba(239,78,123,0.101961) 30%, rgba(161,102,171,0.101961) 44%, rgba(80,115,184,0.101961) 58%, rgba(16,152,173,0.101961) 72%, rgba(7,179,155,0.101961) 86%, rgba(109,186,130,0.101961) 100%)}.header-inner{display:flex;justify-content:space-between;align-items:center;margin:0 auto;max-width:32em}.header-inner.list{max-width:30em}.site-brand{margin-right:1em}.brand{font-size:1em;color:var(--color-contrast-high);text-decoration:none}.brand:hover{color:var(--color-contrast-high)}:root{--header-height: calc( +html,body{margin:0;width:100%;height:100%;font-size:20px;text-size-adjust:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none}body{-moz-tab-size:4;tab-size:4;color:var(--color-contrast-high);background-color:var(--color-bg);overflow-wrap:break-word;word-wrap:break-word;line-height:1.618;transition:all .5s}.container{min-height:100%;min-width:100%;position:relative}.main{padding:2em 1em 15em;display:block}.main{padding-top:7em}.main-inner{margin:0 auto;display:block}.icon{width:1em;height:1em;fill:currentColor;display:inline-block}svg{vertical-align:middle}h1,h2,h3,h4,h5,h6{margin:1.618em 0 1em;color:var(--color-contrast-higher)}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration:none !important;color:var(--color-contrast-higher)}h1{font-size:2em}h2{font-size:1.8em}h3{font-size:1.6em}h4{font-size:1.4em}h5{font-size:1.2em}h6{font-size:1em}a{color:var(--color-contrast-high);text-decoration:none;transition:all .5s}a:hover{color:var(--color-primary)}::selection{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.3)}::-webkit-scrollbar{width:0.4rem;height:0.4rem}::-webkit-scrollbar-track{background-color:var(--color-bg)}::-webkit-scrollbar-thumb{background-color:var(--color-contrast-low)}::-webkit-scrollbar-thumb:hover{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5)}::-webkit-scrollbar-thumb:active{background-color:hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.75)}::-webkit-scrollbar-corner{background-color:var(--color-bg)}.list-title,.term-title,.list-year,.list-month,.post-title,.post-subtitle,.related-title,.post-nav,thead,dt{font-family:"Comfortaa",sans-serif}.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{font-family:"Comfortaa",sans-serif}.contents-title{font-family:"Comfortaa",sans-serif}code,pre,sup,.post-meta,.updated-badge,.post-gitinfo,.minimal-footer,.minimal-footer-about,.busuanzi-site-uv-and-pv,.copy-button{font-family:"Source Code Pro",monospace}body{font-family:"IBM Plex Serif",serif}[data-indent="true"] .contents-title{text-align:center}[data-indent="true"] .post-body p{text-indent:2em;margin:0}[data-indent="true"] .post-body .caption{text-indent:0;margin:0 0 1em}[data-indent="true"] .post-body blockquote{margin:1em 0;padding:0;border:none}[data-indent="true"] .post-body img,[data-indent="true"] .post-body video{margin:1em auto}[data-indent="true"] .post-body table{margin:1em 0}[data-indent="true"] .post-body pre,[data-indent="true"] .post-body .highlight{margin:1rem 0}[data-indent="true"] .post-body h1,[data-indent="true"] .post-body h2,[data-indent="true"] .post-body h3,[data-indent="true"] .post-body h4,[data-indent="true"] .post-body h5,[data-indent="true"] .post-body h6{text-align:center}[data-indent="true"] .post-body .anchor-link{position:relative;transform:none;display:block;float:none}[data-indent="true"] .post-body ol,[data-indent="true"] .post-body ul{margin:0;padding-left:4em}[data-indent="true"] .post-body ol p,[data-indent="true"] .post-body ul p{text-indent:0}[data-indent="true"] .post-body li ol,[data-indent="true"] .post-body li ul{padding-left:2em}[data-indent="true"] .post-body dl{text-indent:2em}[data-indent="true"] .post-body dl dd{text-indent:0;margin-left:4em}[data-indent="true"] .post-body dl p{text-indent:0}@media (prefers-color-scheme: light){:root:not([data-theme]){--theme-name: "light";--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}:root:not([data-theme]) .theme-icon-light{display:inline-block}:root:not([data-theme]) .theme-icon-dark{display:none}}:root{--theme-name: "light";--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}:root .theme-icon-light{display:inline-block}:root .theme-icon-dark{display:none}@media (prefers-color-scheme: dark){:root:not([data-theme]){--theme-name: "dark";--color-primary:hsl(201, 65%, 62%);--color-primary-h:201;--color-primary-s:65%;--color-primary-l:62%;--color-bg:hsl(231, 14%, 10%);--color-bg-h:231;--color-bg-s:14%;--color-bg-l:10%;--color-contrast-lower:hsl(230, 8%, 15%);--color-contrast-lower-h:230;--color-contrast-lower-s:8%;--color-contrast-lower-l:15%;--color-contrast-low:hsl(240, 2%, 25%);--color-contrast-low-h:240;--color-contrast-low-s:2%;--color-contrast-low-l:25%;--color-contrast-medium:hsl(80, 1%, 50%);--color-contrast-medium-h:80;--color-contrast-medium-s:1%;--color-contrast-medium-l:50%;--color-contrast-high:hsl(69, 4%, 68%);--color-contrast-high-h:69;--color-contrast-high-s:4%;--color-contrast-high-l:68%;--color-contrast-higher:hsl(60, 10%, 80%);--color-contrast-higher-h:60;--color-contrast-higher-s:10%;--color-contrast-higher-l:80%}:root:not([data-theme]) .theme-icon-light{display:none}:root:not([data-theme]) .theme-icon-dark{display:inline-block}}:root[data-theme="dark"]{--theme-name: "dark";--color-primary:hsl(201, 65%, 62%);--color-primary-h:201;--color-primary-s:65%;--color-primary-l:62%;--color-bg:hsl(231, 14%, 10%);--color-bg-h:231;--color-bg-s:14%;--color-bg-l:10%;--color-contrast-lower:hsl(230, 8%, 15%);--color-contrast-lower-h:230;--color-contrast-lower-s:8%;--color-contrast-lower-l:15%;--color-contrast-low:hsl(240, 2%, 25%);--color-contrast-low-h:240;--color-contrast-low-s:2%;--color-contrast-low-l:25%;--color-contrast-medium:hsl(80, 1%, 50%);--color-contrast-medium-h:80;--color-contrast-medium-s:1%;--color-contrast-medium-l:50%;--color-contrast-high:hsl(69, 4%, 68%);--color-contrast-high-h:69;--color-contrast-high-s:4%;--color-contrast-high-l:68%;--color-contrast-higher:hsl(60, 10%, 80%);--color-contrast-higher-h:60;--color-contrast-higher-s:10%;--color-contrast-higher-l:80%}:root[data-theme="dark"] .theme-icon-light{display:none}:root[data-theme="dark"] .theme-icon-dark{display:inline-block}#theme-switcher{color:var(--color-contrast-medium);transition:color .5s;z-index:4}#theme-switcher:hover{color:var(--color-primary)}#theme-switcher .icon{margin-right:0 !important}[data-theme="dark"] img{filter:brightness(50%)}.chroma-dark{color:#f8f8f2;background-color:#282a36}.chroma-dark .lntd{vertical-align:top;padding:0;margin:0;border:0}.chroma-dark .lntable{border-spacing:0;padding:0;margin:0;border:0;width:auto;overflow:auto;display:block}.chroma-dark .hl{display:block;width:100%;background-color:#3c3c3c}.chroma-dark .lnt{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma-dark .ln{margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f}.chroma-dark .k{color:#ff79c6}.chroma-dark .kc{color:#ff79c6}.chroma-dark .kd{color:#8be9fd;font-style:italic}.chroma-dark .kn{color:#ff79c6}.chroma-dark .kp{color:#ff79c6}.chroma-dark .kr{color:#ff79c6}.chroma-dark .kt{color:#8be9fd}.chroma-dark .na{color:#50fa7b}.chroma-dark .nb{color:#8be9fd;font-style:italic}.chroma-dark .nc{color:#50fa7b}.chroma-dark .nf{color:#50fa7b}.chroma-dark .nl{color:#8be9fd;font-style:italic}.chroma-dark .nt{color:#ff79c6}.chroma-dark .nv{color:#8be9fd;font-style:italic}.chroma-dark .vc{color:#8be9fd;font-style:italic}.chroma-dark .vg{color:#8be9fd;font-style:italic}.chroma-dark .vi{color:#8be9fd;font-style:italic}.chroma-dark .s{color:#f1fa8c}.chroma-dark .sa{color:#f1fa8c}.chroma-dark .sb{color:#f1fa8c}.chroma-dark .sc{color:#f1fa8c}.chroma-dark .dl{color:#f1fa8c}.chroma-dark .sd{color:#f1fa8c}.chroma-dark .s2{color:#f1fa8c}.chroma-dark .se{color:#f1fa8c}.chroma-dark .sh{color:#f1fa8c}.chroma-dark .si{color:#f1fa8c}.chroma-dark .sx{color:#f1fa8c}.chroma-dark .sr{color:#f1fa8c}.chroma-dark .s1{color:#f1fa8c}.chroma-dark .ss{color:#f1fa8c}.chroma-dark .m{color:#bd93f9}.chroma-dark .mb{color:#bd93f9}.chroma-dark .mf{color:#bd93f9}.chroma-dark .mh{color:#bd93f9}.chroma-dark .mi{color:#bd93f9}.chroma-dark .il{color:#bd93f9}.chroma-dark .mo{color:#bd93f9}.chroma-dark .o{color:#ff79c6}.chroma-dark .ow{color:#ff79c6}.chroma-dark .c{color:#6272a4}.chroma-dark .ch{color:#6272a4}.chroma-dark .cm{color:#6272a4}.chroma-dark .c1{color:#6272a4}.chroma-dark .cs{color:#6272a4}.chroma-dark .cp{color:#ff79c6}.chroma-dark .cpf{color:#ff79c6}.chroma-dark .gd{color:#ffcccc}.chroma-dark .ge{text-decoration:underline}.chroma-dark .gh{font-weight:bold}.chroma-dark .gi{color:#ccffcc}.chroma-dark .go{color:#44475a}.chroma-dark .gu{font-weight:bold}.chroma-dark .gl{text-decoration:underline}.header{z-index:3}.header{position:fixed;width:100%}.header-wrapper{padding:1em 0;-webkit-backdrop-filter:saturate(180%) blur(1em);backdrop-filter:saturate(180%) blur(1em);background:linear-gradient(90deg, rgba(247,149,51,0.101961) 0, rgba(243,112,85,0.101961) 15%, rgba(239,78,123,0.101961) 30%, rgba(161,102,171,0.101961) 44%, rgba(80,115,184,0.101961) 58%, rgba(16,152,173,0.101961) 72%, rgba(7,179,155,0.101961) 86%, rgba(109,186,130,0.101961) 100%)}.header-inner{display:flex;justify-content:space-between;align-items:center;margin:0 auto;max-width:32em}.header-inner.list{max-width:30em}.site-brand{margin-right:1em}.brand{font-size:1em;color:var(--color-contrast-high);text-decoration:none}.brand:hover{color:var(--color-contrast-high)}:root{--header-height: calc( max( /* menu */ 24px, diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.json index 5d0f3d90..ab73fb00 100644 --- a/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.json +++ b/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.json @@ -1 +1 @@ -{"Target":"css/meme.min.927661e0387b38c89693e1e88b77f76f95dbe58e5082bf462891be5a6d1898db.css","MediaType":"text/css","Data":{"Integrity":"sha256-knZh4Dh7OMiWk+Hoi3f3b5Xb5Y5Qgr9GKJG+Wm0YmNs="}} \ No newline at end of file +{"Target":"css/meme.min.d6acf9d8381fd38d6ee816dfceb3a5a0d7826360238525a707812d09d647082b.css","MediaType":"text/css","Data":{"Integrity":"sha256-1qz52Dgf041u6BbfzrOloNeCY2AjhSWnB4EtCdZHCCs="}} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index e89f9c96..9284df2a 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{ partial "head.html" . }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index b6532150..3a8942e4 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -15,27 +15,13 @@ {{- if .Site.Params.enableDarkMode }} {{- end }}