68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { useTheme } from "../composables/useTheme";
|
|
|
|
const { isDarkMode, toggleTheme } = useTheme();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="ThemeToggle">
|
|
<button
|
|
class="theme-toggle"
|
|
:class="{ 'theme-toggle--toggled': isDarkMode }"
|
|
type="button"
|
|
title="Toggle theme"
|
|
aria-label="Toggle theme"
|
|
@click="toggleTheme"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-hidden="true"
|
|
width="2.5em"
|
|
height="2.5em"
|
|
fill="currentColor"
|
|
class="theme-toggle__around"
|
|
viewBox="0 0 32 32"
|
|
>
|
|
<clipPath id="theme-toggle__around__cutout">
|
|
<path d="M0 0h42v30a1 1 0 00-16 13H0Z" />
|
|
</clipPath>
|
|
<g clip-path="url(#theme-toggle__around__cutout)">
|
|
<circle cx="16" cy="16" r="8.4" />
|
|
<g>
|
|
<circle cx="16" cy="3.3" r="2.3" />
|
|
<circle cx="27" cy="9.7" r="2.3" />
|
|
<circle cx="27" cy="22.3" r="2.3" />
|
|
<circle cx="16" cy="28.7" r="2.3" />
|
|
<circle cx="5" cy="22.3" r="2.3" />
|
|
<circle cx="5" cy="9.7" r="2.3" />
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@import "theme-toggles/css/around.css";
|
|
|
|
.ThemeToggle {
|
|
margin: 1em 1em;
|
|
transition:
|
|
transform 0.3s,
|
|
opacity 0.3s;
|
|
}
|
|
|
|
.theme-toggle {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
</style>
|