Push fonts branch to latest main commit #5
1 changed files with 38 additions and 19 deletions
|
@ -21,36 +21,55 @@
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button class:dark={isDarkMode} class="switcher" on:click={toggleDarkMode}>
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
|
<label class:dark={isDarkMode} class="switcher" on:click={toggleDarkMode}>
|
||||||
|
<input class="input" checked="checked" type="button">
|
||||||
{#if isDarkMode}
|
{#if isDarkMode}
|
||||||
<img src="/assets/icons/sun.svg" class="icon" alt="Light Mode" />
|
<img src="/assets/icons/sun.svg" class="icon" alt="Light Mode" />
|
||||||
{:else}
|
{:else}
|
||||||
<img src="/assets/icons/moon.svg" class="icon" alt="Dark Mode" />
|
<img src="/assets/icons/moon.svg" class="icon" alt="Dark Mode" />
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</label>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.switcher {
|
.switcher {
|
||||||
padding: 0.5rem;
|
--bg-color: #ffffff00;
|
||||||
background-color: transparent;
|
--main-color: #0b0d0c;
|
||||||
border: none;
|
position: relative;
|
||||||
cursor: pointer;
|
display: flex;
|
||||||
color: var(--text-color); /* Set the color for the button icon */
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
border-radius: 100%;
|
||||||
|
border: 2px solid var(--main-color);
|
||||||
|
box-shadow: 4px 4px var(--main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
:global(.dark) {
|
||||||
width: 1.5em;
|
|
||||||
height: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark mode styles */
|
|
||||||
:global(.dark) .icon {
|
|
||||||
filter: invert(100%);
|
filter: invert(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dark theme styles */
|
.input {
|
||||||
:global(.dark) {
|
cursor: pointer;
|
||||||
--bg-color: #111;
|
position: absolute;
|
||||||
--text-color: #fff;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% -13px);
|
||||||
|
left: calc(50% -13px);
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switcher:active {
|
||||||
|
box-shadow: 0px 0px var(--main-color);
|
||||||
|
transform: translate(4px, 4px);
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in a new issue