Redesigned the Switcher

This commit is contained in:
Sangelo 2023-07-12 11:13:52 +02:00
parent d6a643b9c0
commit a7ee63cb36

View file

@ -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;
}
.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> </style>