Use dark theme as initial theme if the user agent prefers dark mode.

altair-graphql · Oct 13, 2019 · b012f3d · b012f3d
1 parent 88a02ed
commit b012f3d
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/src/app/config.ts b/src/app/config.ts
@@ -30,6 +30,7 @@ export default {
     'vi-VN': 'Vietnamese',
   },
   query_history_depth: isElectron ? 50 : 7,
+  defaultTheme: 'matchMedia' in window && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
   themes: ['light', 'dark'],
   isTranslateMode,
   isWebApp: window['__ALTAIR_WEB_APP__'],

diff --git a/src/app/reducers/settings/settings.ts b/src/app/reducers/settings/settings.ts
@@ -71,7 +71,7 @@ export interface State {
 }
 
 const initialState: State = {
-  theme: 'light',
+  theme: <SettingsTheme>config.defaultTheme,
   language: <SettingsLanguage>config.default_language,
   addQueryDepthLimit: config.add_query_depth_limit,
   tabSize: config.tab_size,