dd38aeaf38
All checks were successful
Build and Deploy (tool.xpcool.com) / build-and-deploy (push) Successful in 1m10s
主色青玉改宝石蓝，字号整体放大一档（正文 16px）， 通过 --td-comp-* 与 --td-font-* 接管 TDesign 控件高度与文字， 修复 theme-mode 选择器权重不足导致深色变量被 UI 库覆盖的问题。
66 lines
2.6 KiB
HTML
66 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" theme-mode="light">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||
<meta
|
||
name="description"
|
||
content="纯前端在线工具箱：图片压缩与裁剪、二维码、JSON 格式化、时间戳、Base64、JWT、Cron、进制转换、哈希、身份证解析、OCR 等 56 个实用工具，支持中英日韩四种语言与日间夜间主题，数据全部在浏览器本地处理。"
|
||
/>
|
||
<meta name="theme-color" content="#f4f6fb" media="(prefers-color-scheme: light)" />
|
||
<meta name="theme-color" content="#0b0f18" media="(prefers-color-scheme: dark)" />
|
||
<title>在线工具箱 · Tool</title>
|
||
<!--
|
||
防闪烁（FOUC）内联脚本：必须在样式与模块加载之前同步执行。
|
||
1) 主题：TDesign 依赖 html[theme-mode] 属性，"auto" 或不合法值按系统偏好解析，
|
||
解析结果回写 theme-mode，保证首屏就是正确配色。
|
||
2) 语言：把 html[lang] 先设对，字体栈（见 tokens.scss）才不会先按中文渲染再跳变。
|
||
这段脚本与 src/stores/theme.ts、src/i18n/index.ts 中的读取逻辑保持一致，
|
||
改动存储 key 或取值规则时三处必须同步。
|
||
-->
|
||
<script>
|
||
;(function () {
|
||
var SUPPORTED = ['zh-CN', 'en-US', 'ja-JP', 'ko-KR']
|
||
|
||
function readStorage(key) {
|
||
try {
|
||
return localStorage.getItem(key)
|
||
} catch (e) {
|
||
return null
|
||
}
|
||
}
|
||
|
||
// ---- 主题 ----
|
||
var pref = readStorage('tool-theme')
|
||
var dark = false
|
||
try {
|
||
dark = !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
|
||
} catch (e) {
|
||
dark = false
|
||
}
|
||
var mode = pref === 'light' || pref === 'dark' ? pref : dark ? 'dark' : 'light'
|
||
document.documentElement.setAttribute('theme-mode', mode)
|
||
|
||
// ---- 语言 ----
|
||
var locale = readStorage('tool-locale')
|
||
if (SUPPORTED.indexOf(locale) === -1) {
|
||
var nav = (navigator.language || 'zh-CN').toLowerCase()
|
||
var primary = nav.split('-')[0]
|
||
locale = 'zh-CN'
|
||
for (var i = 0; i < SUPPORTED.length; i++) {
|
||
if (SUPPORTED[i].toLowerCase().split('-')[0] === primary) {
|
||
locale = SUPPORTED[i]
|
||
break
|
||
}
|
||
}
|
||
}
|
||
document.documentElement.setAttribute('lang', locale)
|
||
})()
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"></div>
|
||
<script type="module" src="/src/main.ts"></script>
|
||
</body>
|
||
</html>
|