Add theme switcher

This commit is contained in:
Simon Detheridge 2023-10-16 17:04:36 +01:00
parent a9b861a6aa
commit 328473e596
Signed by: simon
GPG Key ID: 38640971DA1E704E
9 changed files with 110 additions and 5 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -71,6 +71,26 @@ production stylesheet in assets/built/screen.css
--grid-gap: 42px;
}
:root.light-theme {
/* light theme color */
--background-color: #fff;
--baclground-secondary: #eaeaea;
--header: #fafafa;
--color-primary-text: #222;
--color-secondary-text: #999;
--border-color: #dcdcdc;
}
:root.dark-theme {
/* dark theme colors */
--background-color: #292a2d;
--background-secondary: #3b3d42;
--header: #252627;
--color-primary-text: #a9a9b3;
--color-secondary-text: #73747b;
--border-color: #4a4b50;
}
:root.has-light-text,
:is(.gh-navigation, .gh-footer).has-accent-color {
--color-lighter-gray: rgb(255 255 255 / 0.1);
@ -369,7 +389,7 @@ button.gh-form-input {
.gh-form {
font-size: 1.6rem;
}
.gh-form .gh-button {
padding-inline: 12px;
}
@ -1003,6 +1023,28 @@ Search LOGO Login Subscribe
/* 8. Header
/* ---------------------------------------------------------- */
#svglogo {
height: 3em;
width: 3em;
}
#svglogo use {
fill: var(--color-primary-text);
}
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
cursor: pointer;
}
.theme-toggler {
fill: currentColor;
}
.gh-header {
position: relative;
margin-top: 40px;

45
assets/js/theme.js Normal file
View File

@ -0,0 +1,45 @@
// Toggle theme
const isOSLight = window.matchMedia("(prefers-color-scheme: light)").matches
const localTheme = window.localStorage && window.localStorage.getItem("lightTheme")
const themeToggle = document.querySelector(".theme-toggle")
function changeFavicon() {
const src = document.documentElement.classList.contains("dark-theme") ? "/img/favicon-dark.png" : "/img/favicon.png";
const link = document.createElement('link'),
oldLink = document.getElementById('dynamic-favicon');
link.id = 'dynamic-favicon';
link.rel = 'shortcut icon';
link.href = src;
if (oldLink) {
document.head.removeChild(oldLink);
}
document.head.appendChild(link);
}
function changeTheme(useLight) {
document.documentElement.classList.remove('light-theme', 'dark-theme', 'has-light-text', 'has-dark-text')
if (useLight) {
document.documentElement.classList.add('light-theme', 'has-dark-text')
} else {
document.documentElement.classList.add('dark-theme', 'has-light-text')
}
if (window.localStorage) {
window.localStorage.setItem(
"lightTheme",
useLight)
}
changeFavicon()
}
themeToggle.addEventListener("click", () => {
changeTheme(document.documentElement.classList.contains('dark-theme'))
});
if (localTheme instanceof Boolean) {
changeTheme(localTheme)
} else {
changeTheme(isOSLight)
}

View File

@ -47,6 +47,7 @@
{{/unless}}
</div>
{{/unless}}
{{> "theme-switcher"}}
</div>
</div>

View File

@ -0,0 +1,14 @@
<svg
class="theme-toggler"
width="24"
height="24"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"
/>
</svg>

After

Width:  |  Height:  |  Size: 337 B

View File

@ -0,0 +1,3 @@
<button class="theme-toggle gh-icon-button" aria-label="Change theme">
{{> "icons/theme-icon"}}
</button>