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;
|
||||
|
45
assets/js/theme.js
Normal file
45
assets/js/theme.js
Normal 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)
|
||||
}
|
@ -47,6 +47,7 @@
|
||||
{{/unless}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
{{> "theme-switcher"}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
14
partials/icons/theme-icon.hbs
Normal file
14
partials/icons/theme-icon.hbs
Normal 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 |
3
partials/theme-switcher.hbs
Normal file
3
partials/theme-switcher.hbs
Normal file
@ -0,0 +1,3 @@
|
||||
<button class="theme-toggle gh-icon-button" aria-label="Change theme">
|
||||
{{> "icons/theme-icon"}}
|
||||
</button>
|
Loading…
Reference in New Issue
Block a user