feat: primary color switching now persists
fixed isDarkMode, will need to confirm when we add ocean themes
This commit is contained in:
parent
e14f4832aa
commit
e5bfda37af
|
@ -150,6 +150,11 @@ window.readyForUpdates = () => {
|
|||
ipc.send('ready-for-updates');
|
||||
};
|
||||
|
||||
ipc.on('get-primary-color-setting', () => {
|
||||
const primaryColor = window.Events.getPrimaryColorSetting();
|
||||
ipc.send('get-success-primary-color-setting', primaryColor);
|
||||
});
|
||||
|
||||
ipc.on('get-theme-setting', () => {
|
||||
const theme = window.Events.getThemeSetting();
|
||||
ipc.send('get-success-theme-setting', theme);
|
||||
|
|
|
@ -9,8 +9,9 @@ import { getTheme } from '../../state/selectors/theme';
|
|||
import { noop } from 'lodash';
|
||||
import { loadEmojiPanelI18n } from '../../util/i18n';
|
||||
import { FixedBaseEmoji, FixedPickerProps } from '../../types/Reaction';
|
||||
import { ThemeStateType } from '../../themes/colors.js';
|
||||
|
||||
export const StyledEmojiPanel = styled.div<{ isModal: boolean; theme: 'light' | 'dark' }>`
|
||||
export const StyledEmojiPanel = styled.div<{ isModal: boolean; theme: ThemeStateType }>`
|
||||
padding: var(--margins-lg);
|
||||
z-index: 5;
|
||||
opacity: 0;
|
||||
|
@ -40,15 +41,20 @@ export const StyledEmojiPanel = styled.div<{ isModal: boolean; theme: 'light' |
|
|||
|
||||
${props => {
|
||||
switch (props.theme) {
|
||||
// TODO Theming - Add Ocean Colors
|
||||
case 'dark':
|
||||
case 'ocean-dark':
|
||||
// TODO Theming
|
||||
return ``;
|
||||
case 'ocean-light':
|
||||
// TODO Theming
|
||||
return ``;
|
||||
case 'classic-dark':
|
||||
return `
|
||||
--background-rgb: 27, 27, 27; // var(--color-cell-background)
|
||||
--rgb-background: 27, 27, 27;
|
||||
--rgb-color: 255, 255, 255; // var(--color-text)
|
||||
--rgb-input: 27, 27, 27;
|
||||
`;
|
||||
case 'light':
|
||||
case 'classic-light':
|
||||
default:
|
||||
return `
|
||||
--background-rgb: 249, 249, 249; // var(--color-cell-background)
|
||||
|
@ -97,6 +103,7 @@ const pickerProps: FixedPickerProps = {
|
|||
export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props, ref) => {
|
||||
const { onEmojiClicked, show, isModal = false, onKeyDown } = props;
|
||||
const theme = useSelector(getTheme);
|
||||
const emojiPanelTheme = theme.includes('light') ? 'light' : 'dark';
|
||||
const pickerRef = ref as MutableRefObject<HTMLDivElement>;
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -113,7 +120,7 @@ export const SessionEmojiPanel = forwardRef<HTMLDivElement, Props>((props: Props
|
|||
data,
|
||||
ref,
|
||||
i18n,
|
||||
theme,
|
||||
theme: emojiPanelTheme,
|
||||
onEmojiSelect: onEmojiClicked,
|
||||
onKeyDown,
|
||||
...pickerProps,
|
||||
|
|
|
@ -96,7 +96,7 @@ const generateContactsString = async (
|
|||
};
|
||||
|
||||
const Contacts = (contacts: Array<string>, count: number) => {
|
||||
const darkMode = useSelector(getTheme) === 'classic-dark';
|
||||
const darkMode = useSelector(getTheme).includes('dark');
|
||||
|
||||
if (!Boolean(contacts?.length > 0)) {
|
||||
return;
|
||||
|
|
|
@ -67,7 +67,7 @@ export const BanOrUnBanUserDialog = (props: {
|
|||
const { i18n } = window;
|
||||
const isBan = banType === 'ban';
|
||||
const dispatch = useDispatch();
|
||||
const darkMode = useSelector(getTheme) === 'classic-dark';
|
||||
const darkMode = useSelector(getTheme).includes('dark');
|
||||
const convo = getConversationController().get(conversationId);
|
||||
const inputRef = useRef(null);
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@ export const AddModeratorsDialog = (props: Props) => {
|
|||
const { conversationId } = props;
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const darkMode = useSelector(getTheme) === 'classic-dark';
|
||||
const darkMode = useSelector(getTheme).includes('dark');
|
||||
const convo = getConversationController().get(conversationId);
|
||||
|
||||
const [inputBoxValue, setInputBoxValue] = useState('');
|
||||
|
|
|
@ -54,7 +54,7 @@ export const ReactClearAllModal = (props: Props): ReactElement => {
|
|||
const [clearingInProgress, setClearingInProgress] = useState(false);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const darkMode = useSelector(getTheme) === 'classic-dark';
|
||||
const darkMode = useSelector(getTheme).includes('dark');
|
||||
const msgProps = useMessageReactsPropsById(messageId);
|
||||
|
||||
if (!msgProps) {
|
||||
|
|
|
@ -52,6 +52,7 @@ import { getLatestReleaseFromFileServer } from '../../session/apis/file_server_a
|
|||
import { switchThemeTo } from '../../session/utils/Theme';
|
||||
import { ThemeStateType } from '../../themes/colors';
|
||||
import { getTheme } from '../../state/selectors/theme';
|
||||
import { switchPrimaryColor } from '../../themes/switchPrimaryColor';
|
||||
|
||||
const Section = (props: { type: SectionType }) => {
|
||||
const ourNumber = useSelector(getOurNumber);
|
||||
|
@ -153,6 +154,9 @@ const cleanUpMediasInterval = DURATION.MINUTES * 60;
|
|||
const fetchReleaseFromFileServerInterval = 1000 * 60; // try to fetch the latest release from the fileserver every minute
|
||||
|
||||
const setupTheme = async () => {
|
||||
const primaryColor = window.Events.getPrimaryColorSetting();
|
||||
await switchPrimaryColor(primaryColor, window?.inboxStore?.dispatch || null);
|
||||
|
||||
const theme = window.Events.getThemeSetting();
|
||||
await switchThemeTo(theme, window?.inboxStore?.dispatch || null);
|
||||
};
|
||||
|
|
|
@ -641,6 +641,8 @@ async function showDebugLogWindow() {
|
|||
return;
|
||||
}
|
||||
|
||||
// TODO Theming - Use on debug and about pages
|
||||
const primaryColor = await getPrimaryColorFromMainWindow();
|
||||
const theme = await getThemeFromMainWindow();
|
||||
const size = mainWindow.getSize();
|
||||
const options = {
|
||||
|
@ -667,6 +669,7 @@ async function showDebugLogWindow() {
|
|||
|
||||
captureClicks(debugLogWindow);
|
||||
|
||||
// TODO Theming - Check if it needs the priary color
|
||||
await debugLogWindow.loadURL(prepareURL([getAppRootPath(), 'debug_log.html'], { theme }));
|
||||
|
||||
debugLogWindow.on('closed', () => {
|
||||
|
@ -1099,6 +1102,15 @@ ipc.on('set-auto-update-setting', async (_event, enabled) => {
|
|||
}
|
||||
});
|
||||
|
||||
async function getPrimaryColorFromMainWindow() {
|
||||
return new Promise(resolve => {
|
||||
ipc.once('get-success-primary-color-setting', (_event, value) => {
|
||||
resolve(value);
|
||||
});
|
||||
mainWindow?.webContents.send('get-primary-color-setting');
|
||||
});
|
||||
}
|
||||
|
||||
async function getThemeFromMainWindow() {
|
||||
return new Promise(resolve => {
|
||||
ipc.once('get-success-theme-setting', (_event, value) => {
|
||||
|
|
|
@ -127,6 +127,10 @@ Storage.onready(async () => {
|
|||
|
||||
// These make key operations available to IPC handlers created in preload.js
|
||||
window.Events = {
|
||||
getPrimaryColorSetting: () => Storage.get('primary-color-setting', 'green'),
|
||||
setPrimaryColorSetting: async (value: any) => {
|
||||
await Storage.put('primary-color-setting', value);
|
||||
},
|
||||
getThemeSetting: () => Storage.get('theme-setting', 'classic-light'),
|
||||
setThemeSetting: async (value: any) => {
|
||||
await Storage.put('theme-setting', value);
|
||||
|
|
|
@ -2,7 +2,9 @@ import { Dispatch } from 'redux';
|
|||
import { applyPrimaryColor } from '../state/ducks/primaryColor';
|
||||
import { COLORS, PrimaryColorStateType } from './colors';
|
||||
|
||||
export function switchPrimaryColor(color: PrimaryColorStateType, dispatch: Dispatch | null) {
|
||||
export async function switchPrimaryColor(color: PrimaryColorStateType, dispatch: Dispatch | null) {
|
||||
await window.Events.setPrimaryColorSetting(color);
|
||||
|
||||
document.documentElement.style.setProperty(
|
||||
'--primary-color',
|
||||
(COLORS.PRIMARY as any)[`${color.toUpperCase()}`]
|
||||
|
|
|
@ -1,8 +1,13 @@
|
|||
import { hexColorToRGB } from '../util/hexColorToRGB';
|
||||
import { COLORS, THEMES, ThemeStateType } from './colors';
|
||||
import { COLORS, PrimaryColorStateType, THEMES, ThemeStateType } from './colors';
|
||||
|
||||
function loadClassicLight() {
|
||||
document.documentElement.style.setProperty('--primary-color', THEMES.CLASSIC_LIGHT.PRIMARY);
|
||||
function loadClassicLight(primaryColor?: PrimaryColorStateType) {
|
||||
document.documentElement.style.setProperty(
|
||||
'--primary-color',
|
||||
primaryColor && primaryColor !== THEMES.CLASSIC_LIGHT.PRIMARY
|
||||
? primaryColor
|
||||
: THEMES.CLASSIC_LIGHT.PRIMARY
|
||||
);
|
||||
document.documentElement.style.setProperty('--danger-color', THEMES.CLASSIC_LIGHT.DANGER);
|
||||
|
||||
document.documentElement.style.setProperty(
|
||||
|
@ -354,8 +359,13 @@ function loadClassicLight() {
|
|||
);
|
||||
}
|
||||
|
||||
function loadClassicDark() {
|
||||
document.documentElement.style.setProperty('--primary-color', THEMES.CLASSIC_DARK.PRIMARY);
|
||||
function loadClassicDark(primaryColor?: PrimaryColorStateType) {
|
||||
document.documentElement.style.setProperty(
|
||||
'--primary-color',
|
||||
primaryColor && primaryColor !== THEMES.CLASSIC_DARK.PRIMARY
|
||||
? primaryColor
|
||||
: THEMES.CLASSIC_DARK.PRIMARY
|
||||
);
|
||||
document.documentElement.style.setProperty('--danger-color', THEMES.CLASSIC_DARK.DANGER);
|
||||
|
||||
document.documentElement.style.setProperty(
|
||||
|
@ -695,26 +705,31 @@ function loadClassicDark() {
|
|||
);
|
||||
}
|
||||
|
||||
function loadOceanLight() {}
|
||||
function loadOceanLight(primaryColor?: PrimaryColorStateType) {}
|
||||
|
||||
function loadOceanDark() {}
|
||||
function loadOceanDark(primaryColor?: PrimaryColorStateType) {}
|
||||
|
||||
export async function switchTheme(theme: ThemeStateType) {
|
||||
const selectedPrimaryColor = await window.Events.getPrimaryColorSetting();
|
||||
const primaryColor =
|
||||
(selectedPrimaryColor && (COLORS.PRIMARY as any)[`${selectedPrimaryColor.toUpperCase()}`]) ||
|
||||
null;
|
||||
|
||||
export const switchTheme = (theme: ThemeStateType) => {
|
||||
switch (theme) {
|
||||
case 'classic-light':
|
||||
loadClassicLight();
|
||||
loadClassicLight(primaryColor);
|
||||
break;
|
||||
case 'classic-dark':
|
||||
loadClassicDark();
|
||||
loadClassicDark(primaryColor);
|
||||
break;
|
||||
case 'ocean-light':
|
||||
loadOceanLight();
|
||||
loadOceanLight(primaryColor);
|
||||
break;
|
||||
case 'ocean-dark':
|
||||
loadOceanDark();
|
||||
loadOceanDark(primaryColor);
|
||||
break;
|
||||
default:
|
||||
window.log.warn('Unsupported theme:', theme);
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
Loading…
Reference in New Issue