mirror of
https://github.com/afoim/fuwari.git
synced 2026-01-31 09:03:18 +08:00
feat(显示设置): 添加背景模糊功能
在显示设置中添加背景模糊控制功能，包括滑块调节和本地存储 修改卡片背景样式，增加模糊效果并调整透明度
This commit is contained in:
二叉树树
@@ -11,6 +11,8 @@ import {
|
||||
setRainbowMode,
|
||||
getRainbowSpeed,
|
||||
setRainbowSpeed,
|
||||
getBgBlur,
|
||||
setBgBlur,
|
||||
} from "@utils/setting-utils";
|
||||
import { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "@constants/constants";
|
||||
|
||||
@@ -18,6 +20,7 @@ let hue = getHue();
|
||||
let theme = getStoredTheme();
|
||||
let isRainbowMode = getRainbowMode();
|
||||
let rainbowSpeed = getRainbowSpeed();
|
||||
let bgBlur = getBgBlur();
|
||||
let animationId: number;
|
||||
|
||||
const defaultHue = getDefaultHue();
|
||||
@@ -30,6 +33,10 @@ $: if ((hue || hue === 0) && !isRainbowMode) {
|
||||
setHue(hue);
|
||||
}
|
||||
|
||||
$: {
|
||||
setBgBlur(bgBlur);
|
||||
}
|
||||
|
||||
function switchTheme(newTheme: string) {
|
||||
theme = newTheme;
|
||||
setTheme(newTheme);
|
||||
@@ -157,6 +164,25 @@ onMount(() => {
|
||||
class="slider" step="1" style="width: 100%">
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-row gap-2 mb-3 mt-3 items-center justify-between">
|
||||
<div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3
|
||||
before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
|
||||
before:absolute before:-left-3 before:top-[0.33rem]"
|
||||
>
|
||||
背景模糊
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<div class="transition bg-[var(--btn-regular-bg)] w-10 h-7 rounded-md flex justify-center
|
||||
font-bold text-sm items-center text-[var(--btn-content)]">
|
||||
{bgBlur}px
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-6 px-1 bg-[var(--btn-regular-bg)] rounded select-none">
|
||||
<input aria-label="背景模糊" type="range" min="0" max="20" bind:value={bgBlur}
|
||||
class="slider" step="1" style="width: 100%">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@ export const siteConfig: SiteConfig = {
|
||||
size: "cover", // Background size: 'cover', 'contain', 'auto'
|
||||
repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'
|
||||
attachment: "fixed", // Background attachment: 'fixed', 'scroll', 'local'
|
||||
opacity: 0.5, // Background opacity (0-1)
|
||||
opacity: 1, // Background opacity (0-1)
|
||||
},
|
||||
toc: {
|
||||
enable: true, // Display the table of contents on the right side of the post
|
||||
|
||||
@@ -236,10 +236,11 @@ const bannerOffset =
|
||||
#bg-box.loaded {
|
||||
opacity: calc(var(--bg-opacity) * var(--bg-enable));
|
||||
}
|
||||
</style> <!-- defines global css variables. This will be applied to <html> <body> and some other elements idk why -->
|
||||
</style>
|
||||
|
||||
<slot name="head"></slot>
|
||||
|
||||
|
||||
<link rel="alternate" type="application/rss+xml" title={profileConfig.name} href={`${Astro.site}rss.xml`}/>
|
||||
<!-- Umami分析（自建） -->
|
||||
<script defer src="https://umami.acofork.com/script.js" data-website-id="5d710dbd-3a2e-43e3-a553-97b415090c63" data-swup-ignore-script></script>
|
||||
@@ -402,7 +403,7 @@ import {
|
||||
// SizeObserverPlugin,
|
||||
// ClickScrollPlugin
|
||||
} from 'overlayscrollbars';
|
||||
import {getHue, getStoredTheme, setHue, setTheme} from "../utils/setting-utils";
|
||||
import {getHue, getStoredTheme, setHue, setTheme, getBgBlur, setBgBlur} from "../utils/setting-utils";
|
||||
import {pathsEqual, url} from "../utils/url-utils";
|
||||
import {
|
||||
BANNER_HEIGHT,
|
||||
@@ -486,6 +487,10 @@ function loadHue() {
|
||||
setHue(getHue())
|
||||
}
|
||||
|
||||
function loadBgBlur() {
|
||||
setBgBlur(getBgBlur())
|
||||
}
|
||||
|
||||
function initCustomScrollbar() {
|
||||
const bodyElement = document.querySelector('body');
|
||||
if (!bodyElement) return;
|
||||
@@ -532,6 +537,7 @@ function init() {
|
||||
// disableAnimation()() // TODO
|
||||
loadTheme();
|
||||
loadHue();
|
||||
loadBgBlur();
|
||||
initCustomScrollbar();
|
||||
showBanner();
|
||||
}
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
@layer components {
|
||||
.card-base {
|
||||
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
|
||||
@apply transition;
|
||||
|
||||
@@ -25,7 +25,7 @@ define(vars)
|
||||
define({
|
||||
--primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue))
|
||||
--page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue))
|
||||
--card-bg: rgba(255, 255, 255, 0.9) unquote("oklch(0.23 0.015 var(--hue) / 0.9)")
|
||||
--card-bg: rgba(255, 255, 255, 0.75) unquote("oklch(0.23 0.015 var(--hue) / 0.75)")
|
||||
--card-bg-transparent: rgba(255, 255, 255, 0.8) rgba(23, 23, 23, 0.8)
|
||||
|
||||
--btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue))
|
||||
|
||||
@@ -47,6 +47,19 @@ export function setRainbowSpeed(speed: number): void {
|
||||
localStorage.setItem("rainbow-speed", String(speed));
|
||||
}
|
||||
|
||||
export function getBgBlur(): number {
|
||||
const stored = localStorage.getItem("bg-blur");
|
||||
return stored ? Number.parseInt(stored) : 0; // Default blur is 0
|
||||
}
|
||||
|
||||
export function setBgBlur(blur: number): void {
|
||||
localStorage.setItem("bg-blur", String(blur));
|
||||
const bgBox = document.getElementById("bg-box");
|
||||
if (bgBox) {
|
||||
bgBox.style.setProperty("filter", `blur(${blur}px)`);
|
||||
}
|
||||
}
|
||||
|
||||
export function applyThemeToDocument(theme: LIGHT_DARK_MODE) {
|
||||
switch (theme) {
|
||||
case LIGHT_MODE:
|
||||
|
||||
Reference in New Issue
Block a user