added dark light switch

This commit is contained in:
suroh 2024-02-08 16:56:00 +01:00
parent 3add951354
commit 8e99275fcc
2 changed files with 60 additions and 7 deletions

View File

@ -7,7 +7,10 @@
</template>
</div>
<div class="controls">
<button class="audioToggle"></button>
<theme-switcher></theme-switcher>
</div>
</nav>
<nav id="sub" slot="subnav">
@ -31,6 +34,12 @@
<script src="nav-primary.js" type="module"></script>
<style webc:scoped>
/*
*
* switch element taken from Andy Bell's article
* which can be found here:
* https://piccalil.li/blog/a-highly-configurable-switch-component-using-modern-css/
*/
/* => HOST */
:host {
display: grid;
@ -64,6 +73,12 @@ nav-link[data-name="<~"] {
gap: 0.25em;
}
/* => CONTROLS */
.controls {
display: flex;
gap: 0.5em;
}
/* => AUDIO TOGGLE */
.audioToggle {
background: none;

View File

@ -5,6 +5,25 @@
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
input,
button,
textarea,
select {
font: inherit;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* --> BASE STYLES <-- */
:root {
--page-margin-inline: 1em;
@ -19,12 +38,6 @@
--bg-colour-25: #fcfcfc33;
}
body {
font-family: 'fira code', monospace;
color: var(--primary-colour);
background-color: var(--bg-colour);
}
@media (prefers-color-scheme: dark) {
body {
--primary-colour: var(--neutral-100);
@ -34,6 +47,31 @@ body {
}
}
body.dark {
--primary-colour: var(--neutral-100);
--primary-colour-25: var(--neutral-100-25);
--bg-colour: var(--neutral-900);
--bg-colour-25: var(--neutral-900-25);
}
body.light {
--primary-colour: var(--neutral-900);
--primary-colour-25: var(--neutral-900-25);
--bg-colour: #fcfcfcff;
--bg-colour-25: #fcfcfc33;
}
body {
font-family: 'fira code', monospace;
color: var(--primary-colour);
background-color: var(--bg-colour);
}
input {
background-color: var(--bg-colour);
color: var(--primary-colour);
}
p {
max-width: 80ch;
}