fix: update selector usage and theme checking code

This commit is contained in:
Kee Jefferys 2023-10-27 16:35:09 +11:00
parent ccd430bf0c
commit 5571471bbe
3 changed files with 14 additions and 10 deletions

View File

@ -62,7 +62,7 @@ const Section = (props: { type: SectionType }) => {
if (type === SectionType.Profile) {
dispatch(editProfileModal({}));
} else if (type === SectionType.ColorMode) {
const currentTheme = String(window.Events.getThemeSetting());
const currentTheme = window.Events.getThemeSetting();
const newTheme = getOppositeTheme(currentTheme);
// We want to persist the primary color when using the color mode button
void switchThemeTo({

View File

@ -1,8 +1,9 @@
import { ThemeStateType } from '../../themes/constants/colors';
import { StateType } from '../reducer';
import { checkDarkTheme, checkLightTheme } from '../../util/theme';
export const getTheme = (state: StateType): ThemeStateType => state.theme;
export const isDarkTheme = (state: StateType): boolean => state.theme.includes('dark');
export const isDarkTheme = (state: StateType): boolean => checkDarkTheme(state.theme);
export const isLightTheme = (state: StateType): boolean => state.theme.includes('light');
export const isLightTheme = (state: StateType): boolean => checkLightTheme(state.theme);

View File

@ -1,18 +1,21 @@
import { ThemeStateType } from '../themes/constants/colors';
export function getOppositeTheme(themeName: string): ThemeStateType {
if (themeName.includes('dark')) {
export const checkDarkTheme = (theme: ThemeStateType): boolean => theme.includes('dark');
export const checkLightTheme = (theme: ThemeStateType): boolean => theme.includes('light');
export function getOppositeTheme(themeName: ThemeStateType): ThemeStateType {
if (checkDarkTheme(themeName)) {
return themeName.replace('dark', 'light') as ThemeStateType;
}
if (themeName.includes('light')) {
if (checkLightTheme(themeName)) {
return themeName.replace('light', 'dark') as ThemeStateType;
}
// If neither 'dark' nor 'light' is in the theme name, return the original theme name.
return themeName as ThemeStateType;
}
export function isThemeMismatched(themeName: string, prefersDark: boolean): boolean {
const isLightTheme = themeName.includes('light');
const isDarkTheme = themeName.includes('dark');
return (prefersDark && isLightTheme) || (!prefersDark && isDarkTheme);
export function isThemeMismatched(themeName: ThemeStateType, prefersDark: boolean): boolean {
const systemLightTheme = checkLightTheme(themeName);
const systemDarkTheme = checkDarkTheme(themeName);
return (prefersDark && systemLightTheme) || (!prefersDark && systemDarkTheme);
}