fix: update selector usage and theme checking code
This commit is contained in:
parent
ccd430bf0c
commit
5571471bbe
|
@ -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({
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue