From 482674b83b0e1d2488523d347ae26e57b36d6c08 Mon Sep 17 00:00:00 2001 From: FaberVitale Date: Sat, 30 Oct 2021 18:31:01 +0200 Subject: [PATCH] feat(app): add theme color dropdown --- extension/src/app/containers/App.tsx | 4 +++- .../redux-devtools-app/src/actions/index.ts | 22 +++++++++++++++--- .../src/components/Settings/Themes.tsx | 13 ++++++++--- .../redux-devtools-app/src/reducers/theme.ts | 23 +++++++++++++++---- 4 files changed, 50 insertions(+), 12 deletions(-) diff --git a/extension/src/app/containers/App.tsx b/extension/src/app/containers/App.tsx index e9b46b87..e19dddb3 100644 --- a/extension/src/app/containers/App.tsx +++ b/extension/src/app/containers/App.tsx @@ -62,10 +62,12 @@ class App extends Component { function mapStateToProps(state: StoreState) { const instances = state.instances; const id = getActiveInstance(instances); + const { themeColorPreference, ...themeData } = state.theme; + return { options: instances.options[id], section: state.section, - theme: state.theme, + theme: themeData, notification: state.notification, }; } diff --git a/packages/redux-devtools-app/src/actions/index.ts b/packages/redux-devtools-app/src/actions/index.ts index 663f132e..67733714 100644 --- a/packages/redux-devtools-app/src/actions/index.ts +++ b/packages/redux-devtools-app/src/actions/index.ts @@ -48,6 +48,7 @@ import { MonitorStateMonitorState } from '../reducers/monitor'; import { LiftedAction, LiftedState } from '@redux-devtools/core'; import { Data } from '../reducers/reports'; import { prefersDarkColorScheme } from '../utils/media-queries'; +import { ThemeColorPreference } from '../reducers/theme'; let monitorReducer: ( monitorProps: unknown, @@ -67,9 +68,9 @@ export function changeSection(section: string): ChangeSectionAction { interface ChangeThemeFormData { readonly theme: Theme; readonly scheme: Scheme; - readonly dark: boolean; + readonly themeColorPreference: ThemeColorPreference; } -interface ChangeThemeData { +export interface ChangeThemeData { readonly formData: ChangeThemeFormData; } export interface ChangeThemeAction { @@ -77,6 +78,7 @@ export interface ChangeThemeAction { readonly theme: Theme; readonly scheme: Scheme; readonly dark: boolean; + readonly themeColorPreference: ThemeColorPreference; } export interface ApplyMediaFeaturesPreferencesAction { @@ -85,7 +87,21 @@ export interface ApplyMediaFeaturesPreferencesAction { } export function changeTheme(data: ChangeThemeData): ChangeThemeAction { - return { type: CHANGE_THEME, ...data.formData }; + const { themeColorPreference } = data.formData; + let dark: boolean; + + switch (themeColorPreference) { + case 'light': + dark = false; + break; + case 'dark': + dark = true; + break; + default: + dark = prefersDarkColorScheme(); + } + + return { type: CHANGE_THEME, ...data.formData, dark }; } /** diff --git a/packages/redux-devtools-app/src/components/Settings/Themes.tsx b/packages/redux-devtools-app/src/components/Settings/Themes.tsx index 326a22b3..5854b53a 100644 --- a/packages/redux-devtools-app/src/components/Settings/Themes.tsx +++ b/packages/redux-devtools-app/src/components/Settings/Themes.tsx @@ -4,6 +4,10 @@ import { Container, Form } from '@redux-devtools/ui'; import { listSchemes, listThemes } from '@redux-devtools/ui/lib/utils/theme'; import { changeTheme } from '../../actions'; import { StoreState } from '../../reducers'; +import { + defaultThemeColorPreference, + themeColorPreferences, +} from '../../reducers/theme'; type StateProps = ReturnType; type DispatchProps = ResolveThunks; @@ -15,7 +19,8 @@ export class Themes extends Component { const formData = { theme: theme.theme, scheme: theme.scheme, - dark: !theme.light, + themeColorPreference: + theme.themeColorPreference ?? defaultThemeColorPreference, }; return ( @@ -33,8 +38,10 @@ export class Themes extends Component { type: 'string', enum: listSchemes(), }, - dark: { - type: 'boolean', + themeColorPreference: { + title: 'theme color', + type: 'string', + enum: themeColorPreferences as unknown as string[], }, }, }} diff --git a/packages/redux-devtools-app/src/reducers/theme.ts b/packages/redux-devtools-app/src/reducers/theme.ts index bb3aa8a9..6148f277 100644 --- a/packages/redux-devtools-app/src/reducers/theme.ts +++ b/packages/redux-devtools-app/src/reducers/theme.ts @@ -1,15 +1,25 @@ -import { Scheme, Theme } from '@redux-devtools/ui'; +import { Theme, Scheme } from '@redux-devtools/ui'; import { CHANGE_THEME, APPLY_MEDIA_FEATURES_PREFERENCES, } from '../constants/actionTypes'; import { StoreAction } from '../actions'; +export const defaultThemeColorPreference = 'default'; + +export const themeColorPreferences = [ + defaultThemeColorPreference, + 'light', + 'dark', +] as const; + +export type ThemeColorPreference = typeof themeColorPreferences[number]; + export interface ThemeState { readonly theme: Theme; readonly scheme: Scheme; readonly light: boolean; - readonly latestChangeBy?: string; + readonly themeColorPreference?: ThemeColorPreference; } export default function theme( @@ -17,6 +27,7 @@ export default function theme( theme: 'default' as const, scheme: 'default' as const, light: true, + themeColorPreference: defaultThemeColorPreference, }, action: StoreAction ) { @@ -25,18 +36,20 @@ export default function theme( theme: action.theme, scheme: action.scheme, light: !action.dark, - latestChangeBy: CHANGE_THEME, + themeColorPreference: action.themeColorPreference, }; } if ( action.type === APPLY_MEDIA_FEATURES_PREFERENCES && - state.latestChangeBy !== CHANGE_THEME + (!state.themeColorPreference || + state.themeColorPreference === defaultThemeColorPreference) ) { return { ...state, + themeColorPreference: + state.themeColorPreference ?? defaultThemeColorPreference, light: !action.prefersDarkColorScheme, - latestChangeBy: APPLY_MEDIA_FEATURES_PREFERENCES, }; }