fix: correct theme toggle icon

This commit is contained in:
max_richter 2024-04-06 15:20:42 +02:00
parent f9072c3cfc
commit ee391e128f
6 changed files with 86 additions and 36 deletions

View File

@ -1,6 +1,7 @@
import { defineConfig } from 'astro/config';
import { i18n, filterSitemapByDefaultLocale } from "astro-i18n-aut/integration";
import sitemap from "@astrojs/sitemap";
import Icons from 'unplugin-icons/vite'
import mdx from '@astrojs/mdx';
import glsl from 'vite-plugin-glsl';
@ -24,6 +25,9 @@ export default defineConfig({
vite: {
plugins: [
glsl(),
Icons({
compiler: 'svelte',
}),
],
},
integrations: [

View File

@ -37,6 +37,7 @@
"prettier-plugin-astro": "^0.13.0",
"sharp": "^0.33.3",
"unocss": "^0.58.8",
"unplugin-icons": "^0.18.5",
"vite-plugin-glsl": "^1.3.0"
}
}

59
pnpm-lock.yaml generated
View File

@ -82,6 +82,9 @@ devDependencies:
unocss:
specifier: ^0.58.8
version: 0.58.8(postcss@8.4.35)(vite@5.1.6)
unplugin-icons:
specifier: ^0.18.5
version: 0.18.5
vite-plugin-glsl:
specifier: ^1.3.0
version: 1.3.0(vite@5.1.6)
@ -115,6 +118,12 @@ packages:
find-up: 5.0.0
dev: true
/@antfu/install-pkg@0.3.2:
resolution: {integrity: sha512-FFYqME8+UHlPnRlX/vn+8cTD4Wo/nG/lzRxpABs3XANBmdJdNImVz3QvjNAE/W3PSCNbG387FOz8o5WelnWOlg==}
dependencies:
execa: 8.0.1
dev: true
/@antfu/utils@0.7.7:
resolution: {integrity: sha512-gFPqTG7otEJ8uP6wrhDv6mqwGWYZKNvAcCq6u9hOj0c+IKCEsY4L1oC9trPq2SaWIzAfHvqfBDxF591JkMf+kg==}
dev: true
@ -5818,6 +5827,47 @@ packages:
- supports-color
dev: true
/unplugin-icons@0.18.5:
resolution: {integrity: sha512-KVNAohXbZ7tVcG1C3p6QaC7wU9Qrj7etv4XvsMMJAxr5LccQZ+Iuv5LOIv/7GtqXaGN1BuFCqRO1ErsHEgEXdQ==}
peerDependencies:
'@svgr/core': '>=7.0.0'
'@svgx/core': ^1.0.1
'@vue/compiler-sfc': ^3.0.2 || ^2.7.0
vue-template-compiler: ^2.6.12
vue-template-es2015-compiler: ^1.9.0
peerDependenciesMeta:
'@svgr/core':
optional: true
'@svgx/core':
optional: true
'@vue/compiler-sfc':
optional: true
vue-template-compiler:
optional: true
vue-template-es2015-compiler:
optional: true
dependencies:
'@antfu/install-pkg': 0.3.2
'@antfu/utils': 0.7.7
'@iconify/utils': 2.1.22
debug: 4.3.4
kolorist: 1.8.0
local-pkg: 0.5.0
unplugin: 1.10.1
transitivePeerDependencies:
- supports-color
dev: true
/unplugin@1.10.1:
resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==}
engines: {node: '>=14.0.0'}
dependencies:
acorn: 8.11.3
chokidar: 3.6.0
webpack-sources: 3.2.3
webpack-virtual-modules: 0.6.1
dev: true
/update-browserslist-db@1.0.13(browserslist@4.23.0):
resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
hasBin: true
@ -6070,6 +6120,15 @@ packages:
/web-namespaces@2.0.1:
resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
/webpack-sources@3.2.3:
resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
engines: {node: '>=10.13.0'}
dev: true
/webpack-virtual-modules@0.6.1:
resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==}
dev: true
/which-pm-runs@1.1.0:
resolution: {integrity: sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA==}
engines: {node: '>=4'}

View File

@ -1,6 +1,8 @@
<script lang="ts">
import { onMount } from "svelte";
import { writable } from "svelte/store";
import IconSun from "~icons/tabler/Sun";
import IconMoon from "~icons/tabler/Moon";
let theme = writable("");
@ -20,45 +22,27 @@
</script>
<button class="block w-6 h-6" on:click={toggleTheme} title="toggle dark mode">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
class="hidden icon icon-tabler icons-tabler-outline icon-tabler-sun"
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"
/><path
d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.q7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"
/></svg
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-moon"
><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path
d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"
/></svg
>
<IconMoon class="w-6 h-6 icon-tabler-moon" />
<IconSun class="w-6 h-6 icon-tabler-sun" />
</button>
<style>
:global(.dark .icon-tabler-moon) {
display: none;
button :global(path) {
stroke-width: 1.5px !important;
}
:global(.dark .icon-tabler-sun) {
button > :global(.icon-tabler-moon) {
display: block;
}
button > :global(.icon-tabler-sun) {
display: none;
}
:global(.dark .icon-tabler-moon) {
display: none !important;
}
:global(.dark .icon-tabler-sun) {
display: block !important;
}
</style>

1
src/env.d.ts vendored
View File

@ -1,2 +1,3 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
/// <reference types="unplugin-icons/types" />

View File

@ -6,7 +6,8 @@
"compilerOptions": {
"baseUrl": ".",
"types": [
"vite-plugin-glsl/ext"
"vite-plugin-glsl/ext",
"unplugin-icons/types"
],
"paths": {
"@components/*": [