Added system theme.

Updated electron to use Ctrl instead of Command Closes #1236.
altair-graphql · May 2, 2020 · 0c363b3 · 0c363b3
1 parent 83c6392
commit 0c363b3
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 9 deletions.
diff --git a/packages/altair-app/src/app/config.ts b/packages/altair-app/src/app/config.ts
@@ -101,8 +101,8 @@ export class AltairConfig {
     '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', 'dracula' ];
+  defaultTheme = 'system';
+  themes: [ 'light', 'dark', 'dracula', 'system' ];
   isTranslateMode = isTranslateMode;
   isWebApp = (window as any).__ALTAIR_WEB_APP__;
   initialData = {

diff --git a/packages/altair-app/src/app/reducers/settings/settings.ts b/packages/altair-app/src/app/reducers/settings/settings.ts
@@ -3,7 +3,7 @@ import { getAltairConfig } from '../../config';
 import { jsonc } from 'app/utils';
 
 const config = getAltairConfig();
-export type SettingsTheme = 'light' | 'dark' | 'dracula';
+export type SettingsTheme = 'light' | 'dark' | 'dracula' | 'system';
 export type SettingsLanguage = keyof typeof config.languages;
 
 export interface State {

diff --git a/packages/altair-app/src/app/utils/settings.schema.json b/packages/altair-app/src/app/utils/settings.schema.json
@@ -26,7 +26,8 @@
             "enum": [
                 "dark",
                 "dracula",
-                "light"
+                "light",
+                "system"
             ],
             "type": "string"
         }

diff --git a/packages/altair-app/src/app/utils/validate_settings_schema.js b/packages/altair-app/src/app/utils/validate_settings_schema.js
@@ -8,7 +8,7 @@ var validate = (function() {
   };
   refVal[1] = refVal1;
   var refVal2 = {
-    "enum": ["dark", "dracula", "light"],
+    "enum": ["dark", "dracula", "light", "system"],
     "type": "string"
   };
   refVal[2] = refVal2;
@@ -326,7 +326,7 @@ validate.schema = {
       "type": "string"
     },
     "SettingsTheme": {
-      "enum": ["dark", "dracula", "light"],
+      "enum": ["dark", "dracula", "light", "system"],
       "type": "string"
     }
   },

diff --git a/packages/altair-app/src/styles.scss b/packages/altair-app/src/styles.scss
@@ -15,7 +15,7 @@
 @import "scss/framework";
 @import "scss/all";
 
-.dark-theme {
+@mixin dark-theme {
   // Reset the imported modules for the new theme.
   // This is required because clarity uses the exports mixin mechanism to prevent loading components multiple times.
   // This prevents being able to include styles for the component in the new theme class.
@@ -53,6 +53,10 @@
   --editor-cursor-color: var(--blue-color);
 }
 
+.dark-theme {
+  @include dark-theme;
+}
+
 .dracula-theme {
   --theme-bg-color: #282a36;
   --theme-off-bg-color: #303240;
@@ -76,3 +80,10 @@
   --editor-punctuation-color: #f8f8f2;
   --editor-cursor-color: #f8f8f2;
 }
+
+.system-theme {
+  @media (prefers-color-scheme: dark) {
+    @include dark-theme;
+  }
+  // @media (prefers-color-scheme: light) {}
+}
diff --git a/packages/altair-electron/src/menu.js b/packages/altair-electron/src/menu.js
@@ -36,12 +36,12 @@ const createMenu = (actions) => {
       submenu: [
         {
           label: 'Next Tab',
-          accelerator: 'CmdOrCtrl+Tab',
+          accelerator: 'Ctrl+Tab',
           click: actions.nextTab
         },
         {
           label: 'Previous Tab',
-          accelerator: 'CmdOrCtrl+Shift+Tab',
+          accelerator: 'Ctrl+Shift+Tab',
           click: actions.previousTab
         },
         { role: "reload" },