mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
128 lines
No EOL
3.1 KiB
HTML
128 lines
No EOL
3.1 KiB
HTML
<div role="radiogroup" class="theme-switcher">
|
|
<button
|
|
type="button"
|
|
role="radio"
|
|
data-theme-switcher="true"
|
|
data-active="false"
|
|
class="theme-switcher_switch"
|
|
aria-label="Switch to light theme"
|
|
aria-checked="false"
|
|
>
|
|
<svg
|
|
style="color: currentcolor; width: 16px; height: 16px;"
|
|
width="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke="currentColor"
|
|
shape-rendering="geometricPrecision"
|
|
height="24"
|
|
fill="none"
|
|
data-testid="geist-icon"
|
|
class="icon"
|
|
>
|
|
<circle r="5" cy="12" cx="12"></circle>
|
|
<path d="M12 1v2"></path>
|
|
<path d="M12 21v2"></path>
|
|
<path d="M4.22 4.22l1.42 1.42"></path>
|
|
<path d="M18.36 18.36l1.42 1.42"></path>
|
|
<path d="M1 12h2"></path>
|
|
<path d="M21 12h2"></path>
|
|
<path d="M4.22 19.78l1.42-1.42"></path>
|
|
<path d="M18.36 5.64l1.42-1.42"></path>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="radio"
|
|
data-theme-switcher="true"
|
|
data-active="false"
|
|
class="theme-switcher_switch"
|
|
aria-label="Switch to system theme"
|
|
aria-checked="false"
|
|
>
|
|
<svg
|
|
style="color: currentcolor; width: 16px; height: 16px;"
|
|
width="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke="currentColor"
|
|
shape-rendering="geometricPrecision"
|
|
height="24"
|
|
fill="none"
|
|
data-testid="geist-icon"
|
|
class="icon"
|
|
>
|
|
<rect ry="2" rx="2" height="14" width="20" y="3" x="2"></rect>
|
|
<path d="M8 21h8"></path>
|
|
<path d="M12 17v4"></path>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="radio"
|
|
data-theme-switcher="true"
|
|
data-active="true"
|
|
class="theme-switcher_switch"
|
|
aria-label="Switch to dark theme"
|
|
aria-checked="true"
|
|
>
|
|
<svg
|
|
style="color: currentcolor; width: 16px; height: 16px;"
|
|
width="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke="currentColor"
|
|
shape-rendering="geometricPrecision"
|
|
height="24"
|
|
fill="none"
|
|
data-testid="geist-icon"
|
|
class="icon"
|
|
>
|
|
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by andrew-demchenk0 - Website: https://nextjs.org/learn?utm_source=next-site&utm_medium=homepage-cta&utm_campaign=home - Tags: simple, theme-switch, radio, buttons, template, for js, component */
|
|
.theme-switcher {
|
|
padding: 3px;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
display: flex;
|
|
border-radius: 9999px;
|
|
border: 1px solid grey;
|
|
}
|
|
|
|
.theme-switcher_switch {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: inherit;
|
|
border: 0;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-switcher_switch:hover > .icon {
|
|
stroke: #323232;
|
|
}
|
|
|
|
.theme-switcher_switch:active {
|
|
background-color: rgba(128, 128, 128, 0.35);
|
|
}
|
|
|
|
.theme-switcher_switch:active > .icon {
|
|
stroke: white;
|
|
}
|
|
|
|
</style>
|
|
|