fix: refactor and move various functions
This commit is contained in:
parent
2fe29ca30e
commit
358e95621d
|
@ -222,7 +222,7 @@
|
|||
"noteToSelf": "Note to Self",
|
||||
"hideMenuBarTitle": "Hide Menu Bar",
|
||||
"hideMenuBarDescription": "Toggle system menu bar visibility.",
|
||||
"matchThemeSystemSettingTitle": "Auto night-mode",
|
||||
"matchThemeSystemSettingTitle": "Auto dark-mode",
|
||||
"matchThemeSystemSettingDescription": "Match system settings",
|
||||
"startConversation": "Start New Conversation",
|
||||
"invalidNumberError": "Please check the Session ID or ONS name and try again",
|
||||
|
|
|
@ -43,8 +43,8 @@ import {
|
|||
getFreshSwarmFor,
|
||||
} from '../../session/apis/snode_api/snodePool';
|
||||
import { isDarkTheme } from '../../state/selectors/theme';
|
||||
import { getOppositeTheme, checkThemeCongruency } from '../../themes/SessionTheme';
|
||||
import { ThemeStateType } from '../../themes/constants/colors';
|
||||
import { ensureThemeConsistency } from '../../themes/SessionTheme';
|
||||
import { getOppositeTheme } from '../../util/theme';
|
||||
import { switchThemeTo } from '../../themes/switchTheme';
|
||||
import { ConfigurationSync } from '../../session/utils/job_runners/jobs/ConfigurationSyncJob';
|
||||
|
||||
|
@ -63,7 +63,7 @@ const Section = (props: { type: SectionType }) => {
|
|||
dispatch(editProfileModal({}));
|
||||
} else if (type === SectionType.ColorMode) {
|
||||
const currentTheme = String(window.Events.getThemeSetting());
|
||||
const newTheme = getOppositeTheme(currentTheme) as ThemeStateType;
|
||||
const newTheme = getOppositeTheme(currentTheme);
|
||||
// We want to persist the primary color when using the color mode button
|
||||
void switchThemeTo({
|
||||
theme: newTheme,
|
||||
|
@ -157,9 +157,10 @@ const setupTheme = async () => {
|
|||
};
|
||||
|
||||
if (shouldFollowSystemTheme) {
|
||||
const themeIsCongruent = await checkThemeCongruency();
|
||||
// Only set theme if it matches with native theme, otherwise handled by checkThemeCongruency()
|
||||
if (!themeIsCongruent) {
|
||||
// Check if system theme matches currently set theme, if not switch it and return true, if matching return false
|
||||
const wasThemeSwitched = await ensureThemeConsistency();
|
||||
if (!wasThemeSwitched) {
|
||||
// if theme wasn't switched them set theme to default
|
||||
await switchThemeTo(themeConfig);
|
||||
}
|
||||
return;
|
||||
|
|
|
@ -4,7 +4,7 @@ import useUpdate from 'react-use/lib/useUpdate';
|
|||
import { SettingsKey } from '../../../data/settings-key';
|
||||
import { isHideMenuBarSupported } from '../../../types/Settings';
|
||||
import { useHasFollowSystemThemeEnabled } from '../../../state/selectors/settings';
|
||||
import { checkThemeCongruency } from '../../../themes/SessionTheme';
|
||||
import { ensureThemeConsistency } from '../../../themes/SessionTheme';
|
||||
import { SessionToggleWithDescription } from '../SessionSettingListItem';
|
||||
import { SettingsThemeSwitcher } from '../SettingsThemeSwitcher';
|
||||
import { ZoomingSessionSlider } from '../ZoomingSessionSlider';
|
||||
|
@ -35,16 +35,18 @@ export const SettingsCategoryAppearance = (props: { hasPassword: boolean | null
|
|||
/>
|
||||
)}
|
||||
<SessionToggleWithDescription
|
||||
onClickToggle={() => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
||||
onClickToggle={async () => {
|
||||
const toggledValue = !isFollowSystemThemeEnabled;
|
||||
void window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue);
|
||||
await window.setSettingValue(SettingsKey.hasFollowSystemThemeEnabled, toggledValue);
|
||||
if (!isFollowSystemThemeEnabled) {
|
||||
void checkThemeCongruency();
|
||||
await ensureThemeConsistency();
|
||||
}
|
||||
}}
|
||||
title={window.i18n('matchThemeSystemSettingTitle')}
|
||||
description={window.i18n('matchThemeSystemSettingDescription')}
|
||||
active={isFollowSystemThemeEnabled}
|
||||
dataTestId="enable-follow-system-theme"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -27,9 +27,8 @@ import { switchPrimaryColorTo } from '../themes/switchPrimaryColor';
|
|||
import { LibSessionUtil } from '../session/utils/libsession/libsession_utils';
|
||||
import { runners } from '../session/utils/job_runners/JobRunner';
|
||||
import { SettingsKey } from '../data/settings-key';
|
||||
import { getOppositeTheme } from '../themes/SessionTheme';
|
||||
import { getOppositeTheme, isThemeMismatched } from '../util/theme';
|
||||
import { switchThemeTo } from '../themes/switchTheme';
|
||||
import { ThemeStateType } from '../themes/constants/colors';
|
||||
|
||||
// Globally disable drag and drop
|
||||
document.body.addEventListener(
|
||||
|
@ -118,11 +117,8 @@ ipcRenderer.on('native-theme-update', (__unused, shouldUseDarkColors) => {
|
|||
|
||||
if (shouldFollowSystemTheme) {
|
||||
const theme = window.Events.getThemeSetting();
|
||||
if (
|
||||
(shouldUseDarkColors && theme.includes('light')) ||
|
||||
(!shouldUseDarkColors && theme.includes('dark'))
|
||||
) {
|
||||
const newTheme = getOppositeTheme(theme) as ThemeStateType;
|
||||
if (isThemeMismatched(theme, shouldUseDarkColors)) {
|
||||
const newTheme = getOppositeTheme(theme);
|
||||
void switchThemeTo({
|
||||
theme: newTheme,
|
||||
mainWindow: true,
|
||||
|
|
|
@ -2,8 +2,8 @@ import { ipcRenderer } from 'electron';
|
|||
import React from 'react';
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
import { switchThemeTo } from './switchTheme';
|
||||
import { ThemeStateType } from './constants/colors';
|
||||
import { classicDark } from './classicDark';
|
||||
import { getOppositeTheme, isThemeMismatched } from '../util/theme';
|
||||
import { declareCSSVariables, THEME_GLOBALS } from './globals';
|
||||
|
||||
// Defaults to Classic Dark theme
|
||||
|
@ -21,28 +21,15 @@ export const SessionTheme = ({ children }: { children: any }) => (
|
|||
</>
|
||||
);
|
||||
|
||||
export function getOppositeTheme(themeName: string) {
|
||||
if (themeName.includes('dark')) {
|
||||
return themeName.replace('dark', 'light');
|
||||
}
|
||||
if (themeName.includes('light')) {
|
||||
return themeName.replace('light', 'dark');
|
||||
}
|
||||
// If neither 'dark' nor 'light' is in the theme name, return the original theme name.
|
||||
return themeName;
|
||||
}
|
||||
|
||||
export async function checkThemeCongruency(): Promise<boolean> {
|
||||
export async function ensureThemeConsistency(): Promise<boolean> {
|
||||
const theme = window.Events.getThemeSetting();
|
||||
|
||||
return new Promise(resolve => {
|
||||
ipcRenderer.send('get-native-theme');
|
||||
ipcRenderer.once('send-native-theme', (_, shouldUseDarkColors) => {
|
||||
const isMismatchedTheme =
|
||||
(shouldUseDarkColors && theme.includes('light')) ||
|
||||
(!shouldUseDarkColors && theme.includes('dark'));
|
||||
const isMismatchedTheme = isThemeMismatched(theme, shouldUseDarkColors);
|
||||
if (isMismatchedTheme) {
|
||||
const newTheme = getOppositeTheme(theme) as ThemeStateType;
|
||||
const newTheme = getOppositeTheme(theme);
|
||||
void switchThemeTo({
|
||||
theme: newTheme,
|
||||
mainWindow: true,
|
||||
|
|
Loading…
Reference in New Issue