style(config): 加入 Mica 云母效果

1. style(config): 默认亮暗色改为 LIGHT_MODE
2. 更新知更鸟 Credit: Pixiv @KiraraShss
3. style(config): 加入 theme-color 顶部横幅

src/components/LightDarkSwitch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "@constants/constants.ts";
+import { DARK_MODE, LIGHT_MODE } from "@constants/constants.ts";
 import I18nKey from "@i18n/i18nKey";
 import { i18n } from "@i18n/translation";
 import Icon from "@iconify/svelte";
@@ -16,19 +16,9 @@ let mode: LIGHT_DARK_MODE = LIGHT_MODE;
 
 onMount(() => {
 	mode = getStoredTheme();
-	const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
+	// 移除了系统主题监听功能
-	const changeThemeWhenSchemeChanged: Parameters<
+	// 只在初始化时应用存储的主题
-		typeof darkModePreference.addEventListener<"change">
+	applyThemeToDocument(mode);
-	>[1] = (_e) => {
-		applyThemeToDocument(mode);
-	};
-	darkModePreference.addEventListener("change", changeThemeWhenSchemeChanged);
-	return () => {
-		darkModePreference.removeEventListener(
-			"change",
-			changeThemeWhenSchemeChanged,
-		);
-	};
 });
 
 function switchScheme(newMode: LIGHT_DARK_MODE) {
@@ -67,8 +57,8 @@ function hidePanel() {
             <Icon icon="material-symbols:dark-mode-outline-rounded" class="text-[1.25rem]"></Icon>
         </div>
     </button>
-
+    
-    <div id="light-dark-panel" class="hidden lg:block absolute transition float-panel-closed top-11 -right-2 pt-5" >
+    <div id="light-dark-panel" class="hidden lg:block absolute transition float-panel-closed top-11 -right-2 pt-5">
         <div class="card-base float-panel p-2">
             <button class="flex transition whitespace-nowrap items-center !justify-start w-full btn-plain scale-animation rounded-lg h-9 px-3 font-medium active:scale-95 mb-0.5"
                     class:current-theme-btn={mode === LIGHT_MODE}
@@ -86,4 +76,4 @@ function hidePanel() {
             </button>
         </div>
     </div>
-</div>
+</div> 

src/constants/constants.ts

@@ -3,7 +3,7 @@ export const PAGE_SIZE = 8;
 export const LIGHT_MODE = "light",
 	DARK_MODE = "dark",
 	AUTO_MODE = "auto";
-export const DEFAULT_THEME = AUTO_MODE;
+export const DEFAULT_THEME = LIGHT_MODE;
 
 // Banner height unit: vh
 export const BANNER_HEIGHT = 35;

src/layouts/Layout.astro

@@ -99,6 +99,7 @@ const bannerOffset =
 		<meta name="twitter:title" content={pageTitle}>
 		<meta name="twitter:description" content={description || pageTitle}>
 
+		<meta name="theme-color" content="#48823b" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
 		{favicons.map(favicon => (

src/layouts/MainGridLayout.astro

@@ -92,7 +92,7 @@ const isSaturday = new Date().getDay() === 6;
                                    "px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
             >
                 <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
-                <div class="text-white/75 text-xs">{"KiraraShss"}</div>
+                <div class="text-white/75 text-xs">{"Pixiv @KiraraShss"}</div>
                 <Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0",
                     {"group-hover:opacity-100": hasBannerLink}]}
                       name="fa6-solid:arrow-up-right-from-square">

src/styles/main.css

@@ -1,63 +1,145 @@
 @tailwind components;
 
 @layer components {
+
+    /* Windows 11 Mica 材质效果 */
+    /* 完全无噪点的纯净 Mica */
     .card-base {
-        @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
+        @apply rounded-[var(--radius-large)] transition;
+        position: relative;
+        /* Mica 背景：半透明 + 噪点纹理 */
+        background:
+            /* 噪点纹理层 */
+            radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.15) 1px, transparent 0),
+            /* 基础半透明背景 */
+            rgba(255, 255, 255, 0.7);
+        background-size: 20px 20px, 100% 100%;
+        /* 背景模糊效果 */
+        backdrop-filter: blur(30px) saturate(110%) brightness(105%);
+        -webkit-backdrop-filter: blur(30px) saturate(110%) brightness(105%);
+        /* 微妙的边框 */
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        /* 轻微的阴影 */
+        box-shadow:
+            0 2px 10px rgba(0, 0, 0, 0.1),
+            inset 0 1px 0 rgba(255, 255, 255, 0.4);
     }
-    h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
+
+    /* 深色模式下的 Mica 效果 */
+    .dark .card-base {
+        background:
+            /* 深色模式噪点纹理 */
+            radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0),
+            /* 深色半透明背景 */
+            rgba(32, 32, 32, 0.8);
+        background-size: 20px 20px, 100% 100%;
+        backdrop-filter: blur(30px) saturate(110%) brightness(90%);
+        -webkit-backdrop-filter: blur(30px) saturate(110%) brightness(90%);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        box-shadow:
+            0 2px 10px rgba(0, 0, 0, 0.3),
+            inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    }
+
+    /* Hover 状态增强 */
+    .card-base:hover {
+        backdrop-filter: blur(40px) saturate(120%) brightness(110%);
+        -webkit-backdrop-filter: blur(40px) saturate(120%) brightness(110%);
+        border-color: rgba(255, 255, 255, 0.3);
+        box-shadow:
+            0 4px 20px rgba(0, 0, 0, 0.15),
+            inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    }
+
+    .dark .card-base:hover {
+        backdrop-filter: blur(40px) saturate(120%) brightness(95%);
+        -webkit-backdrop-filter: blur(40px) saturate(120%) brightness(95%);
+        border-color: rgba(255, 255, 255, 0.15);
+        box-shadow:
+            0 4px 20px rgba(0, 0, 0, 0.4),
+            inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    a,
+    span,
+    li,
+    ul,
+    ol,
+    blockquote,
+    code,
+    pre,
+    table,
+    th,
+    td,
+    strong {
         @apply transition;
     }
+
     .card-shadow {
-        @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
+        @apply drop-shadow-[0_2px_4px_rgba(0, 0, 0, 0.005)]
     }
+
     .expand-animation {
-        @apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
+        @apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0 before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
-        before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
     }
+
     .link {
         @apply transition rounded-md p-1 -m-1 expand-animation;
     }
+
     .link-lg {
         @apply transition rounded-md p-1.5 -m-1.5 expand-animation;
     }
+
     .float-panel {
         @apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
     }
+
     .float-panel-closed {
         @apply -translate-y-1 opacity-0 pointer-events-none
     }
+
     .search-panel mark {
         @apply bg-transparent text-[var(--primary)]
     }
 
     .btn-card {
-        @apply transition flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)]
+        @apply transition flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)] active:bg-[var(--btn-card-bg-active)]
-        active:bg-[var(--btn-card-bg-active)]
     }
