From 44f29bc90983c0950e7a10bab537b69b1eccdd8c Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Mon, 21 Jun 2021 02:46:00 +0300 Subject: [PATCH] Dark Theme: Use system theme --- src/components/common/Audio.tsx | 5 ++++- src/components/common/UiLoader.tsx | 4 ++-- src/components/left/main/LeftMainHeader.tsx | 6 ++++-- .../left/settings/SettingsGeneralBackground.tsx | 3 ++- .../left/settings/SettingsGeneralBackgroundColor.tsx | 3 ++- src/components/mediaViewer/VideoPlayer.tsx | 1 - src/components/middle/MiddleColumn.tsx | 3 ++- src/global/initial.ts | 3 ++- src/modules/actions/ui/initial.ts | 6 +++--- src/modules/selectors/ui.ts | 8 +++++++- src/types/index.ts | 1 + src/util/environment.ts | 4 ++++ 12 files changed, 33 insertions(+), 14 deletions(-) diff --git a/src/components/common/Audio.tsx b/src/components/common/Audio.tsx index 11aeb8c79..2a4eb1690 100644 --- a/src/components/common/Audio.tsx +++ b/src/components/common/Audio.tsx @@ -24,6 +24,7 @@ import { renderWaveformToDataUri } from './helpers/waveform'; import buildClassName from '../../util/buildClassName'; import renderText from './helpers/renderText'; import { decodeWaveform, interpolateArray } from '../../util/waveform'; +import { selectTheme } from '../../modules/selectors'; import useMediaWithDownloadProgress from '../../hooks/useMediaWithDownloadProgress'; import useShowTransition from '../../hooks/useShowTransition'; import useBuffering from '../../hooks/useBuffering'; @@ -456,4 +457,6 @@ function renderSeekline( ); } -export default memo(withGlobal((global) => ({ theme: global.settings.byKey.theme }))(Audio)); +export default memo(withGlobal((global) => ({ + theme: selectTheme(global), +}))(Audio)); diff --git a/src/components/common/UiLoader.tsx b/src/components/common/UiLoader.tsx index da0350458..6a15c50dd 100644 --- a/src/components/common/UiLoader.tsx +++ b/src/components/common/UiLoader.tsx @@ -21,7 +21,7 @@ import './UiLoader.scss'; import telegramLogoPath from '../../assets/telegram-logo.svg'; // @ts-ignore import monkeyPath from '../../assets/monkey.svg'; -import { selectIsRightColumnShown } from '../../modules/selectors'; +import { selectIsRightColumnShown, selectTheme } from '../../modules/selectors'; type OwnProps = { page: 'main' | 'authCode' | 'authPassword' | 'authPhoneNumber' | 'authQrCode'; @@ -152,7 +152,7 @@ const UiLoader: FC = ({ export default withGlobal( (global): StateProps => { - const { theme } = global.settings.byKey; + const theme = selectTheme(global); const { background, backgroundColor } = global.settings.themes[theme] || {}; return { diff --git a/src/components/left/main/LeftMainHeader.tsx b/src/components/left/main/LeftMainHeader.tsx index b131067db..56e80f379 100644 --- a/src/components/left/main/LeftMainHeader.tsx +++ b/src/components/left/main/LeftMainHeader.tsx @@ -13,6 +13,7 @@ import buildClassName from '../../../util/buildClassName'; import { pick } from '../../../util/iteratees'; import { isChatArchived } from '../../../modules/helpers'; import { formatDateToString } from '../../../util/dateFormat'; +import { selectTheme } from '../../../modules/selectors'; import switchTheme from '../../../util/switchTheme'; import useLang from '../../../hooks/useLang'; @@ -135,6 +136,7 @@ const LeftMainHeader: FC = ({ const newTheme = theme === 'light' ? 'dark' : 'light'; setSettingOption({ theme: newTheme }); + setSettingOption({ shouldUseSystemTheme: false }); switchTheme(newTheme, animationLevel > 0); }, [animationLevel, setSettingOption, theme]); @@ -296,7 +298,7 @@ export default memo(withGlobal( } = global.globalSearch; const { currentUserId } = global; const { byId: chatsById } = global.chats; - const { theme, animationLevel } = global.settings.byKey; + const { animationLevel } = global.settings.byKey; return { searchQuery, @@ -305,7 +307,7 @@ export default memo(withGlobal( chatsById, globalSearchChatId: chatId, searchDate: date, - theme, + theme: selectTheme(global), animationLevel, }; }, diff --git a/src/components/left/settings/SettingsGeneralBackground.tsx b/src/components/left/settings/SettingsGeneralBackground.tsx index ed6b7216e..82cee76c7 100644 --- a/src/components/left/settings/SettingsGeneralBackground.tsx +++ b/src/components/left/settings/SettingsGeneralBackground.tsx @@ -12,6 +12,7 @@ import { pick } from '../../../util/iteratees'; import { throttle } from '../../../util/schedulers'; import { openSystemFilesDialog } from '../../../util/systemFilesDialog'; import { getAverageColor, getPatternColor, rgb2hex } from '../../../util/colors'; +import { selectTheme } from '../../../modules/selectors'; import useLang from '../../../hooks/useLang'; import ListItem from '../../ui/ListItem'; @@ -158,7 +159,7 @@ const SettingsGeneralBackground: FC = ({ export default memo(withGlobal( (global): StateProps => { - const { theme } = global.settings.byKey; + const theme = selectTheme(global); const { background, isBlurred } = global.settings.themes[theme] || {}; const { loadedWallpapers } = global.settings; diff --git a/src/components/left/settings/SettingsGeneralBackgroundColor.tsx b/src/components/left/settings/SettingsGeneralBackgroundColor.tsx index e5d3ff346..2ca90e3f7 100644 --- a/src/components/left/settings/SettingsGeneralBackgroundColor.tsx +++ b/src/components/left/settings/SettingsGeneralBackgroundColor.tsx @@ -12,6 +12,7 @@ import { getPatternColor, hex2rgb, hsb2rgb, rgb2hex, rgb2hsb, } from '../../../util/colors'; import { captureEvents, RealTouchEvent } from '../../../util/captureEvents'; +import { selectTheme } from '../../../modules/selectors'; import useFlag from '../../../hooks/useFlag'; import buildClassName from '../../../util/buildClassName'; @@ -336,7 +337,7 @@ function drawHue(canvas: HTMLCanvasElement) { export default memo(withGlobal( (global): StateProps => { - const { theme } = global.settings.byKey; + const theme = selectTheme(global); const { backgroundColor } = global.settings.themes[theme] || {}; return { backgroundColor, diff --git a/src/components/mediaViewer/VideoPlayer.tsx b/src/components/mediaViewer/VideoPlayer.tsx index 0730a7790..a2234985e 100644 --- a/src/components/mediaViewer/VideoPlayer.tsx +++ b/src/components/mediaViewer/VideoPlayer.tsx @@ -165,7 +165,6 @@ const VideoPlayer: FC = ({ style={videoStyle} onEnded={handleEnded} onClick={togglePlayState} - onDoubleClick={handleFullscreenChange} // eslint-disable-next-line react/jsx-props-no-spreading {...bufferingHandlers} onTimeUpdate={handleTimeUpdate} diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index 9b3222414..58eef4ef4 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -29,6 +29,7 @@ import { selectIsInSelectMode, selectIsRightColumnShown, selectPinnedIds, + selectTheme, } from '../../modules/selectors'; import { getCanPostInChat, getMessageSendingRestrictionReason, isChatPrivate } from '../../modules/helpers'; import captureEscKeyListener from '../../util/captureEscKeyListener'; @@ -325,7 +326,7 @@ const MiddleColumn: FC = ({ export default memo(withGlobal( (global): StateProps => { - const { theme } = global.settings.byKey; + const theme = selectTheme(global); const { isBlurred: isBackgroundBlurred, background: customBackground, backgroundColor, patternColor, } = global.settings.themes[theme] || {}; diff --git a/src/global/initial.ts b/src/global/initial.ts index cf2b8efd3..8fbdc6269 100644 --- a/src/global/initial.ts +++ b/src/global/initial.ts @@ -105,10 +105,11 @@ export const INITIAL_STATE: GlobalState = { settings: { byKey: { + theme: 'light', + shouldUseSystemTheme: true, messageTextSize: DEFAULT_MESSAGE_TEXT_SIZE_PX, animationLevel: ANIMATION_LEVEL_DEFAULT, messageSendKeyCombo: 'enter', - theme: 'light', shouldAutoDownloadMediaFromContacts: true, shouldAutoDownloadMediaInPrivateChats: true, shouldAutoDownloadMediaInGroups: true, diff --git a/src/modules/actions/ui/initial.ts b/src/modules/actions/ui/initial.ts index 030ec893d..b7f7122ab 100644 --- a/src/modules/actions/ui/initial.ts +++ b/src/modules/actions/ui/initial.ts @@ -5,11 +5,11 @@ import { } from '../../../util/environment'; import { setLanguage } from '../../../util/langProvider'; import switchTheme from '../../../util/switchTheme'; +import { selectTheme } from '../../selectors'; addReducer('init', (global) => { - const { - theme, animationLevel, messageTextSize, language, - } = global.settings.byKey; + const { animationLevel, messageTextSize, language } = global.settings.byKey; + const theme = selectTheme(global); setLanguage(language); diff --git a/src/modules/selectors/ui.ts b/src/modules/selectors/ui.ts index e76033617..e8bf36e21 100644 --- a/src/modules/selectors/ui.ts +++ b/src/modules/selectors/ui.ts @@ -1,7 +1,7 @@ import { GlobalState } from '../../global/types'; import { RightColumnContent } from '../../types'; -import { IS_MOBILE_SCREEN } from '../../util/environment'; +import { IS_MOBILE_SCREEN, SYSTEM_THEME } from '../../util/environment'; import { selectCurrentMessageList, selectIsPollResultsOpen } from './messages'; import { selectCurrentTextSearch } from './localSearch'; import { selectCurrentStickerSearch, selectCurrentGifSearch } from './symbols'; @@ -53,3 +53,9 @@ export function selectRightColumnContentKey(global: GlobalState) { export function selectIsRightColumnShown(global: GlobalState) { return selectRightColumnContentKey(global) !== undefined; } + +export function selectTheme(global: GlobalState) { + const { theme, shouldUseSystemTheme } = global.settings.byKey; + + return shouldUseSystemTheme ? SYSTEM_THEME : theme; +} diff --git a/src/types/index.ts b/src/types/index.ts index 5242da130..e4c195e02 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -45,6 +45,7 @@ export type LangCode = ( export interface ISettings extends NotifySettings, Record { theme: ThemeKey; + shouldUseSystemTheme: boolean; messageTextSize: number; animationLevel: 0 | 1 | 2; messageSendKeyCombo: 'enter' | 'ctrl-enter'; diff --git a/src/util/environment.ts b/src/util/environment.ts index 6c724f0be..41f4e30af 100644 --- a/src/util/environment.ts +++ b/src/util/environment.ts @@ -56,6 +56,10 @@ export const DPR = window.devicePixelRatio || 1; export const MASK_IMAGE_DISABLED = true; +export const SYSTEM_THEME = ( + window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches +) ? 'dark' : 'light'; + let isWebpSupportedCache: boolean | undefined; export function isWebpSupported() {