aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-07-06 21:22:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: implement dark mode

Browse Source
This commit is contained in:
Steven
2023-09-23 01:09:45 +08:00
parent 07e0bb2d4c
commit 3488cd04c0
28 changed files with 286 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/web/src/components/setting/PreferenceSection.tsx
View File

@ -13,31 +13,31 @@ const PreferenceSection: React.FC = () => {
const languageOptions = [
{
value: "LOCALE_EN",
value: UserSetting_Locale.LOCALE_EN,
label: "English",
},
{
value: "LOCALE_ZH",
value: UserSetting_Locale.LOCALE_ZH,
label: "中文",
},
];
const colorThemeOptions = [
{
value: "COLOR_THEME_LIGHT",
value: UserSetting_ColorTheme.COLOR_THEME_SYSTEM,
label: "System",
},
{
value: UserSetting_ColorTheme.COLOR_THEME_LIGHT,
label: "Light",
},
{
value: "COLOR_THEME_DARK",
value: UserSetting_ColorTheme.COLOR_THEME_DARK,
label: "Dark",
},
];
const handleSelectLanguage = async (locale: UserSetting_Locale) => {
if (!locale) {
return;
}
await userStore.updateUserSetting(
{
...userSetting,
@ -48,10 +48,6 @@ const PreferenceSection: React.FC = () => {
};
const handleSelectColorTheme = async (colorTheme: UserSetting_ColorTheme) => {
if (!colorTheme) {
return;
}
await userStore.updateUserSetting(
{
...userSetting,
@ -64,10 +60,10 @@ const PreferenceSection: React.FC = () => {
return (
<>
<div className="w-full flex flex-col justify-start items-start gap-y-2">
<p className="text-base font-semibold leading-6 text-gray-900">Preference</p>
<p className="text-base font-semibold leading-6 text-gray-900 dark:text-gray-500">Preference</p>
<div className="w-full flex flex-row justify-between items-center">
<div className="flex flex-row justify-start items-center gap-x-1">
<span>{t("common.language")}</span>
<span className="dark:text-gray-400">{t("common.language")}</span>
<BetaBadge />
</div>
<Select defaultValue={language} onChange={(_, value) => handleSelectLanguage(value as UserSetting_Locale)}>
@ -82,7 +78,7 @@ const PreferenceSection: React.FC = () => {
</div>
<div className="w-full flex flex-row justify-between items-center">
<div className="flex flex-row justify-start items-center gap-x-1">
<span>Color Theme</span>
<span className="dark:text-gray-400">Color Theme</span>
<BetaBadge />
</div>
<Select defaultValue={colorTheme} onChange={(_, value) => handleSelectColorTheme(value as UserSetting_ColorTheme)}>