+
     .btn-card.disabled {
         @apply pointer-events-none text-black/10 dark:text-white/10
     }
+
     .btn-plain {
-        @apply transition relative flex items-center justify-center bg-none
+        @apply transition relative flex items-center justify-center bg-none text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
-        text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
+
         &:not(.scale-animation) {
             @apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
         }
+
         &.scale-animation {
             @apply expand-animation;
+
             &.current-theme-btn {
                 @apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)]
             }
         }
     }
+
     .btn-regular {
-        @apply transition flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)]
+        @apply transition flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)] text-[var(--btn-content)] dark:text-white/75
-        text-[var(--btn-content)] dark:text-white/75
     }
 
     .link-underline {
-        @apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
+        @apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)] hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
-        hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
     }
 
     .toc-hide,
@@ -73,6 +155,7 @@
         scrollbar-width: none;
         -ms-overflow-style: none;
     }
+
     .hide-scrollbar::-webkit-scrollbar {
         display: none;
     }
@@ -80,43 +163,46 @@
     .text-90 {
         @apply text-black/90 dark:text-white/90
     }
+
     .text-75 {
         @apply text-black/75 dark:text-white/75
     }
+
     .text-50 {
         @apply text-black/50 dark:text-white/50
     }
+
     .text-30 {
         @apply text-black/30 dark:text-white/30
     }
+
     .text-25 {
         @apply text-black/25 dark:text-white/25
     }
 
     .meta-icon {
-        @apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
+        @apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)] text-[var(--btn-content)] mr-2
-        text-[var(--btn-content)] mr-2
     }
+
     .with-divider {
-        @apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-[var(--meta-divider)] before:text-sm
+        @apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-[var(--meta-divider)] before:text-sm before:font-medium before:first-of-type:hidden before:transition
-        before:font-medium before:first-of-type:hidden before:transition
     }
 
     .btn-regular-dark {
-        @apply flex items-center justify-center
+        @apply flex items-center justify-center bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))] dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))]
-        bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))]
-        dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))]
     }
+
     .btn-regular-dark.success {
         @apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))]
     }
 }
 
 @theme {
-  --font-sans: 'Inter', 'sans-serif';
+    --font-sans: 'Inter', 'sans-serif';
-}   
+}
 
-.custom-md img, #post-cover img {
+.custom-md img,
+#post-cover img {
     @apply cursor-zoom-in
 }