mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-05-13 15:10:05 +00:00
feat: enhance splash screen with dynamic theme support and improved styling
This commit is contained in:
Jason
@@ -1001,6 +1001,8 @@ function createAgreementWindow() {
|
||||
*/
|
||||
function createSplashWindow(): BrowserWindow {
|
||||
const isDev = !!process.env.VITE_DEV_SERVER_URL
|
||||
const splashThemeId = configService?.get('themeId') || 'cloud-dancer'
|
||||
const splashThemeMode = configService?.get('theme') || 'system'
|
||||
const iconPath = isDev
|
||||
? join(__dirname, '../public/icon.ico')
|
||||
: (process.platform === 'darwin'
|
||||
@@ -1008,8 +1010,8 @@ function createSplashWindow(): BrowserWindow {
|
||||
: join(process.resourcesPath, 'icon.ico'))
|
||||
|
||||
splashWindow = new BrowserWindow({
|
||||
width: 856,
|
||||
height: 540,
|
||||
width: 680,
|
||||
height: 460,
|
||||
resizable: false,
|
||||
frame: false,
|
||||
transparent: true,
|
||||
@@ -1027,9 +1029,17 @@ function createSplashWindow(): BrowserWindow {
|
||||
})
|
||||
|
||||
if (isDev) {
|
||||
splashWindow.loadURL(`${process.env.VITE_DEV_SERVER_URL}splash.html`)
|
||||
const splashUrl = new URL('splash.html', process.env.VITE_DEV_SERVER_URL)
|
||||
splashUrl.searchParams.set('themeId', splashThemeId)
|
||||
splashUrl.searchParams.set('themeMode', splashThemeMode)
|
||||
splashWindow.loadURL(splashUrl.toString())
|
||||
} else {
|
||||
splashWindow.loadFile(join(__dirname, '../dist/splash.html'))
|
||||
splashWindow.loadFile(join(__dirname, '../dist/splash.html'), {
|
||||
query: {
|
||||
themeId: splashThemeId,
|
||||
themeMode: splashThemeMode
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
splashWindow.once('ready-to-show', () => {
|
||||
|
||||
@@ -4,23 +4,65 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WeFlow</title>
|
||||
<script>
|
||||
(function initSplashMode() {
|
||||
var params = new URLSearchParams(window.location.search || "");
|
||||
var mode = params.get("themeMode") || params.get("mode") || "system";
|
||||
var themeId = params.get("themeId") || "cloud-dancer";
|
||||
var mq = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
|
||||
var resolved = mode === "dark" || (mode === "system" && mq && mq.matches) ? "dark" : "light";
|
||||
|
||||
document.documentElement.setAttribute("data-theme", themeId);
|
||||
document.documentElement.setAttribute("data-theme-mode", mode);
|
||||
document.documentElement.setAttribute("data-mode", resolved);
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #8b7355;
|
||||
--primary-rgb: 139, 115, 85;
|
||||
--on-primary: #ffffff;
|
||||
--window-bg: transparent;
|
||||
--card-bg: #ffffff;
|
||||
--card-bg-solid: #ffffff;
|
||||
--card-border: rgba(0, 0, 0, 0.06);
|
||||
--text-primary: #171717;
|
||||
--text-secondary: #6f6f6f;
|
||||
--text-tertiary: #9a9a9a;
|
||||
--track-bg: rgba(0, 0, 0, 0.06);
|
||||
--logo-surface: #f4f4f5;
|
||||
--card-gloss-start: rgba(255, 255, 255, 0.62);
|
||||
--card-gloss-end: rgba(255, 255, 255, 0);
|
||||
--shadow: none;
|
||||
--surface-start: #ffffff;
|
||||
--surface-end: #f8f9fc;
|
||||
--surface-glass: rgba(255, 255, 255, 0.78);
|
||||
--surface-glass-end: rgba(255, 255, 255, 0.52);
|
||||
--accent: #5b6abf;
|
||||
--accent-rgb: 91, 106, 191;
|
||||
--accent-hot: #364491;
|
||||
--logo-highlight: #5b6abf;
|
||||
--ambient-glow: rgba(91, 106, 191, 0.08);
|
||||
--core-glow: rgba(91, 106, 191, 0.16);
|
||||
--text: #1a1b1e;
|
||||
--text-muted: #5f6368;
|
||||
--text-faint: #9aa0a6;
|
||||
--border-subtle: rgba(0, 0, 0, 0.05);
|
||||
--loader-track: rgba(0, 0, 0, 0.03);
|
||||
--shadow-window:
|
||||
0 24px 60px rgba(23, 27, 38, 0.10),
|
||||
0 4px 12px rgba(23, 27, 38, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1);
|
||||
--radius-window: 24px;
|
||||
--ease-ambient: cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
--font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
[data-mode="dark"] {
|
||||
--surface-start: #14171d;
|
||||
--surface-end: #0b0d10;
|
||||
--surface-glass: rgba(255, 255, 255, 0.10);
|
||||
--surface-glass-end: rgba(255, 255, 255, 0.02);
|
||||
--accent: #7c8deb;
|
||||
--accent-rgb: 124, 141, 235;
|
||||
--accent-hot: #ffffff;
|
||||
--logo-highlight: #ffffff;
|
||||
--ambient-glow: rgba(124, 141, 235, 0.08);
|
||||
--core-glow: rgba(124, 141, 235, 0.28);
|
||||
--text: #f0f0f0;
|
||||
--text-muted: #8b92a5;
|
||||
--text-faint: #4e5569;
|
||||
--border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--loader-track: rgba(255, 255, 255, 0.03);
|
||||
--shadow-window:
|
||||
0 24px 80px rgba(0, 0, 0, 0.60),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
--radius-window: 20px;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -34,9 +76,9 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--window-bg);
|
||||
color: var(--text-primary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -48,100 +90,152 @@
|
||||
}
|
||||
|
||||
.splash-shell {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
width: 600px;
|
||||
height: 380px;
|
||||
max-width: calc(100vw - 64px);
|
||||
max-height: calc(100vh - 64px);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border: none;
|
||||
background:
|
||||
linear-gradient(180deg, var(--card-gloss-start) 0%, var(--card-gloss-end) 48%),
|
||||
var(--card-bg-solid);
|
||||
box-shadow: var(--shadow);
|
||||
border-radius: var(--radius-window);
|
||||
border: 1px solid var(--border-subtle);
|
||||
background: linear-gradient(145deg, var(--surface-start), var(--surface-end));
|
||||
box-shadow: var(--shadow-window);
|
||||
isolation: isolate;
|
||||
animation: shellIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
animation: windowAppear 800ms var(--ease-ambient) both;
|
||||
}
|
||||
|
||||
.splash-shell::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
left: -50%;
|
||||
top: -50%;
|
||||
background: radial-gradient(circle at 50% 40%, var(--ambient-glow) 0%, transparent 44%);
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(90deg, transparent 0%, rgba(var(--primary-rgb), 0.035) 48%, transparent 100%),
|
||||
linear-gradient(180deg, rgba(var(--primary-rgb), 0.045) 0%, transparent 32%);
|
||||
opacity: 0.9;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.brand-stage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding-bottom: 42px;
|
||||
}
|
||||
|
||||
.brand-lockup {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -20px;
|
||||
text-align: center;
|
||||
animation: contentIn 460ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
|
||||
animation: contentIn 560ms var(--ease-ambient) 90ms both;
|
||||
}
|
||||
|
||||
.logo-tile {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
.logo-core {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 20px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: var(--logo-surface);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 10px 24px rgba(0, 0, 0, 0.04);
|
||||
margin-bottom: 25px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
background: linear-gradient(135deg, var(--surface-glass), var(--surface-glass-end));
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
backdrop-filter: blur(12px) saturate(1.16);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(1.16);
|
||||
animation: coreBreathe 3200ms ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
object-fit: contain;
|
||||
border-radius: 14px;
|
||||
[data-mode="light"] .logo-core {
|
||||
border-color: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
[data-mode="dark"] .logo-core {
|
||||
border-color: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
.logo-mark {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: var(--accent);
|
||||
display: block;
|
||||
filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.18));
|
||||
}
|
||||
|
||||
[data-mode="light"] .logo-mark .mark-base {
|
||||
color: var(--text-faint);
|
||||
opacity: 0.42;
|
||||
}
|
||||
|
||||
[data-mode="dark"] .logo-mark .mark-base {
|
||||
color: var(--accent);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 25px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
font-size: 24px;
|
||||
line-height: 1.18;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
[data-mode="dark"] .app-name {
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.50);
|
||||
}
|
||||
|
||||
.app-desc {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
[data-mode="dark"] .app-desc {
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.status-row {
|
||||
position: absolute;
|
||||
left: 32px;
|
||||
right: 32px;
|
||||
bottom: 26px;
|
||||
bottom: 24px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 12px;
|
||||
gap: 18px;
|
||||
color: var(--text-faint);
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
font-variant-numeric: tabular-nums;
|
||||
animation: contentIn 460ms cubic-bezier(0.22, 1, 0.36, 1) 160ms both;
|
||||
animation: contentIn 560ms var(--ease-ambient) 170ms both;
|
||||
}
|
||||
|
||||
.progress-text-wrap {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
[data-mode="dark"] .progress-text-wrap {
|
||||
color: var(--text-faint);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.42);
|
||||
animation: dotPulse 1700ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
@@ -149,13 +243,20 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.version {
|
||||
flex-shrink: 0;
|
||||
color: var(--text-faint);
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0;
|
||||
opacity: 0.82;
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
[data-mode="dark"] .version {
|
||||
opacity: 0.50;
|
||||
}
|
||||
|
||||
.progress-track {
|
||||
@@ -163,88 +264,147 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
background: var(--track-bg);
|
||||
z-index: 3;
|
||||
height: 1.5px;
|
||||
background: var(--loader-track);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[data-mode="dark"] .progress-track {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
background: var(--primary);
|
||||
min-width: 0;
|
||||
border-radius: 0 999px 999px 0;
|
||||
box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.34);
|
||||
transition: width 440ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(90deg, transparent 0%, var(--accent) 54%, var(--accent-hot) 100%);
|
||||
box-shadow: 0 0 10px 1px rgba(var(--accent-rgb), 0.30);
|
||||
transition:
|
||||
width 680ms var(--ease-ambient),
|
||||
opacity 260ms ease,
|
||||
left 680ms var(--ease-ambient);
|
||||
}
|
||||
|
||||
.progress-fill::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: -18px;
|
||||
width: 44px;
|
||||
height: 15px;
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--accent-rgb), 0.34);
|
||||
filter: blur(8px);
|
||||
opacity: 0.65;
|
||||
animation: leadingGlow 1800ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
.progress-fill::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
|
||||
inset: -1px 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.54), transparent);
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
animation: sweep 1200ms ease-out;
|
||||
animation: spectralGlide 1500ms ease-out infinite;
|
||||
animation-delay: 180ms;
|
||||
}
|
||||
|
||||
.progress-fill.waiting::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -10px;
|
||||
width: 22px;
|
||||
height: 11px;
|
||||
.progress-fill.waiting {
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--primary-rgb), 0.7);
|
||||
filter: blur(5px);
|
||||
animation: waitingPulse 1300ms ease-in-out infinite;
|
||||
transition: none;
|
||||
animation: beamSweep 2500ms var(--ease-ambient) infinite;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.splash-shell,
|
||||
.brand-lockup,
|
||||
.brand-stage,
|
||||
.status-row,
|
||||
.logo-core,
|
||||
.status-dot,
|
||||
.progress-fill,
|
||||
.progress-fill::after,
|
||||
.progress-fill.waiting::before {
|
||||
.progress-fill::before,
|
||||
.progress-fill::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.progress-fill.waiting {
|
||||
left: 0 !important;
|
||||
width: 70% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shellIn {
|
||||
from {
|
||||
@keyframes windowAppear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(8px) scale(0.985);
|
||||
transform: scale(0.97) translateY(12px);
|
||||
}
|
||||
to {
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes contentIn {
|
||||
from {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sweep {
|
||||
@keyframes coreBreathe {
|
||||
0% {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03), 0 0 0 1px rgba(var(--accent-rgb), 0.08);
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 8px 30px var(--core-glow), 0 0 0 1px rgba(var(--accent-rgb), 0.20);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dotPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.38;
|
||||
transform: scale(0.84);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.18);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes leadingGlow {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.38;
|
||||
transform: scaleX(0.78);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.86;
|
||||
transform: scaleX(1.28);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spectralGlide {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
20%,
|
||||
70% {
|
||||
opacity: 1;
|
||||
22%,
|
||||
66% {
|
||||
opacity: 0.58;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
@@ -252,33 +412,41 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes waitingPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.32;
|
||||
transform: scaleX(0.8);
|
||||
@keyframes beamSweep {
|
||||
0% {
|
||||
left: -30%;
|
||||
width: 0%;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.92;
|
||||
transform: scaleX(1.45);
|
||||
left: 30%;
|
||||
width: 40%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="splash-shell" id="splash" role="status" aria-live="polite">
|
||||
<section class="brand-stage">
|
||||
<div class="brand-lockup">
|
||||
<div class="logo-tile" aria-hidden="true">
|
||||
<img class="logo" src="./logo.png" alt="">
|
||||
<section class="brand-stage" aria-label="WeFlow">
|
||||
<div class="logo-core" aria-hidden="true">
|
||||
<svg class="logo-mark" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path class="mark-base" d="M10 24C10 24 14 34 18 34C22 34 24 20 28 20C32 20 38 30 38 30" />
|
||||
<path d="M28 20C32 20 38 30 38 30" stroke="var(--logo-highlight)" opacity="0.82" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 class="app-name">WeFlow</h1>
|
||||
<p class="app-desc">微信聊天记录管理工具</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="status-row">
|
||||
<div class="progress-text" id="progressText">正在启动...</div>
|
||||
<div class="progress-text-wrap">
|
||||
<div class="status-dot" aria-hidden="true"></div>
|
||||
<div class="progress-text" id="progressText">正在预加载会话逻辑...</div>
|
||||
</div>
|
||||
<div class="version" id="versionText"></div>
|
||||
</div>
|
||||
|
||||
@@ -288,82 +456,45 @@
|
||||
</main>
|
||||
|
||||
<script>
|
||||
var themePalettes = {
|
||||
"cloud-dancer": {
|
||||
light: { primary: "#8B7355", rgb: "139, 115, 85", onPrimary: "#ffffff" },
|
||||
dark: { primary: "#C9A86C", rgb: "201, 168, 108", onPrimary: "#111111" }
|
||||
},
|
||||
"blossom-dream": {
|
||||
light: { primary: "#D4849A", rgb: "212, 132, 154", onPrimary: "#ffffff" },
|
||||
dark: { primary: "#D19EBB", rgb: "209, 158, 187", onPrimary: "#111111" }
|
||||
},
|
||||
"corundum-blue": {
|
||||
light: { primary: "#4A6670", rgb: "74, 102, 112", onPrimary: "#ffffff" },
|
||||
dark: { primary: "#6A9AAA", rgb: "106, 154, 170", onPrimary: "#111111" }
|
||||
},
|
||||
"kiwi-green": {
|
||||
light: { primary: "#7A9A5C", rgb: "122, 154, 92", onPrimary: "#ffffff" },
|
||||
dark: { primary: "#9ABA7C", rgb: "154, 186, 124", onPrimary: "#111111" }
|
||||
},
|
||||
"spicy-red": {
|
||||
light: { primary: "#8B4049", rgb: "139, 64, 73", onPrimary: "#ffffff" },
|
||||
dark: { primary: "#C06068", rgb: "192, 96, 104", onPrimary: "#ffffff" }
|
||||
},
|
||||
"teal-water": {
|
||||
light: { primary: "#5A8A8A", rgb: "90, 138, 138", onPrimary: "#ffffff" },
|
||||
dark: { primary: "#7ABAAA", rgb: "122, 186, 170", onPrimary: "#111111" }
|
||||
},
|
||||
"geist": {
|
||||
light: { primary: "#444444", rgb: "68, 68, 68", onPrimary: "#ffffff" },
|
||||
dark: { primary: "#ededed", rgb: "237, 237, 237", onPrimary: "#111111" }
|
||||
}
|
||||
};
|
||||
|
||||
function setVar(name, value) {
|
||||
document.documentElement.style.setProperty(name, value);
|
||||
}
|
||||
var themeModeQuery = null;
|
||||
var systemModeQuery = null;
|
||||
|
||||
function resolveMode(mode) {
|
||||
if (mode === "dark" || mode === "light") return mode;
|
||||
return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||
}
|
||||
|
||||
function applyTheme(themeId, mode) {
|
||||
var palette = themePalettes[themeId] || themePalettes["cloud-dancer"];
|
||||
var resolvedMode = resolveMode(mode);
|
||||
var accent = palette[resolvedMode] || palette.light;
|
||||
var isDark = resolvedMode === "dark";
|
||||
function syncSystemModeListener(mode) {
|
||||
if (!window.matchMedia) return;
|
||||
var nextQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
setVar("--primary", accent.primary);
|
||||
setVar("--primary-rgb", accent.rgb);
|
||||
setVar("--on-primary", accent.onPrimary);
|
||||
setVar("--window-bg", "transparent");
|
||||
|
||||
if (isDark) {
|
||||
setVar("--card-bg", "#1f1f1f");
|
||||
setVar("--card-bg-solid", "#1f1f1f");
|
||||
setVar("--card-border", "rgba(255, 255, 255, 0.08)");
|
||||
setVar("--text-primary", "#f1f1f1");
|
||||
setVar("--text-secondary", "#b8b8b8");
|
||||
setVar("--text-tertiary", "#858585");
|
||||
setVar("--track-bg", "rgba(255, 255, 255, 0.09)");
|
||||
setVar("--logo-surface", "#2b2b2b");
|
||||
setVar("--card-gloss-start", "rgba(255, 255, 255, 0.035)");
|
||||
setVar("--card-gloss-end", "rgba(255, 255, 255, 0)");
|
||||
setVar("--shadow", "none");
|
||||
} else {
|
||||
setVar("--card-bg", "#ffffff");
|
||||
setVar("--card-bg-solid", "#ffffff");
|
||||
setVar("--card-border", "rgba(0, 0, 0, 0.06)");
|
||||
setVar("--text-primary", "#171717");
|
||||
setVar("--text-secondary", "#6f6f6f");
|
||||
setVar("--text-tertiary", "#9a9a9a");
|
||||
setVar("--track-bg", "rgba(0, 0, 0, 0.06)");
|
||||
setVar("--logo-surface", "#f4f4f5");
|
||||
setVar("--card-gloss-start", "rgba(255, 255, 255, 0.62)");
|
||||
setVar("--card-gloss-end", "rgba(255, 255, 255, 0)");
|
||||
setVar("--shadow", "none");
|
||||
if (systemModeQuery && systemModeQuery !== nextQuery && systemModeQuery.removeEventListener) {
|
||||
systemModeQuery.removeEventListener("change", handleSystemModeChange);
|
||||
}
|
||||
|
||||
systemModeQuery = nextQuery;
|
||||
themeModeQuery = mode;
|
||||
|
||||
if (mode === "system" && nextQuery.addEventListener) {
|
||||
nextQuery.addEventListener("change", handleSystemModeChange);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSystemModeChange() {
|
||||
if (themeModeQuery === "system") {
|
||||
document.documentElement.setAttribute("data-mode", resolveMode("system"));
|
||||
}
|
||||
}
|
||||
|
||||
function applyTheme(themeId, mode) {
|
||||
var safeThemeId = String(themeId || "cloud-dancer");
|
||||
var safeMode = mode === "light" || mode === "dark" || mode === "system" ? mode : "system";
|
||||
var resolvedMode = resolveMode(safeMode);
|
||||
|
||||
document.documentElement.setAttribute("data-theme", safeThemeId);
|
||||
document.documentElement.setAttribute("data-theme-mode", safeMode);
|
||||
document.documentElement.setAttribute("data-mode", resolvedMode);
|
||||
syncSystemModeListener(safeMode);
|
||||
}
|
||||
|
||||
function updateProgress(percent, text, waiting) {
|
||||
@@ -372,14 +503,14 @@
|
||||
var safePercent = Math.max(0, Math.min(100, Number(percent) || 0));
|
||||
|
||||
if (fill) {
|
||||
fill.style.width = safePercent + "%";
|
||||
if (waiting) {
|
||||
fill.classList.add("waiting");
|
||||
fill.style.left = "";
|
||||
fill.style.width = "";
|
||||
} else {
|
||||
fill.classList.remove("waiting");
|
||||
fill.style.animation = "none";
|
||||
fill.offsetHeight;
|
||||
fill.style.animation = "";
|
||||
fill.style.left = "0";
|
||||
fill.style.width = safePercent + "%";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -393,7 +524,11 @@
|
||||
el.textContent = text ? "v" + text.replace(/^v/i, "") : "";
|
||||
}
|
||||
|
||||
applyTheme("cloud-dancer", "light");
|
||||
(function bootstrapSplash() {
|
||||
var params = new URLSearchParams(window.location.search || "");
|
||||
applyTheme(params.get("themeId") || "cloud-dancer", params.get("themeMode") || "system");
|
||||
updateProgress(0, "", false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user