:root, [data-theme="light"] {
    --bg-body: #FFF;
    --theme-switch-icon-color: #EECC08;
    --theme-switch-bg: #FFF;
    --theme-switch-bg-hover: #fafafa;
    --theme-switch-border: #8a6d0180;
    --theme-switch-shadow: #0000002d 0 2px 4px;
}

[data-theme="dark"] {
    --bg-body: #0f0f0f;
    --theme-switch-icon-color: #0883ee;
    --theme-switch-bg: #1A1A1A;
    --theme-switch-bg-hover: #1B1B1B;
    --theme-switch-border: hsla(0, 0%, 100%, .14);
}
body {
	background-color: var(--bg-body);
}
theme-switch {
    position: fixed;
    right: 0;
    bottom: 20%;
    width: 48px;
    height: 48px;
    background: var(--theme-switch-bg);
    transition-property: border-color, background, color, transform, box-shadow;
    transition-duration: .15s;
    transition-timing-function: ease;
	z-index: 99999;
}

theme-switch:hover {
    background: var(--theme-switch-bg-hover);
}

#one {
    padding: 10px;
    border-radius: 5px 0 0 5px;
    box-shadow: var(--theme-switch-shadow);
}

#two {
    --theme-switch-bg: #c49e1410;
    right: 10px;
    padding: 12px;
    border-radius: 50%;
    border: 1px solid var(--theme-switch-border);
}