Push fonts branch to latest main commit #5
1 changed files with 38 additions and 19 deletions
|
@ -21,36 +21,55 @@
|
|||
});
|
||||
</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}
|
||||
<img src="/assets/icons/sun.svg" class="icon" alt="Light Mode" />
|
||||
{:else}
|
||||
<img src="/assets/icons/moon.svg" class="icon" alt="Dark Mode" />
|
||||
{/if}
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<style>
|
||||
.switcher {
|
||||
padding: 0.5rem;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-color); /* Set the color for the button icon */
|
||||
--bg-color: #ffffff00;
|
||||
--main-color: #0b0d0c;
|
||||
position: relative;
|
||||
display: flex;
|
||||
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 {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
/* Dark mode styles */
|
||||
:global(.dark) .icon {
|
||||
:global(.dark) {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
/* Dark theme styles */
|
||||
:global(.dark) {
|
||||
--bg-color: #111;
|
||||
--text-color: #fff;
|
||||
.input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.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