feat(projects): support loading page dark mode adaptation. (#702)

This commit is contained in:
青菜白玉汤
2025-01-26 22:32:05 +08:00
committed by GitHub
parent 86da767e24
commit 9b9455d945
5 changed files with 15 additions and 5 deletions

View File

@ -3,14 +3,20 @@ import { getRgb } from '@sa/color';
import { $t } from '@/locales';
import { localStg } from '@/utils/storage';
import systemLogo from '@/assets/svg-icon/logo.svg?raw';
import { DARK_CLASS } from '@/constants/app';
import { toggleHtmlClass } from '@/utils/common';
export function setupLoading() {
const themeColor = localStg.get('themeColor') || '#646cff';
const darkMode = localStg.get('darkMode') || false;
const { r, g, b } = getRgb(themeColor);
const primaryColor = `--primary-color: ${r} ${g} ${b}`;
if (darkMode) {
toggleHtmlClass(DARK_CLASS).add();
}
const loadingClasses = [
'left-0 top-0',
'left-0 bottom-0 animate-delay-500',
@ -27,14 +33,14 @@ export function setupLoading() {
.join('\n');
const loading = `
<div class="fixed-center flex-col" style="${primaryColor}">
<div class="fixed-center flex-col bg-layout" style="${primaryColor}">
${logoWithClass}
<div class="w-56px h-56px my-36px">
<div class="relative h-full animate-spin">
${dot}
</div>
</div>
<h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>
<h2 class="text-28px font-500 text-primary">${$t('system.title')}</h2>
</div>`;
const app = document.getElementById('app');