Add theme switcher
This commit is contained in:
parent
a9b861a6aa
commit
328473e596
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
|
@ -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;
|
||||
|
|
|
@ -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)
|
||||
}
|
|
@ -47,6 +47,7 @@
|
|||
{{/unless}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{> "theme-switcher"}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -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 |
|
@ -0,0 +1,3 @@
|
|||
<button class="theme-toggle gh-icon-button" aria-label="Change theme">
|
||||
{{> "icons/theme-icon"}}
|
||||
</button>
|
Loading…
Reference in New Issue