From a4e77d1b2363736f8b10e03864654b8da448a827 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 18 Sep 2024 02:06:24 +0800
Subject: [PATCH] feat: adjust fonts by selected language

---
 .../views/necessarySettingsWatchers.ts        | 20 ++++++++++--
 src/styles/fonts.scss                         | 31 +++++++++++++++++++
 src/styles/index.ts                           |  1 +
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/fonts.scss

diff --git a/src/contentScripts/views/necessarySettingsWatchers.ts b/src/contentScripts/views/necessarySettingsWatchers.ts
index a7a52bb8..044a22e3 100644
--- a/src/contentScripts/views/necessarySettingsWatchers.ts
+++ b/src/contentScripts/views/necessarySettingsWatchers.ts
@@ -19,9 +19,12 @@ export function setupNecessarySettingsWatchers() {
           // Since getUILanguage() cannot get the zh-HK language code
           // use getAcceptLanguages() to get the language code
           const languages: string[] = await browser.i18n.getAcceptLanguages()
-          if (languages.includes('zh-HK'))
+          if (languages.includes('zh-HK')) {
             settings.value.language = LanguageType.Cantonese
-          else settings.value.language = LanguageType.Mandarin_TW
+          }
+          else {
+            settings.value.language = LanguageType.Mandarin_TW
+          }
         }
         else {
           settings.value.language = LanguageType.English
@@ -29,6 +32,19 @@ export function setupNecessarySettingsWatchers() {
       }
 
       locale.value = settings.value.language
+
+      if (locale.value === LanguageType.Mandarin_CN) {
+        document.documentElement.lang = 'zh-CN'
+      }
+      else if (locale.value === LanguageType.Mandarin_TW) {
+        document.documentElement.lang = 'zh-TW'
+      }
+      else if (locale.value === LanguageType.Cantonese) {
+        document.documentElement.lang = 'zh-HK'
+      }
+      else {
+        document.documentElement.lang = 'en'
+      }
     },
     { immediate: true },
   )
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
new file mode 100644
index 00000000..af79ba4c
--- /dev/null
+++ b/src/styles/fonts.scss
@@ -0,0 +1,31 @@
+:root,
+:host {
+  --bew-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Roboto Flex", Roboto, Arial, Oxygen, Ubuntu,
+    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+.bewly-wrapper,
+.bewly-design * {
+  font-family: var(--bew-fonts) !important;
+}
+
+:lang(zh-CN) {
+  .bewly-wrapper,
+  .bewly-design * {
+    font-family: var(--bew-fonts), "PingFang SC", "Source Han Sans SC VF", "Noto Sans CJK SC", "Source Han Sans SC" !important;
+  }
+}
+
+:lang(zh-TW) {
+  .bewly-wrapper,
+  .bewly-design * {
+    font-family: var(--bew-fonts), "PingFang TC", "Source Han Sans TC VF", "Noto Sans CJK TC", "Source Han Sans TC" !important;
+  }
+}
+
+:lang(zh-HK) {
+  .bewly-wrapper,
+  .bewly-design * {
+    font-family: var(--bew-fonts), "PingFang HK", "Source Han Sans HC VF", "Noto Sans CJK HK", "Source Han Sans HC" !important;
+  }
+}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 5f93a5ae..c90dfa9a 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -7,3 +7,4 @@ import './adaptedStyles'
 import './transitionAndTransitionGroup.scss'
 import './blockAds.scss'
 import './removeBiliTopBar.scss'
+import './fonts.scss'