From f61422997a118bf53e736ba2d5c3b081e2a5e66e Mon Sep 17 00:00:00 2001 From: Luke Bemish Date: Mon, 9 Oct 2023 21:23:45 +0100 Subject: [PATCH] Add Dark Mode to Website (#8) Added dark mode and toggle ability to the website. The mode will be initially chosen from the browser's preference. --- hugo.toml | 6 - themes/mainroad/assets/css/style.css | 259 ++++-------- themes/mainroad/layouts/_default/baseof.html | 4 +- themes/mainroad/layouts/partials/colors.css | 397 +++++++++++++++++++ themes/mainroad/layouts/partials/footer.html | 19 +- themes/mainroad/static/js/modetoggle.js | 38 ++ 6 files changed, 523 insertions(+), 200 deletions(-) create mode 100644 themes/mainroad/layouts/partials/colors.css create mode 100644 themes/mainroad/static/js/modetoggle.js diff --git a/hugo.toml b/hugo.toml index cd7f101..b6e4d0d 100644 --- a/hugo.toml +++ b/hugo.toml @@ -28,9 +28,3 @@ theme = "mainroad" [Params.widgets] recent_num = 5 # Set the number of articles in the "Recent articles" widget tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default) - -[Params.style] - vars.highlightColor = "#d7742f" - vars.backgroundColor = "#d5e0df" - vars.boxColor = "#bdc7c7" - vars.borderColor = "#aab0b3" diff --git a/themes/mainroad/assets/css/style.css b/themes/mainroad/assets/css/style.css index 721dddf..56b11b9 100644 --- a/themes/mainroad/assets/css/style.css +++ b/themes/mainroad/assets/css/style.css @@ -1,8 +1,3 @@ -{{- $highlightColor := .Site.Params.style.vars.highlightColor | default (.Site.Params.highlightColor | default "#e22d30") -}} -{{- $backgroundColor := .Site.Params.style.vars.backgroundColor | default "#fff" -}} -{{- $boxColor := .Site.Params.style.vars.boxColor | default "#f5f5f5" }} -{{- $borderColor := .Site.Params.style.vars.borderColor | default "#ebebeb" }} - @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Wix+Madefor+Display:wght@600&display=swap'); {{- $fontSans := `"Noto Sans", "Open Sans", Helvetica, Arial, sans-serif` -}} @@ -64,7 +59,6 @@ body { font-size: .875rem; line-height: 1.6; word-wrap: break-word; - background: {{ $boxColor }}; -webkit-font-smoothing: antialiased; } @@ -81,13 +75,11 @@ body { width: 80%; max-width: 1920px; min-width: 1380px; - box-shadow: 0 0 10px rgba(50, 50, 50, .17); } .wrapper { padding: 25px; flex-grow: 1; - background: {{ $backgroundColor }}; } .flex { @@ -148,14 +140,7 @@ textarea { .btn { padding: 5px 10px; font-weight: 700; - color: {{ $backgroundColor }}; white-space: pre-line; - background: #2a2a2a; -} - -.btn:hover { - color: {{ $backgroundColor }}; - background: {{ $highlightColor }}; } /* Animation */ @@ -175,7 +160,6 @@ h6 { margin: 0 0 1.25rem; font-weight: 600; line-height: 1.3; - color: #000; font-family: {{ $fontHero }}; } @@ -210,18 +194,11 @@ h6 { } a { - color: #000; text-decoration: none; } -a:hover { - color: {{ $highlightColor }}; -} - hr { margin: 0 0 20px; - border: 0; - border-top: 1px solid #dadada; } p { @@ -252,10 +229,6 @@ small { font-size: .75rem; } -mark { - background-color: #fd5; -} - figure { margin: 0 0 20px; margin: 0 0 1.25rem; @@ -264,7 +237,6 @@ figure { figcaption { margin-top: 4px; margin-top: .25rem; - color: #666; } figcaption h4 { @@ -280,15 +252,8 @@ samp { font-size: inherit; } -pre, -code { - background-color: {{ $boxColor }}; - border: 1px solid {{ $borderColor }}; -} - code { padding: 0 5px; - color: #c33; } pre { @@ -298,7 +263,6 @@ pre { margin-bottom: 20px; margin-bottom: 1.25rem; overflow: auto; - color: #000; } pre code { @@ -306,13 +270,10 @@ pre code { color: inherit; white-space: inherit; background: inherit; - border: 0; } kbd { padding: 2px 3px; - color: {{ $backgroundColor }}; - background-color: #2a2a2a; } blockquote { @@ -321,7 +282,6 @@ blockquote { margin: 0 0 20px; margin: 0 0 1.25rem; line-height: 1.6; - border-left: 5px solid {{ $highlightColor }}; } blockquote p:last-child { @@ -350,7 +310,6 @@ sub { abbr[title] { text-decoration: none; cursor: help; - border-bottom: 1px dotted #000; } q { @@ -390,19 +349,13 @@ select { .warning { padding: 20px 10px; text-align: center; - border: 1px solid #ddd; } .warning__icon { margin-bottom: 20px; - fill: #ddd; } /* Header */ -.header { - background: #323232; -} - .logo { padding: 25px; text-align: center; @@ -473,7 +426,6 @@ select { font-size: 2rem; font-weight: 700; line-height: 1; - color: #000; } .logo__tagline { @@ -483,15 +435,12 @@ select { font-weight: 700; line-height: 1; text-transform: uppercase; - color: #e7d9d3; font-family: {{ $fontTitle }}; } .divider { height: 5px; margin: 0; - background: {{ $highlightColor }}; - border: 0; } /* Main menu */ @@ -504,9 +453,6 @@ select { width: 100%; padding: 0; font: inherit; - color: {{ $backgroundColor }}; - background: #2a2a2a; - border: 0; outline: 0; } @@ -526,10 +472,6 @@ select { user-select: none; } -:focus > .menu__btn-title { - box-shadow: inset 0 0 1px 3px {{ $highlightColor }}; -} - button:not(:-moz-focusring):focus > .menu__btn-title { box-shadow: none; } @@ -539,25 +481,8 @@ button:not(:-moz-focusring):focus > .menu__btn-title { outline: 0; } -.js .menu__btn--active { - color: {{ $highlightColor }}; -} - .menu__list { list-style: none; - background: #2a2a2a; -} - -.menu__item:hover { - background: {{ $highlightColor }}; -} - -.menu__item:first-child { - border: 0; -} - -.menu__item--active { - background: {{ $highlightColor }}; } .menu__link { @@ -565,14 +490,9 @@ button:not(:-moz-focusring):focus > .menu__btn-title { padding: 10px 15px; padding: .625rem .9375rem; font-weight: 700; - color: {{ $backgroundColor }}; text-transform: uppercase; } -.menu__link:hover { - color: {{ $backgroundColor }}; -} - .js .menu__list { position: absolute; z-index: 1; @@ -586,8 +506,6 @@ button:not(:-moz-focusring):focus > .menu__btn-title { .js .menu__list--active { visibility: visible; - border-top: 1px solid rgba(255, 255, 255, .1); - border-bottom: 1px solid rgba(255, 255, 255, .1); -webkit-transform: scaleY(1); transform: scaleY(1); } @@ -597,10 +515,6 @@ button:not(:-moz-focusring):focus > .menu__btn-title { } @media screen and (min-width: 767px) { - .menu { - border-bottom: 5px solid {{ $highlightColor }}; - } - .menu__btn { display: none; } @@ -613,14 +527,9 @@ button:not(:-moz-focusring):focus > .menu__btn-title { -webkit-flex-wrap: wrap; flex-wrap: wrap; visibility: visible; - border: 0; -webkit-transform: none; transform: none; } - - .menu__item { - border-left: 1px solid rgba(255, 255, 255, .1); - } } /* Posts/Pages */ @@ -646,15 +555,6 @@ button:not(:-moz-focusring):focus > .menu__btn-title { vertical-align: baseline; } -.meta, -.meta a { - color: #666; -} - -.meta a:hover { - color: {{ $highlightColor }}; -} - .meta__item { display: inline; margin-left: 15px; @@ -667,7 +567,6 @@ button:not(:-moz-focusring):focus > .menu__btn-title { .meta__icon { margin-right: 5px; vertical-align: middle; - fill: {{ $borderColor }}; } figure.meta__icon { @@ -686,8 +585,6 @@ figure.meta__icon { padding: 5px 0; margin-top: 10px; margin-top: .625rem; - border-top: 1px dotted {{ $borderColor }}; - border-bottom: 1px dotted {{ $borderColor }}; } .post__lead { @@ -713,13 +610,11 @@ figure.meta__icon { .warning a, .authorbox__description a { font-weight: 700; - color: {{ $highlightColor }}; } .content a:hover, .warning a:hover, .authorbox__description a:hover { - color: {{ $highlightColor }}; text-decoration: underline; } @@ -785,7 +680,6 @@ figure.meta__icon { font-size: 12px; font-size: .75rem; line-height: 1; - color: {{ $backgroundColor }}; } .tags__list { @@ -797,11 +691,6 @@ figure.meta__icon { margin: 0 6px 6px 0; margin: 0 .375rem .375rem 0; text-transform: uppercase; - background: #2a2a2a; -} - -.tags__item:hover { - background: {{ $highlightColor }}; } .tags__link, @@ -816,17 +705,12 @@ figure.meta__icon { height: 32px; padding: 8px; margin-right: 6px; - background: {{ $highlightColor }}; - fill: {{ $backgroundColor }}; } /* Table of Contents */ .toc { margin-bottom: 20px; font-weight: 700; - color: #7a8288; - background: {{ $backgroundColor }}; - border-color: {{ $borderColor }}; border-style: solid; border-top-width: 1px; border-right-width: 1px; @@ -836,14 +720,12 @@ figure.meta__icon { .toc__title { padding: 5px 10px; - color: {{ $backgroundColor }}; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; - background: #2a2a2a; } .toc__menu ul { @@ -878,8 +760,6 @@ figure.meta__icon { .toc__menu a { display: block; padding: 5px 10px; - color: {{ $highlightColor }}; - border-bottom: 1px solid {{ $borderColor }}; } .toc__menu a:hover { @@ -891,15 +771,12 @@ figure.meta__icon { padding: 25px 0; margin-bottom: 25px; line-height: 1.5; - border-top: 1px solid {{ $borderColor }}; - border-bottom: 1px solid {{ $borderColor }}; } .authorbox__avatar { float: left; padding: 3px; margin: 0 25px 0 0; - border: 1px solid {{ $borderColor }}; } .authorbox__header { @@ -928,7 +805,6 @@ figure.meta__icon { padding-bottom: 1.25rem; margin-bottom: 20px; margin-bottom: 1.25rem; - border-bottom: 1px solid {{ $borderColor }}; } .list__header { @@ -969,14 +845,6 @@ figure.meta__icon { display: inline-block; padding: 10px 15px; font-weight: 700; - color: #000; - background: {{ $boxColor }}; -} - -.pagination__item:hover, -.pagination__item--current { - color: {{ $backgroundColor }}; - background: {{ $highlightColor }}; } /* Pager (prev/next links) navigation */ @@ -986,7 +854,6 @@ figure.meta__icon { padding-top: 25px; padding-bottom: 25px; margin-bottom: 25px; - border-bottom: 1px solid {{ $borderColor }}; } .pager__subtitle { @@ -1041,15 +908,11 @@ table { margin-bottom: 1.25rem; border-spacing: 0; border-collapse: collapse; - border-top: 1px solid {{ $borderColor }}; - border-left: 1px solid {{ $borderColor }}; } td, th { padding: 5px 10px; - border-right: 1px solid {{ $borderColor }}; - border-bottom: 1px solid {{ $borderColor }}; } th { @@ -1061,8 +924,6 @@ input { padding: 5px; font-size: 12px; vertical-align: middle; - background: {{ $boxColor }}; - border: 1px solid {{ $borderColor }}; transition: all .25s ease-in-out; } @@ -1073,42 +934,24 @@ input[type=url] { width: 60%; } -input[type=text]:hover, -input[type=email]:hover, -input[type=tel]:hover, -input[type=url]:hover, -textarea:hover { - border: 1px solid #aaa; -} - input[type=submit], input[type=reset] { display: inline-block; min-width: 150px; padding: 10px 15px; font-weight: 700; - color: {{ $backgroundColor }}; text-transform: uppercase; cursor: pointer; - background: #2a2a2a; - border: 0; transition: all .1s linear; -webkit-appearance: none; } -input[type=submit]:hover, -input[type=reset]:hover { - background: {{ $highlightColor }}; -} - textarea { width: 96%; padding: 5px; overflow: auto; line-height: 1.5; resize: vertical; - background: {{ $boxColor }}; - border: 1px solid rgba(0, 0, 0, .1); } /* Widgets */ @@ -1127,13 +970,11 @@ textarea { font-size: 16px; font-size: 1rem; text-transform: uppercase; - border-bottom: 3px solid {{ $highlightColor }}; } .widget__item { display: block; padding: 5px 0; - border-bottom: 1px dotted {{ $borderColor }}; } .widget__item:first-child { @@ -1144,9 +985,7 @@ textarea { display: inline-block; padding: 0 6px; font-size: .75rem; - color: #666; text-align: center; - background: {{ $borderColor }}; border-radius: 2em; } @@ -1155,7 +994,6 @@ textarea { display: block; padding: 5%; margin: 0 auto; - background: {{ $boxColor }}; } .widget-search__form .widget-search__submit { @@ -1170,8 +1008,6 @@ textarea { margin: 0 auto; font-size: 11px; cursor: pointer; - background: {{ $backgroundColor }}; - border: 1px solid {{ $borderColor }}; border-radius: 0; outline-offset: -2px; transition: none; @@ -1186,7 +1022,6 @@ textarea { /* Social widget */ .widget-social__item { padding: 0; - border: 0; } .widget-social__link { @@ -1198,7 +1033,6 @@ textarea { .widget-social__link-icon { margin: 0 5px 0 0; vertical-align: middle; - fill: {{ $backgroundColor }}; } /* Tags Widget */ @@ -1214,17 +1048,11 @@ textarea { display: block; } -.widget-languages__link:hover .widget-languages__link-btn { - color: {{ $backgroundColor }}; - background: {{ $highlightColor }}; -} - .widget-languages__link-btn { display: inline-block; } .fileinfo { - background-color: {{ $boxColor }}; text-align: center; margin: 0 0 20px; margin: 0 0 1.25rem; @@ -1260,12 +1088,6 @@ textarea { justify-content: center; flex: 1 1 0px; text-decoration: none; - background-color: #e68c37; - color: black; -} - -.fileinfo .fileinfo__body a:hover { - background-color: #e5b04c; } .fileinfo__placeholder { @@ -1273,7 +1095,6 @@ textarea { } .news { - border-top: 3px solid {{ $borderColor}}; margin-top: 1rem; } @@ -1284,12 +1105,8 @@ textarea { /* Footer */ .footer { - padding: 10px 25px; font-size: 12px; font-size: .75rem; - color: {{ $borderColor}}; - background: #373737; - border-top: 3px solid {{ $borderColor}}; } .footer__container { @@ -1297,6 +1114,11 @@ textarea { flex-flow: row wrap; -webkit-justify-content: space-between; justify-content: space-between; + align-items: center; +} + +.footer__inner { + padding: 10px 25px; } .footer__links { @@ -1304,14 +1126,31 @@ textarea { order: 1; } -.footer a { - color: {{ $backgroundColor }}; -} - .footer a:hover { text-decoration: underline; } +.footer_modetoggle { + font-size: 20px; + margin: 0 10px; + padding: 0; + display: flex; + align-items: center; + text-align: center; + justify-content: center; +} + +.footer_modetoggle-button { + border-radius: 50%; + border-collapse: separate; + height: 28px; + width: 28px; + display: flex; + align-items: center; + text-align: center; + justify-content: center; +} + @media screen and (max-width: 1420px) { .container--outer { width: 100%; @@ -1347,6 +1186,10 @@ textarea { .footer__copyright { text-align: center; } + + .footer_modetoggle { + display: none; + } } @media screen and (max-width: 767px) { @@ -1446,3 +1289,45 @@ textarea { font-size: .6875rem; } } + +[data-theme="light"] { + --color-highlight: #d7742f; + --color-background: #d5e0df; + --color-download: #e68c37; + --color-download-highlight: #e5b04c; + --color-box: #bdc7c7; + --color-outer: #bdc7c7; + --color-border: #aab0b3; + --color-btn: #2a2a2a; + --color-text: #000; + --color-code: #c33; + --color-footer-text: #aab0b3; + --color-footer-link-text: #bdc7c7; + --color-ends-background: #323232; + --color-meta-caption: #666666; + .footer_modetoggle-dark { + display: none; + } + } + +[data-theme="dark"] { + --color-highlight: #d7742f; + --color-background: #323232; + --color-download: #d7742f; + --color-download-highlight: #e68c37; + --color-box: #222222; + --color-outer: #111111; + --color-border: #5a5a5a; + --color-btn: #e7d9d3; + --color-text: #e7d9d3; + --color-code: #e57; + --color-footer-text: #aab0b3; + --color-footer-link-text: #bdc7c7; + --color-ends-background: #222222; + --color-meta-caption: #aab0b3; + .footer_modetoggle-light { + display: none; + } +} + +{{ partial "colors.css" . }} diff --git a/themes/mainroad/layouts/_default/baseof.html b/themes/mainroad/layouts/_default/baseof.html index ec4b96d..3a6009b 100644 --- a/themes/mainroad/layouts/_default/baseof.html +++ b/themes/mainroad/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + @@ -22,6 +22,7 @@ + {{- end }} @@ -43,6 +44,7 @@ {{ template "_internal/google_analytics_async.html" . }} {{- end }} {{- end }} +
diff --git a/themes/mainroad/layouts/partials/colors.css b/themes/mainroad/layouts/partials/colors.css new file mode 100644 index 0000000..000a14e --- /dev/null +++ b/themes/mainroad/layouts/partials/colors.css @@ -0,0 +1,397 @@ +body { + background: var(--color-outer); + color: var(--color-text); +} + +.container--outer { + box-shadow: 0 0 10px rgba(50, 50, 50, .17); +} + +.wrapper { + background: var(--color-background); +} + +/* Button */ +.btn { + color: var(--color-background); + background: var(--color-btn); +} + +.btn:hover { + color: var(--color-background); + background: var(--color-highlight); +} + +/* Typography */ +h1, +h2, +h3, +h4, +h5, +h6 { + color: var(--color-text); +} + +a { + color: var(--color-text); +} + +a:hover { + color: var(--color-highlight); +} + +hr { + border: 0; + border-top: 1px solid #dadada; +} + +mark { + background-color: #fd5; +} + + +figcaption { + color: var(--color-meta-caption); +} + +pre, +code { + background-color: var(--color-box); + border: 1px solid var(--color-border); +} + +code { + color: var(--color-code); +} + +pre { + color: var(--color-text); +} + +pre code { + border: 0; +} + +kbd { + color: var(--color-background); + background-color: var(--color-btn); +} + +blockquote { + border-left: 5px solid var(--color-highlight); +} + +abbr[title] { + border-bottom: 1px dotted var(--color-text); +} + +.warning { + border: 1px solid var(--color-border); +} + +.warning__icon { + fill: var(--color-border); +} + +/* Header */ +.header { + background: var(--color-ends-background); +} + +.logo__title { + color: var(--color-text); +} + +.logo__tagline { + color: #e7d9d3; +} + +.divider { + background: var(--color-highlight); + border: 0; +} + +/* Main menu */ +.menu__btn { + color: var(--color-background); + background: var(--color-btn); + border: 0; +} + +:focus > .menu__btn-title { + box-shadow: inset 0 0 1px 3px var(--color-highlight); +} + +.js .menu__btn--active { + color: var(--color-highlight); +} + +.menu__list { + background: var(--color-btn); +} + +.menu__item:first-child { + border: 0; +} + +.menu__item:hover { + background: var(--color-highlight); +} + +.menu__item--active { + background: var(--color-highlight); +} + +.menu__link { + color: var(--color-background); +} + +.menu__link:hover { + color: var(--color-background); +} + +.js .menu__list--active { + border-top: 1px solid rgba(255, 255, 255, .1); + border-bottom: 1px solid rgba(255, 255, 255, .1); +} + +@media screen and (min-width: 767px) { + .menu { + border-bottom: 5px solid var(--color-highlight); + } + + .menu__item { + border-left: 1px solid rgba(255, 255, 255, .1); + } + + .menu__list, + .js .menu__list { + border: 0; + } +} + +/* Posts/Pages */ +.meta, +.meta a { + color: var(--color-meta-caption); +} + +.meta a:hover { + color: var(--color-highlight); +} + + +.meta__icon { + fill: var(--color-meta-caption); +} + + +.post__meta { + border-top: 1px dotted var(--color-border); + border-bottom: 1px dotted var(--color-border); +} + +.content a, +.warning a, +.authorbox__description a { + color: var(--color-highlight); +} + +.content a:hover, +.warning a:hover, +.authorbox__description a:hover { + color: var(--color-highlight); +} + +/* Post tags */ +.tags { + color: var(--color-background); +} + +.tags__item { + background: var(--color-btn); +} + +.tags__item:hover { + background: var(--color-highlight); +} + +.tags__badge { + background: var(--color-highlight); + fill: var(--color-background); +} + +/* Table of Contents */ +.toc { + color: #7a8288; + background: var(--color-background); + border-color: var(--color-border); +} + +.toc__title { + color: var(--color-background); + background: var(--color-btn); +} + +.toc__menu a { + color: var(--color-highlight); + border-bottom: 1px solid var(--color-border); +} + +/* Author Box */ +.authorbox { + border-top: 1px solid var(--color-border); + border-bottom: 1px solid var(--color-border); +} + +.authorbox__avatar { + border: 1px solid var(--color-border); +} + +/* List content */ +.list__item { + border-bottom: 1px solid var(--color-border); +} + +/* Pagination */ +.pagination__item { + color: var(--color-text); + background: var(--color-box); +} + +.pagination__item:hover, +.pagination__item--current { + color: var(--color-background); + background: var(--color-highlight); +} + +/* Pager (prev/next links) navigation */ +.pager { + border-bottom: 1px solid var(--color-border); +} + +/* Table */ +table { + border-top: 1px solid var(--color-border); + border-left: 1px solid var(--color-border); +} + +td, +th { + border-right: 1px solid var(--color-border); + border-bottom: 1px solid var(--color-border); +} + +/* Forms */ +input { + background: var(--color-box); + border: 1px solid var(--color-border); + color: var(--color-text); +} + +input::placeholder { + color: var(--color-text); +} + +input[type=text]:hover, +input[type=email]:hover, +input[type=tel]:hover, +input[type=url]:hover, +textarea:hover { + border: 1px solid #aaa; +} + +input[type=submit], +input[type=reset] { + color: var(--color-background); + background: var(--color-btn); + border: 0; +} + +input[type=submit]:hover, +input[type=reset]:hover { + background: var(--color-highlight); +} + +textarea { + background: var(--color-box); + border: 1px solid rgba(0, 0, 0, .1); +} + +/* Widgets */ +.widget__title { + border-bottom: 3px solid var(--color-highlight); +} + +.widget__item { + border-bottom: 1px dotted var(--color-border); +} + +.widget__counter--bubble { + background: var(--color-border); +} + +/* Search widget */ +.widget-search__form { + background: var(--color-box); +} + +.widget-search__field { + background: var(--color-background); + border: 1px solid var(--color-border); +} + +/* Social widget */ +.widget-social__item { + border: 0; +} + +.widget-social__link-icon { + fill: var(--color-background); +} + +/* Languages Widget */ +.widget-languages__link:hover .widget-languages__link-btn { + color: var(--color-background); + background: var(--color-highlight); +} + +.fileinfo { + background-color: var(--color-box); +} + +.fileinfo .fileinfo__body a { + background-color: var(--color-download); + color: var(--color-text); +} + +.fileinfo .fileinfo__body a:hover { + background-color: var(--color-download-highlight); + color: var(--color-text); +} + +.news { + border-top: 3px solid var(--color-border); +} + +/* Footer */ +.footer { + color: var(--color-footer-text); + background: var(--color-ends-background); + border-top: 3px solid var(--color-border); +} + +.footer a { + color: var(--color-footer-link-text); +} + +.footer_modetoggle { + color: var(--color-footer-text); + caret-color: transparent; +} + +.footer_modetoggle:hover { + border-radius: 50%; + color: var(--color-text); + background-color: var(--color-border); +} diff --git a/themes/mainroad/layouts/partials/footer.html b/themes/mainroad/layouts/partials/footer.html index 649d7e1..3ab4651 100644 --- a/themes/mainroad/layouts/partials/footer.html +++ b/themes/mainroad/layouts/partials/footer.html @@ -1,10 +1,17 @@ \ No newline at end of file + diff --git a/themes/mainroad/static/js/modetoggle.js b/themes/mainroad/static/js/modetoggle.js new file mode 100644 index 0000000..f2778a6 --- /dev/null +++ b/themes/mainroad/static/js/modetoggle.js @@ -0,0 +1,38 @@ +'use strict'; + +(function setupToggleMode(document, window, undefined) { + const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); + const mainHtml = document.querySelector("html"); + + function getTheme() { + let theme = localStorage.getItem("theme"); + if (theme == "dark" || theme == "light") { + return theme; + } else if (systemSettingDark.matches) { + return "dark"; + } + return "light"; + } + + function toggleMode() { + let theme = getTheme(); + if (theme == "dark") { + theme = "light"; + } else { + theme = "dark"; + } + localStorage.setItem("theme", theme); + + mainHtml.setAttribute("data-theme", theme); + } + + + const initialTheme = getTheme(); + localStorage.setItem("theme", initialTheme); + mainHtml.setAttribute("data-theme", initialTheme); + + document.addEventListener('DOMContentLoaded', function() { + const toggleModeButton = document.querySelector(".footer_modetoggle-button"); + toggleModeButton.addEventListener('click', toggleMode, false); + }); +}(document, window));