fix(ui): dark mode

Author: ResetPower

src/components/TinyInput.tsx

@@ -10,7 +10,7 @@ const TinyInput = forwardRef(
     ref?: LegacyRef<HTMLInputElement>
   ) => (
     <input
-      className="border-b border-blue-500 focus:outline-none"
+      className="border-b border-blue-500 dark:bg-gray-800 focus:outline-none"
       defaultValue={props.initialValue}
       onKeyDown={(e) => {
         if (e.key === "Enter") props.onSubmit(e.currentTarget.value);

src/intl/root.ts

@@ -11,6 +11,8 @@ export default {
       preparing: "Preparing",
       waiting: "Waiting to Launch",
     },
+    install: "Install",
+    official: "Official",
     downloading: {
       lib: "Downloading Libraries",
       asset: "Downloading Assets",
@@ -105,6 +107,14 @@ export default {
       githubHomepage: "GitHub Homepage",
       downloadProvider: "Download Provider",
       oss: "Open Source Software",
+      theme: "Theme",
+      os: "Operating System",
+      themes: {
+        followOs: "Follow OS",
+        light: "Light",
+        dark: "Dark",
+      },
+      autoCollapse: "Automatically Collapse Sidebar",
     },
     toast: {
       copied: "Copied successfully.",

src/intl/zh-cn.ts

@@ -4,21 +4,21 @@ export default {
   messages: {
     counter: {
       increase: "增加",
-      clicked: (count: number) => 
-        `你已经点击这个按钮 ${count} 次。`,
+      clicked: (count: number) => `你已经点击这个按钮 ${count} 次。`,
     },
     launching: {
       preparing: "准备中",
       waiting: "等待游戏启动中",
     },
+    install: "安装",
+    official: "官方",
     downloading: {
       lib: "正在下载游戏库",
       asset: "正在下载游戏资源",
       clientJar: "正在下载客户端 jar 文件",
       clientJson: "正在下载客户端 json 文件",
       minecraft: {
-        success: (version: string) =>
-          `Minecraft ${version} 安装成功。`,
+        success: (version: string) => `Minecraft ${version} 安装成功。`,
         failed: (version: string) => `Minecraft ${version} 下载失败。`,
       },
     },
@@ -59,8 +59,7 @@ export default {
       offline: "离线登录",
       authserver: "验证服务器",
       type: "账户类型",
-      removeConfirmation: (name: string) =>
-        `是否要移除账户 ${name} ？`,
+      removeConfirmation: (name: string) => `是否要移除账户 ${name} ？`,
       token: {
         validate: "检查令牌状态",
         available: "令牌可用",
@@ -73,11 +72,9 @@ export default {
       gameDirHelper:
         "通常是 Windows 或 Linux 上的 '.minecraft' 文件夹和 macOS 上的 'minecraft' 文件夹。",
       version: "版本",
-      versionHelper: 
-        "游戏文件夹中的 'versions' 文件夹中的文件夹名。",
+      versionHelper: "游戏文件夹中的 'versions' 文件夹中的文件夹名。",
       unopened: "在左侧打开一个实例或者创建新实例。",
-      removeConfirmation: (name: string) => 
-        `是否要移除实例 ${name} ？`,
+      removeConfirmation: (name: string) => `是否要移除实例 ${name} ？`,
       release: "正式版",
       snapshot: "快照",
       old: "远古版",
@@ -105,6 +102,14 @@ export default {
       githubHomepage: "GitHub 首页",
       downloadProvider: "下载源",
       oss: "开源软件",
+      theme: "主题",
+      os: "操作系统",
+      themes: {
+        followOs: "跟随操作系统",
+        light: "浅色主题",
+        dark: "深色主题",
+      },
+      autoCollapse: "自动收起侧边栏",
     },
     toast: {
       copied: "已成功复制。",

src/intl/zh-fs.ts

@@ -11,6 +11,8 @@ export default {
       preparing: "预备发射",
       waiting: "请等待发射开始",
     },
+    install: "安设",
+    official: "负责人的",
     downloading: {
       lib: "向下加载图书馆",
       asset: "向下加载资产",
@@ -19,7 +21,8 @@ export default {
       minecraft: {
         success: (version: string) =>
           `非常好下载源，使您对 Minecraft ${version} 的安设成功。`,
-        failed: (version: string) => `非常坏下载源，使您对于 Minecraft ${version} 的安设成功。`,
+        failed: (version: string) =>
+          `非常坏下载源，使您对于 Minecraft ${version} 的安设成功。`,
       },
     },
     installs: {
@@ -59,8 +62,7 @@ export default {
       offline: "脱机",
       authserver: "身份验证服务器",
       type: "打字",
-      removeConfirmation: (name: string) => 
-        `您真的想要除掉帐单 ${name} 吗？`,
+      removeConfirmation: (name: string) => `您真的想要除掉帐单 ${name} 吗？`,
       token: {
         validate: "查询令牌状态",
         available: "令牌是可以使用的。",
@@ -73,8 +75,7 @@ export default {
       gameDirHelper:
         "通常在 Windows 或 Linux 为 '.minecraft' 目录，在 macOS 为 'minecraft' 目录。",
       version: "版本",
-      versionHelper: 
-        "文件夹名称在 'versions' 文件夹在您的游戏目录中。",
+      versionHelper: "文件夹名称在 'versions' 文件夹在您的游戏目录中。",
       unopened: "在左侧选择你曾经举过的例子或者创造一个新的例子。",
       removeConfirmation: (name: string) =>
         `您真的想要除掉您的举例 ${name} 吗？`,
@@ -105,6 +106,14 @@ export default {
       githubHomepage: "版本控制系统枢纽 首页",
       downloadProvider: "向下加载提供商",
       oss: "开放源代码软件",
+      theme: "主旋律",
+      os: "运转制度",
+      themes: {
+        followOs: "跟踪运转制度",
+        light: "光线",
+        dark: "黑暗",
+      },
+      autoCollapse: "自动崩溃的一旁的酒吧",
     },
     toast: {
       copied: "复制是成功的。",

src/pages/instances/VersionDetail.tsx

@@ -65,7 +65,7 @@ export default function VersionDetail(props: {
       <div className="flex space-x-3 justify-end">
         <Button onClick={browse}>{t.browse}</Button>
         <Button disabled={!!helper} onClick={install} primary>
-          Install
+          {t.install}
         </Button>
       </div>
       <Shallow className="text-sm font-medium">{helper}</Shallow>

src/pages/settings/AboutFragment.tsx

@@ -13,7 +13,7 @@ export default function AboutFragment() {
         <MdWarning className="text-xl text-red-500 dark:text-red-300" />
         <pre className="text-sm">{t.settings.warning}</pre>
       </div>
-      <Info name="Operating System">
+      <Info name={t.settings.os}>
         {meta.osPlatform}-{meta.osVersion}
       </Info>
       <Info name={t.settings.tauriVersion}>{meta.tauriVersion}</Info>

src/pages/settings/AppearanceFragment.tsx

@@ -3,19 +3,24 @@ import Info from "../../components/Info";
 import Select from "../../components/Select";
 import { cfg } from "../../stores/config";
 import { Theme, themeStore } from "../../stores/theme";
+import { t } from "../../intl";
 
 export default function AppearanceFragment() {
   const [theme, setTheme] = useState(cfg.theme);
 
   return (
     <div className="p-3">
-      <Info name="Color Theme">
+      <Info name={t.settings.theme}>
         <Select
-          options={{ follow: "Follow OS", light: "Light", dark: "Dark" }}
+          options={{
+            follow: t.settings.themes.followOs,
+            light: t.settings.themes.light,
+            dark: t.settings.themes.dark,
+          }}
           value={theme}
           onChange={(newValue) => {
-            setTheme(newValue as Theme);
             themeStore.updateTheme(newValue as Theme);
+            setTheme(newValue as Theme);
           }}
         />
       </Info>

src/pages/settings/DownloadFragment.tsx

@@ -13,7 +13,7 @@ export default function DownloadFragment() {
           onChange={(newValue) => {
             cfg.downloadProvider = newValue as MinecraftDownloadProvider;
           }}
-          options={{ official: "Official", bmclapi: "BMCLAPI", mcbbs: "MCBBS" }}
+          options={{ official: t.official, bmclapi: "BMCLAPI", mcbbs: "MCBBS" }}
         ></Select>
       </Info>
     </div>

src/pages/settings/GeneralFragment.tsx

@@ -26,7 +26,7 @@ export default function GeneralFragment() {
           cfg.autoCollapse = newValue;
         }}
       >
-        Automatically Collapse Sidebar
+        {t.settings.autoCollapse}
       </Checkbox>
     </div>
   );

src/stores/theme.ts

@@ -17,6 +17,7 @@ class ThemeStore {
   }
   updateTheme(theme: Theme) {
     this.theme = theme;
+    cfg.theme = theme;
     this.loadTheme();
   }
 }