diff --git a/api/v2/user_setting_service.go b/api/v2/user_setting_service.go index 1a320ed..1101f7f 100644 --- a/api/v2/user_setting_service.go +++ b/api/v2/user_setting_service.go @@ -87,7 +87,7 @@ func getUserSetting(ctx context.Context, s *store.Store, userID int32) (*apiv2pb userSetting := &apiv2pb.UserSetting{ Id: userID, Locale: apiv2pb.UserSetting_LOCALE_EN, - ColorTheme: apiv2pb.UserSetting_COLOR_THEME_LIGHT, + ColorTheme: apiv2pb.UserSetting_COLOR_THEME_SYSTEM, } for _, setting := range userSettings { if setting.Key == storepb.UserSettingKey_USER_SETTING_LOCALE { @@ -123,6 +123,8 @@ func convertUserSettingLocaleFromStore(locale storepb.LocaleUserSetting) apiv2pb func convertUserSettingColorThemeToStore(colorTheme apiv2pb.UserSetting_ColorTheme) storepb.ColorThemeUserSetting { switch colorTheme { + case apiv2pb.UserSetting_COLOR_THEME_SYSTEM: + return storepb.ColorThemeUserSetting_COLOR_THEME_USER_SETTING_SYSTEM case apiv2pb.UserSetting_COLOR_THEME_LIGHT: return storepb.ColorThemeUserSetting_COLOR_THEME_USER_SETTING_LIGHT case apiv2pb.UserSetting_COLOR_THEME_DARK: @@ -134,6 +136,8 @@ func convertUserSettingColorThemeToStore(colorTheme apiv2pb.UserSetting_ColorThe func convertUserSettingColorThemeFromStore(colorTheme storepb.ColorThemeUserSetting) apiv2pb.UserSetting_ColorTheme { switch colorTheme { + case storepb.ColorThemeUserSetting_COLOR_THEME_USER_SETTING_SYSTEM: + return apiv2pb.UserSetting_COLOR_THEME_SYSTEM case storepb.ColorThemeUserSetting_COLOR_THEME_USER_SETTING_LIGHT: return apiv2pb.UserSetting_COLOR_THEME_LIGHT case storepb.ColorThemeUserSetting_COLOR_THEME_USER_SETTING_DARK: diff --git a/frontend/web/src/App.tsx b/frontend/web/src/App.tsx index d7b9f70..b4af62d 100644 --- a/frontend/web/src/App.tsx +++ b/frontend/web/src/App.tsx @@ -1,3 +1,4 @@ +import { useColorScheme } from "@mui/joy"; import { useEffect, useState } from "react"; import { Outlet } from "react-router-dom"; import DemoBanner from "./components/DemoBanner"; @@ -7,6 +8,7 @@ import useUserStore from "./stores/v1/user"; import { WorkspaceSetting } from "./types/proto/api/v2/workspace_service"; function App() { + const { mode } = useColorScheme(); const userStore = useUserStore(); const [workspaceSetting, setWorkspaceSetting] = useState(WorkspaceSetting.fromPartial({})); const [loading, setLoading] = useState(true); @@ -47,6 +49,39 @@ function App() { document.body.insertAdjacentElement("beforeend", styleEl); }, [workspaceSetting.customStyle]); + useEffect(() => { + const root = document.documentElement; + if (mode === "light") { + root.classList.remove("dark"); + } else if (mode === "dark") { + root.classList.add("dark"); + } else { + const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); + if (darkMediaQuery.matches) { + root.classList.add("dark"); + } else { + root.classList.remove("dark"); + } + + const handleColorSchemeChange = (e: MediaQueryListEvent) => { + if (e.matches) { + root.classList.add("dark"); + } else { + root.classList.remove("dark"); + } + }; + try { + darkMediaQuery.addEventListener("change", handleColorSchemeChange); + } catch (error) { + console.error("failed to initial color scheme listener", error); + } + + return () => { + darkMediaQuery.removeEventListener("change", handleColorSchemeChange); + }; + } + }, [mode]); + return !loading ? ( <> diff --git a/frontend/web/src/components/AnalyticsView.tsx b/frontend/web/src/components/AnalyticsView.tsx index e433bfa..8d15a6c 100644 --- a/frontend/web/src/components/AnalyticsView.tsx +++ b/frontend/web/src/components/AnalyticsView.tsx @@ -26,17 +26,17 @@ const AnalyticsView: React.FC = (props: Props) => { {analytics ? ( <>
-

{t("analytics.top-sources")}

-
-
+

{t("analytics.top-sources")}

+
+
{t("analytics.source")} {t("analytics.visitors")}
-
+
{analytics.referenceData.map((reference) => (
- + {reference.name ? ( {reference.name} @@ -55,24 +55,24 @@ const AnalyticsView: React.FC = (props: Props) => {
- {t("analytics.devices")} + {t("analytics.devices")}
- / + /
-
+
{selectedDeviceTab === "browser" ? ( -
+
{t("analytics.browsers")} {t("analytics.visitors")}
-
+
{analytics.browserData.map((reference) => (
- {reference.name || "Unknown"} + + {reference.name || "Unknown"} + {reference.count}
))} diff --git a/frontend/web/src/components/BetaBadge.tsx b/frontend/web/src/components/BetaBadge.tsx index babef78..918e963 100644 --- a/frontend/web/src/components/BetaBadge.tsx +++ b/frontend/web/src/components/BetaBadge.tsx @@ -1,6 +1,6 @@ const BetaBadge = () => { return ( -
+
Beta
); diff --git a/frontend/web/src/components/CreateShortcutDialog.tsx b/frontend/web/src/components/CreateShortcutDialog.tsx index 93858ef..1360341 100644 --- a/frontend/web/src/components/CreateShortcutDialog.tsx +++ b/frontend/web/src/components/CreateShortcutDialog.tsx @@ -230,16 +230,16 @@ const CreateShortcutDialog: React.FC = (props: Props) => { ))}
-

+

{t(`shortcut.visibility.${state.shortcutCreate.visibility.toLowerCase()}.description`)}

Optional -
+
setShowAdditionalFields(!showAdditionalFields)} > @@ -275,11 +275,12 @@ const CreateShortcutDialog: React.FC = (props: Props) => {
)}
-
+
setShowOpenGraphMetadata(!showOpenGraphMetadata)} > diff --git a/frontend/web/src/components/ShortcutActionsDropdown.tsx b/frontend/web/src/components/ShortcutActionsDropdown.tsx index 914369a..d262fcf 100644 --- a/frontend/web/src/components/ShortcutActionsDropdown.tsx +++ b/frontend/web/src/components/ShortcutActionsDropdown.tsx @@ -40,32 +40,32 @@ const ShortcutActionsDropdown = (props: Props) => { return ( <> {havePermission && ( )} {havePermission && (
- + {shortcut.link}
@@ -96,7 +104,7 @@ const ShortcutView = (props: Props) => { return ( viewStore.setFilter({ tag: tag })} > #{tag} @@ -107,14 +115,14 @@ const ShortcutView = (props: Props) => {
-
+
{shortcut.creator.nickname}
viewStore.setFilter({ visibility: shortcut.visibility })} > @@ -124,7 +132,7 @@ const ShortcutView = (props: Props) => { {shortcut.view} visits diff --git a/frontend/web/src/components/ShortcutView.tsx b/frontend/web/src/components/ShortcutView.tsx index 9c2fdc1..d88e525 100644 --- a/frontend/web/src/components/ShortcutView.tsx +++ b/frontend/web/src/components/ShortcutView.tsx @@ -28,7 +28,7 @@ const ShortcutView = (props: Props) => { <>
@@ -55,8 +55,8 @@ const ShortcutView = (props: Props) => { (s/{shortcut.name}) ) : ( <> - s/ - {shortcut.name} + s/ + {shortcut.name} )}
diff --git a/frontend/web/src/components/setting/AccessTokenSection.tsx b/frontend/web/src/components/setting/AccessTokenSection.tsx index 0b0fc49..88ea126 100644 --- a/frontend/web/src/components/setting/AccessTokenSection.tsx +++ b/frontend/web/src/components/setting/AccessTokenSection.tsx @@ -64,8 +64,8 @@ const AccessTokenSection = () => {
-

Access Tokens

-

A list of all access tokens for your account.

+

Access Tokens

+

A list of all access tokens for your account.