added dark light switch
This commit is contained in:
parent
3add951354
commit
8e99275fcc
|
@ -7,7 +7,10 @@
|
|||
</template>
|
||||
</div>
|
||||
|
||||
<button class="audioToggle"></button>
|
||||
<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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue