Dark Theme: Use system theme

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<OwnProps>((global) => ({ theme: global.settings.byKey.theme }))(Audio));
+export default memo(withGlobal<OwnProps>((global) => ({
+  theme: selectTheme(global),
+}))(Audio));

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<OwnProps & StateProps & DispatchProps> = ({
 
 export default withGlobal<OwnProps>(
   (global): StateProps => {
-    const { theme } = global.settings.byKey;
+    const theme = selectTheme(global);
     const { background, backgroundColor } = global.settings.themes[theme] || {};
 
     return {

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<OwnProps & StateProps & DispatchProps> = ({
     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<OwnProps>(
     } = 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<OwnProps>(
       chatsById,
       globalSearchChatId: chatId,
       searchDate: date,
-      theme,
+      theme: selectTheme(global),
       animationLevel,
     };
   },

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<OwnProps & StateProps & DispatchProps> = ({
 
 export default memo(withGlobal<OwnProps>(
   (global): StateProps => {
-    const { theme } = global.settings.byKey;
+    const theme = selectTheme(global);
     const { background, isBlurred } = global.settings.themes[theme] || {};
     const { loadedWallpapers } = global.settings;
 

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<OwnProps>(
   (global): StateProps => {
-    const { theme } = global.settings.byKey;
+    const theme = selectTheme(global);
     const { backgroundColor } = global.settings.themes[theme] || {};
     return {
       backgroundColor,

src/components/mediaViewer/VideoPlayer.tsx

@@ -165,7 +165,6 @@ const VideoPlayer: FC<OwnProps> = ({
           style={videoStyle}
           onEnded={handleEnded}
           onClick={togglePlayState}
-          onDoubleClick={handleFullscreenChange}
           // eslint-disable-next-line react/jsx-props-no-spreading
           {...bufferingHandlers}
           onTimeUpdate={handleTimeUpdate}

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<StateProps & DispatchProps> = ({
 
 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] || {};

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,

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 {
+  const { animationLevel, messageTextSize, language } = global.settings.byKey;
-    theme, animationLevel, messageTextSize, language,
+  const theme = selectTheme(global);
-  } = global.settings.byKey;
 
   setLanguage(language);
 

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;
+}

src/types/index.ts

@@ -45,6 +45,7 @@ export type LangCode = (
 
 export interface ISettings extends NotifySettings, Record<string, any> {
   theme: ThemeKey;
+  shouldUseSystemTheme: boolean;
   messageTextSize: number;
   animationLevel: 0 | 1 | 2;
   messageSendKeyCombo: 'enter' | 'ctrl-enter';

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() {