add dark mode toggle functionality

This commit is contained in:
ray 2020-02-02 19:52:12 +00:00
parent 8de3c5508c
commit 7709817602
6 changed files with 83 additions and 10 deletions

View File

@ -1,5 +1,4 @@
@mixin base_dark { @mixin base_dark {
color: $fg-color-dark; color: $fg-color-dark;
background-color: $bg-color-dark; background-color: $bg-color-dark;
@ -32,18 +31,18 @@
border-left: 2px solid $alt-bg-color-dark; border-left: 2px solid $alt-bg-color-dark;
} }
table td, table th { table td,
table th {
border: 2px solid $alt-fg-color-dark; border: 2px solid $alt-fg-color-dark;
} }
} }
body.colorscheme-dark { body.colorscheme-dark {
@include base_dark() @include base_dark();
} }
body.colorscheme-auto { body.colorscheme-auto {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@include base_dark() @include base_dark();
} }
} }

View File

@ -1,9 +1,32 @@
.footer { .footer {
width: 100%; width: 100%;
text-align: center; text-align: center;
line-height: 2.0rem; font-size: 0.8em;
margin-bottom:1.0rem; line-height: 2rem;
margin-bottom: 1rem;
a { a {
color: $link-color; color: $link-color;
} }
} }
.cs-mode-container {
margin: 0 0 0 0.3em;
}
.cs-mode-button {
padding: 0 0.3em;
border: none;
background: transparent;
font-family: $heading-font-family;
cursor: pointer;
&:hover {
color: $link-color;
text-decoration: underline;
}
}
.cs-mode-state {
text-transform: capitalize;
font-weight: $heading-font-weight--bold;
}

View File

@ -4,14 +4,23 @@
color: $link-color-dark; color: $link-color-dark;
} }
} }
.cs-mode-button {
color: $fg-color-dark;
&:hover {
color: $link-color-dark;
text-decoration: underline;
}
}
} }
body.colorscheme-dark { body.colorscheme-dark {
@include footer_dark() @include footer_dark();
} }
body.colorscheme-auto { body.colorscheme-auto {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@include footer_dark() @include footer_dark();
} }
} }

View File

@ -51,7 +51,7 @@
{{ if .Site.IsServer }} {{ if .Site.IsServer }}
{{ $cssOpts := (dict "targetPath" "css/coder-dark.css" "enableSourceMap" true ) }} {{ $cssOpts := (dict "targetPath" "css/coder-dark.css" "enableSourceMap" true ) }}
{{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts }} {{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen"> <link id="stylesheet-dark" rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
{{ else }} {{ else }}
{{ $cssOpts := (dict "targetPath" "css/coder-dark.css" ) }} {{ $cssOpts := (dict "targetPath" "css/coder-dark.css" ) }}
{{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts | minify | fingerprint }} {{ $styles := resources.Get "scss/coder-dark.scss" | resources.ExecuteAsTemplate "style.coder-dark.css" . | toCSS $cssOpts | minify | fingerprint }}
@ -108,6 +108,7 @@
{{ template "_internal/google_analytics.html" . }} {{ template "_internal/google_analytics.html" . }}
<script src="js/script.js"></script>
</body> </body>
</html> </html>

View File

@ -15,6 +15,9 @@
{{ if not .Site.Params.hideCopyright }} · {{ end }} {{ if not .Site.Params.hideCopyright }} · {{ end }}
{{ i18n "powered_by" }} <a href="https://gohugo.io/">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/">Coder</a>. {{ i18n "powered_by" }} <a href="https://gohugo.io/">Hugo</a> & <a href="https://github.com/luizdepra/hugo-coder/">Coder</a>.
{{ end }} {{ end }}
<span id="cs-mode-container" class="cs-mode-container">
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
</span>
{{ if .Site.Params.commit }} {{ if .Site.Params.commit }}
{{ if or (not .Site.Params.hideCredits) (not .Site.Params.hideCopyright) }} · {{ end }} {{ if or (not .Site.Params.hideCredits) (not .Site.Params.hideCopyright) }} · {{ end }}
[<a href="{{ .Site.Params.commit }}{{ getenv "GIT_COMMIT_SHA" }}">{{ getenv "GIT_COMMIT_SHA_SHORT" }}</a>] [<a href="{{ .Site.Params.commit }}{{ getenv "GIT_COMMIT_SHA" }}">{{ getenv "GIT_COMMIT_SHA_SHORT" }}</a>]

38
static/js/script.js Normal file
View File

@ -0,0 +1,38 @@
// TODO move this file into assets and use hugo pipes and babel
(function(){
var modeBtnText = document.getElementById('cs-mode-button-state');
var states = ["colorscheme-dark", "colorscheme-light", "colorscheme-auto"];
var labels = ["On", "Off", "Auto"];
var activeState = -1;
function toggleColorscheme() {
for(var i = states.length - 1; i >= 0; i--) {
if (document.body.classList.contains(states[i])) {
document.body.classList.remove(states[activeState]);
activeState = activeState < states.length - 1 ? activeState + 1 : 0;
document.body.classList.add(states[activeState]);
modeBtnText.innerText = labels[activeState];
break;
}
}
}
// TODO use cookie to record state of dark mode
for(var i = states.length - 1; i >= 0; i--) {
if (document.body.classList.contains(states[i])) {
activeState = i;
modeBtnText.innerText = labels[activeState];
}
}
if (activeState > -1) {
document.getElementById('cs-mode-button').addEventListener('click', function() {
toggleColorscheme();
})
} else {
document.getElementById('cs-mode-container').style.display = "none";
}
})();