add dark mode toggle functionality
This commit is contained in:
parent
8de3c5508c
commit
7709817602
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>]
|
||||||
|
|
|
@ -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";
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
Loading…
Reference in New Issue