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>
<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>