From 13abde7a9d62874dcab75de0cbba58b7285257a7 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Tue, 5 Sep 2023 12:18:32 +0800
Subject: [PATCH] fix: better toggle twemoji implementation

---
 src/App.tsx           | 20 +++++---------------
 src/i18n/zh.ts        |  2 +-
 src/index.css         |  6 ------
 src/signals/config.ts |  2 +-
 tailwind.config.ts    |  6 ++++++
 5 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index df932e2..8d1e2fa 100644
--- 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
index 5bb51fe..b958a50 100644
--- 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
index cdea20e..4b50687 100644
--- 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
index 651fd64..d0818d0 100644
--- 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
index b0d3191..ec836bb 100644
--- 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