fix: better toggle twemoji implementation

MetaCubeX · Sep 5, 2023 · 13abde7 · 13abde7
1 parent 092aa41
commit 13abde7
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 23 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -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 />

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

diff --git a/src/index.css b/src/index.css
@@ -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;
 }
diff --git a/src/signals/config.ts b/src/signals/config.ts
@@ -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,
 })

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -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