i18n

apps/app/public/static/locales/en_US/translation.json

@@ -255,6 +255,11 @@
       "settings": "Sidebar mode settings",
       "side_bar_mode_setting": "Set the sidebar mode",
       "description": "You can set whether or not the sidebar will always be open when the screen width is large. If the screen width is small, the sidebar will always be closed."
+    },
+    "color_mode": {
+      "settings": "Color mode settings",
+      "use_os_settings": "Use OS settings",
+      "description": "Select a color mode"
     }
   },
   "editor_settings": {

apps/app/public/static/locales/ja_JP/translation.json

@@ -256,6 +256,11 @@
       "settings": "サイドバーモードの設定",
       "side_bar_mode_setting": "サイドバーのモードを設定する",
       "description": "画面幅が大きい場合に、サイドバーを常時開いた状態にするかどうかを設定できます。画面幅が小さい場合はサイドバーは常に閉じた状態となります。"
+    },
+    "color_mode": {
+      "settings": "カラーモードの設定",
+      "use_os_settings": "OS設定を利用する",
+      "description": "カラーモードを選択する"
     }
   },
   "editor_settings": {

apps/app/public/static/locales/zh_CN/translation.json

@@ -246,6 +246,11 @@
       "settings": "侧边栏模式设置",
       "side_bar_mode_setting": "设置侧边栏模式",
       "description": "您可以设置当屏幕宽度较大时，侧边栏是否始终打开。 如果屏幕宽度较小，侧边栏将始终关闭。"
+    },
+    "color_mode": {
+      "settings": "色彩模式设置",
+      "use_os_settings": "使用操作系统设置",
+      "description": "选择颜色模式"
     }
   },
   "editor_settings": {

apps/app/src/components/Me/ColorModeSettings.tsx

@@ -7,7 +7,7 @@ import { Themes, useNextThemes } from '~/stores/use-next-themes';
 import { IconWithTooltip } from './IconWIthTooltip';
 
 export const ColorModeSettings = (): JSX.Element => {
-  const { t } = useTranslation('commons');
+  const { t } = useTranslation();
 
   const {
     setTheme, resolvedTheme, useOsSettings, isDarkMode,
@@ -28,7 +28,7 @@ export const ColorModeSettings = (): JSX.Element => {
 
   return (
     <>
-      <h2 className="border-bottom mb-4">{t('personal_dropdown.color_mode')}</h2>
+      <h2 className="border-bottom mb-4">{t('ui_settings.color_mode.settings')}</h2>
 
       <form className="row justify-content-center">
 
@@ -53,7 +53,7 @@ export const ColorModeSettings = (): JSX.Element => {
             </IconWithTooltip>
 
             <label className="form-label form-check-label ms-2 mt-2" htmlFor="swUserPreference">
-              カラーモードを選択する
+              {t('ui_settings.color_mode.description')}
             </label>
           </div>
 
@@ -65,7 +65,7 @@ export const ColorModeSettings = (): JSX.Element => {
               checked={useOsSettings}
               onChange={e => followOsCheckboxModifiedHandler(e.target.checked)}
             />
-            <label className="form-label form-check-label text-nowrap" htmlFor="cbFollowOs">{t('personal_dropdown.use_os_settings')}</label>
+            <label className="form-label form-check-label text-nowrap" htmlFor="cbFollowOs">{t('ui_settings.color_mode.use_os_settings')}</label>
           </div>
         </div>
       </form>