added dark light switch
11ty build and deploy for ${{ gitea.repository }} / build-deploy (push) Successful in 21s
Details
11ty build and deploy for ${{ gitea.repository }} / build-deploy (push) Successful in 21s
Details
This commit is contained in:
parent
8e99275fcc
commit
dff1fa475b
|
|
@ -0,0 +1,167 @@
|
||||||
|
<label class="switch-input">
|
||||||
|
<span class="visually-hidden">Enable setting</span>
|
||||||
|
<input type="checkbox" role="switch" class="visually-hidden" />
|
||||||
|
<span class="switch-input__decor" data-switch-input-state="on" aria-hidden="true" style="--switch-input-font-size: 65cqw;--switch-input-decor-space: var(--switch-input-gutter) 0.25ch;line-height: 0.63;">☼</span>
|
||||||
|
<span class="switch-input__decor" data-switch-input-state="off" aria-hidden="true" style="--switch-input-font-size: 50cqw; line-height: 1.03">☾</span>
|
||||||
|
<span class="switch-input__thumb" aria-hidden="true"></span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
customElements.define('theme-switcher', class extends HTMLElement {
|
||||||
|
currentTheme
|
||||||
|
preferDark
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super()
|
||||||
|
|
||||||
|
this.preferDark = window.matchMedia("(prefers-color-scheme: dark)")
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
const checkbox = this.querySelector('input[type="checkbox"]')
|
||||||
|
this.currentTheme = localStorage.getItem('theme')
|
||||||
|
|
||||||
|
if (this.currentTheme == 'dark') {
|
||||||
|
checkbox.checked = true
|
||||||
|
document.body.classList.toggle('dark')
|
||||||
|
} else if (this.currentTheme == 'light') {
|
||||||
|
checkbox.checked = false
|
||||||
|
document.body.classList.toggle('light')
|
||||||
|
}
|
||||||
|
|
||||||
|
checkbox.addEventListener('click', () => {
|
||||||
|
let theme
|
||||||
|
if (this.preferDark.matches) {
|
||||||
|
document.body.classList.toggle("light")
|
||||||
|
theme = document.body.classList.contains("light")
|
||||||
|
? "light"
|
||||||
|
: "dark"
|
||||||
|
} else {
|
||||||
|
document.body.classList.toggle("dark")
|
||||||
|
theme = document.body.classList.contains("dark")
|
||||||
|
? "dark"
|
||||||
|
: "light"
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.setItem("theme", theme)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style webc:scoped>
|
||||||
|
/* Styles */
|
||||||
|
:host {
|
||||||
|
--switch-input-thumb-size: 0.88em;
|
||||||
|
--switch-input-thumb-bg: var(--bg-colour);
|
||||||
|
--switch-input-thumb-stroke: 1px solid var(--primary-colour-25);
|
||||||
|
--switch-input-off-bg: var(--neutral-100);
|
||||||
|
--switch-input-off-text: var(--neutral-900);
|
||||||
|
--switch-input-on-bg: var(--neutral-100-25);
|
||||||
|
--switch-input-on-text: var(--neutral-100);
|
||||||
|
--switch-input-gutter: 1px;
|
||||||
|
--switch-input-decor-space: var(--switch-input-gutter) 0.5ch;
|
||||||
|
--switch-input-focus-stroke: 2px solid #ff6978;
|
||||||
|
--switch-input-font-weight: bold;
|
||||||
|
/* --switch-input-font-family: sans-serif; */
|
||||||
|
--switch-input-font-size: 50cqw;
|
||||||
|
--switch-input-transition: inset 50ms linear;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.visually-hidden {
|
||||||
|
border: 0;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-input {
|
||||||
|
width: calc(
|
||||||
|
(var(--switch-input-thumb-size) * 2) + (var(--switch-input-gutter) * 3)
|
||||||
|
);
|
||||||
|
height: calc(
|
||||||
|
var(--switch-input-thumb-size) + (var(--switch-input-gutter) * 2)
|
||||||
|
);
|
||||||
|
border-radius: calc(
|
||||||
|
var(--switch-input-thumb-size) + var(--switch-input-gutter)
|
||||||
|
);
|
||||||
|
padding: var(--switch-input-gutter);
|
||||||
|
background: var(--switch-input-off-bg);
|
||||||
|
color: var(--switch-input-off-text);
|
||||||
|
text-align: left;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-family: var(--switch-input-font-family);
|
||||||
|
font-weight: var(--switch-input-font-weight);
|
||||||
|
position: relative;
|
||||||
|
cursor: pointer;
|
||||||
|
container-type: inline-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-input__decor {
|
||||||
|
position: absolute;
|
||||||
|
inset-block: 0;
|
||||||
|
inset-inline-start: 0;
|
||||||
|
padding: var(--switch-input-decor-space);
|
||||||
|
|
||||||
|
/* Font size lives here because we wanna use container units */
|
||||||
|
font-size: var(--switch-input-font-size);
|
||||||
|
|
||||||
|
/* Legacy */
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
/* align-items: center; */
|
||||||
|
|
||||||
|
/* Future */
|
||||||
|
/* align-content: center; */
|
||||||
|
/* display: block;
|
||||||
|
block-size: 100%; */
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-input__decor[data-switch-input-state="off"] {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-input__thumb {
|
||||||
|
display: block;
|
||||||
|
width: var(--switch-input-thumb-size);
|
||||||
|
height: var(--switch-input-thumb-size);
|
||||||
|
border-radius: var(--switch-input-thumb-size);
|
||||||
|
background: var(--switch-input-thumb-bg);
|
||||||
|
border: var(--switch-input-thumb-stroke);
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: var(--switch-input-gutter);
|
||||||
|
inset-inline-start: var(--switch-input-gutter);
|
||||||
|
transition: var(--switch-input-transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Could do this */
|
||||||
|
/* .switch-input:has(:focus) .switch-input__thumb {
|
||||||
|
outline: var(--switch-input-focus-stroke);
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* Better pointer experience. Still uses has because focus visible would have to be put direct on the checkbox */
|
||||||
|
.switch-input:has(:focus-visible) .switch-input__thumb {
|
||||||
|
outline: var(--switch-input-focus-stroke);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-input:has(:checked) {
|
||||||
|
background: var(--switch-input-on-bg);
|
||||||
|
color: var(--switch-input-on-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-input:has(:checked) .switch-input__thumb {
|
||||||
|
inset-inline-start: calc(
|
||||||
|
var(--switch-input-thumb-size) + (var(--switch-input-gutter) * 2)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue