fix: better toggle twemoji implementation

This commit is contained in:
kunish 2023-09-05 12:18:32 +08:00
parent 092aa41972
commit 13abde7a9d
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
5 changed files with 13 additions and 23 deletions

View File

@ -1,5 +1,6 @@
import { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
import { Show, createEffect, lazy, onMount } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { Header } from '~/components'
import { ROUTES } from '~/constants'
import {
@ -30,20 +31,6 @@ export const App = () => {
if (selectedEndpoint() && endpoint()) {
void useProxies().updateProxies()
}
const rootElement = document.querySelector(':root') as HTMLElement
if (useTwemoji()) {
rootElement.style.setProperty(
'font-family',
"'Fira Sans', 'Twemoji Mozilla', system-ui, monospace",
)
} else {
rootElement.style.setProperty(
'font-family',
"'Fira Sans', system-ui, monospace",
)
}
})
onMount(() => {
@ -54,7 +41,10 @@ export const App = () => {
return (
<div
class="relative flex h-screen flex-col subpixel-antialiased p-safe"
class={twMerge(
'relative flex h-screen flex-col subpixel-antialiased p-safe',
useTwemoji() ? 'font-twemoji' : 'font-no-twemoji',
)}
data-theme={curTheme()}
>
<Header />

View File

@ -42,7 +42,7 @@ export default {
proxiesPreviewType: '节点组预览样式',
urlForLatencyTest: '测速链接',
autoCloseConns: '切换代理时自动断开全部连接',
useTwemoji: '使用Twemoji Mozilla字体',
useTwemoji: '使用 Twemoji Mozilla 字体',
autoSwitchTheme: '自动切换主题',
favDayTheme: '浅色主题偏好',
favNightTheme: '深色主题偏好',

View File

@ -10,12 +10,6 @@
src: url('assets/Twemoji.Mozilla.ttf') format('truetype');
}
:root,
[data-theme='wireframe'],
[data-theme='cyberpunk'] {
font-family: 'Fira Sans', 'Twemoji Mozilla', system-ui, monospace;
}
::-webkit-scrollbar {
display: none;
}

View File

@ -24,7 +24,7 @@ export const [autoCloseConns, setAutoCloseConns] = makePersisted(
createSignal(false),
{ name: 'autoCloseConns', storage: localStorage },
)
export const [useTwemoji, setTwemoji] = makePersisted(createSignal(false), {
export const [useTwemoji, setTwemoji] = makePersisted(createSignal(true), {
name: 'useTwemoji',
storage: localStorage,
})

View File

@ -8,4 +8,10 @@ export default {
content: ['./src/**/*.{css,tsx}'],
plugins: [daisyui, safeArea],
daisyui: { themes: true },
theme: {
fontFamily: {
twemoji: ['Fira Sans', 'Twemoji Mozilla', 'system-ui', 'monospace'],
'no-twemoji': ['Fira Sans', 'system-ui', 'monospace'],
},
},
} as Config