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 { Navigate, Route, Routes, useNavigate } from '@solidjs/router'
import { Show, createEffect, lazy, onMount } from 'solid-js' import { Show, createEffect, lazy, onMount } from 'solid-js'
import { twMerge } from 'tailwind-merge'
import { Header } from '~/components' import { Header } from '~/components'
import { ROUTES } from '~/constants' import { ROUTES } from '~/constants'
import { import {
@ -30,20 +31,6 @@ export const App = () => {
if (selectedEndpoint() && endpoint()) { if (selectedEndpoint() && endpoint()) {
void useProxies().updateProxies() 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(() => { onMount(() => {
@ -54,7 +41,10 @@ export const App = () => {
return ( return (
<div <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()} data-theme={curTheme()}
> >
<Header /> <Header />

View File

@ -10,12 +10,6 @@
src: url('assets/Twemoji.Mozilla.ttf') format('truetype'); 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 { ::-webkit-scrollbar {
display: none; display: none;
} }

View File

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

View File

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