Ad-closeNN/blog-fuwari
1
0
Fork 0
mirror of https://github.com/Ad-closeNN/blog-fuwari.git synced 2026-05-31 01:40:03 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
1. style(config): 默认亮暗色改为 LIGHT_MODE
2. 更新知更鸟 Credit: Pixiv @KiraraShss
3. style(config): 加入 theme-color 顶部横幅
This commit is contained in:
Ad-closeNN
2025-08-14 14:26:29 +08:00
parent 895eb0dae7
commit 1492795896
5 changed files with 119 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LightDarkSwitch.svelte
+3 -13
View File
@@ -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">
>[1] = (_e) => {
// 移除了系统主题监听功能
// 只在初始化时应用存储的主题
applyThemeToDocument(mode);
};
darkModePreference.addEventListener("change", changeThemeWhenSchemeChanged);
return () => {
darkModePreference.removeEventListener(
"change",
changeThemeWhenSchemeChanged,
);
};
});
function switchScheme(newMode: LIGHT_DARK_MODE) {
src/constants/constants.ts
+1 -1
View File
@@ -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
+1
View File
@@ -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
+1 -1
View File
@@ -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
+106 -20
View File
@@ -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)]
}
.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
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
@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
}
.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)]
active:bg-[var(--btn-card-bg-active)]
@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)]
}
.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
text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
@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)];
&: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)]
text-[var(--btn-content)] dark:text-white/75
@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
}
.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]
@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]
}
.toc-hide,
@@ -73,6 +155,7 @@
scrollbar-width: none;
-ms-overflow-style: none;
}
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
@@ -80,33 +163,35 @@
.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)]
text-[var(--btn-content)] mr-2
@apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)] 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
before:font-medium before:first-of-type:hidden before:transition
@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
}
.btn-regular-dark {
@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))]
@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))]
}
.btn-regular-dark.success {
@apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))]
}
@@ -116,7 +201,8 @@
--font-sans: 'Inter', 'sans-serif';
}
.custom-md img, #post-cover img {
.custom-md img,
#post-cover img {
@apply cursor-zoom-in
}