theme-switcher {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

theme-switcher button {
    display: none;
    cursor: pointer;
    width: inherit;
    height: inherit;
}

body[data-theme='light'] theme-switcher button.light {
    display: block;
    background-color: var(--color-base-content);
    mask: url("../../images/sun-phulxrK.svg") no-repeat center;
    -webkit-mask: url("../../images/sun-phulxrK.svg") no-repeat center;
}

body[data-theme='dark'] theme-switcher button.dark {
    display: block;
    background-color: var(--color-base-content);
    mask: url("../../images/moon-XpHhuQU.svg") no-repeat center;
    -webkit-mask: url("../../images/moon-XpHhuQU.svg") no-repeat center;
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme='light']) theme-switcher button.dark {
        display: block;
        background-color: var(--color-base-content);
        mask: url("../../images/moon-XpHhuQU.svg") no-repeat center;
        -webkit-mask: url("../../images/moon-XpHhuQU.svg") no-repeat center;
    }
}

@media (prefers-color-scheme: light) {
    body:not([data-theme='dark']) theme-switcher button.light {
        display: block;
        background-color: var(--color-base-content);
        mask: url("../../images/sun-phulxrK.svg") no-repeat center;
        -webkit-mask: url("../../images/sun-phulxrK.svg") no-repeat center;
    }
}