change editor theme

packages/web/src/forms/FormFieldTemplateLarge.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   export let type;
   export let label;
-  export let noMargin;
+  export let noMargin = false;
   export let disabled = false;
   export let labelProps: any = {};
 </script>

packages/web/src/query/AceEditor.svelte

@@ -1,3 +1,44 @@
+<script lang="ts" context="module">
+  export const EDITOR_THEMES = [
+    'ambiance',
+    'chaos',
+    'chrome',
+    'clouds',
+    'clouds_midnight',
+    'cobalt',
+    'crimson_editor',
+    'dawn',
+    'dracula',
+    'dreamweaver',
+    'eclipse',
+    'github',
+    'gob',
+    'gruvbox',
+    'idle_fingers',
+    'iplastic',
+    'katzenmilch',
+    'kr_theme',
+    'kuroir',
+    'merbivore',
+    'merbivore_soft',
+    'mono_industrial',
+    'monokai',
+    'nord_dark',
+    'pastel_on_dark',
+    'solarized_dark',
+    'solarized_light',
+    'sqlserver',
+    'terminal',
+    'textmate',
+    'tomorrow',
+    'tomorrow_night_blue',
+    'tomorrow_night_bright',
+    'tomorrow_night_eighties',
+    'tomorrow_night',
+    'twilight',
+  ];
+</script>
+
 <script lang="ts">
   // copied from https://github.com/nateshmbhat/svelte-ace/blob/main/src/AceEditor.svelte
   import { createEventDispatcher, tick, onMount, onDestroy, getContext } from 'svelte';
@@ -15,15 +56,52 @@
   import 'ace-builds/src-noconflict/ext-searchbox';
   import 'ace-builds/src-noconflict/ext-language_tools';
 
-  import 'ace-builds/src-noconflict/theme-github';
+  // import 'ace-builds/src-noconflict/theme-github';
   // import 'ace-builds/src-noconflict/theme-sqlserver';
 
   // import 'ace-builds/src-noconflict/theme-twilight';
   // import 'ace-builds/src-noconflict/theme-monokai';
   // import 'ace-builds/src-noconflict/theme-chaos';
+  // import 'ace-builds/src-noconflict/theme-merbivore';
+
+  import 'ace-builds/src-noconflict/theme-ambiance';
+  import 'ace-builds/src-noconflict/theme-chaos';
+  import 'ace-builds/src-noconflict/theme-chrome';
+  import 'ace-builds/src-noconflict/theme-clouds';
+  import 'ace-builds/src-noconflict/theme-clouds_midnight';
+  import 'ace-builds/src-noconflict/theme-cobalt';
+  import 'ace-builds/src-noconflict/theme-crimson_editor';
+  import 'ace-builds/src-noconflict/theme-dawn';
+  import 'ace-builds/src-noconflict/theme-dracula';
+  import 'ace-builds/src-noconflict/theme-dreamweaver';
+  import 'ace-builds/src-noconflict/theme-eclipse';
+  import 'ace-builds/src-noconflict/theme-github';
+  import 'ace-builds/src-noconflict/theme-gob';
+  import 'ace-builds/src-noconflict/theme-gruvbox';
+  import 'ace-builds/src-noconflict/theme-idle_fingers';
+  import 'ace-builds/src-noconflict/theme-iplastic';
+  import 'ace-builds/src-noconflict/theme-katzenmilch';
+  import 'ace-builds/src-noconflict/theme-kr_theme';
+  import 'ace-builds/src-noconflict/theme-kuroir';
   import 'ace-builds/src-noconflict/theme-merbivore';
-  
-  import { currentDropDownMenu, currentThemeDefinition } from '../stores';
+  import 'ace-builds/src-noconflict/theme-merbivore_soft';
+  import 'ace-builds/src-noconflict/theme-mono_industrial';
+  import 'ace-builds/src-noconflict/theme-monokai';
+  import 'ace-builds/src-noconflict/theme-nord_dark';
+  import 'ace-builds/src-noconflict/theme-pastel_on_dark';
+  import 'ace-builds/src-noconflict/theme-solarized_dark';
+  import 'ace-builds/src-noconflict/theme-solarized_light';
+  import 'ace-builds/src-noconflict/theme-sqlserver';
+  import 'ace-builds/src-noconflict/theme-terminal';
+  import 'ace-builds/src-noconflict/theme-textmate';
+  import 'ace-builds/src-noconflict/theme-tomorrow';
+  import 'ace-builds/src-noconflict/theme-tomorrow_night_blue';
+  import 'ace-builds/src-noconflict/theme-tomorrow_night_bright';
+  import 'ace-builds/src-noconflict/theme-tomorrow_night_eighties';
+  import 'ace-builds/src-noconflict/theme-tomorrow_night';
+  import 'ace-builds/src-noconflict/theme-twilight';
+
+  import { currentDropDownMenu, currentEditorTheme, currentThemeDefinition } from '../stores';
   import _ from 'lodash';
   import { handleCommandKeyDown } from '../commands/CommandListener.svelte';
   import resizeObserver from '../utility/resizeObserver';
@@ -75,7 +153,7 @@
     showPrintMargin: false,
   };
 
-  $: theme = $currentThemeDefinition?.themeType == 'dark' ? 'merbivore' : 'github';
+  $: theme = $currentEditorTheme || ($currentThemeDefinition?.themeType == 'dark' ? 'merbivore' : 'github');
 
   export function getEditor(): ace.Editor {
     return editor;

packages/web/src/settings/SettingsModal.svelte

@@ -4,14 +4,19 @@
   import TabControl from '../elements/TabControl.svelte';
 
   import FormCheckboxField from '../forms/FormCheckboxField.svelte';
+  import FormFieldTemplateLarge from '../forms/FormFieldTemplateLarge.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
   import FormValues from '../forms/FormValues.svelte';
+  import SelectField from '../forms/SelectField.svelte';
   import SettingsFormProvider from '../forms/SettingsFormProvider.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
 
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
-  import { extensions } from '../stores';
+  import { EDITOR_THEMES } from '../query/AceEditor.svelte';
+  import SqlEditor from '../query/SqlEditor.svelte';
+  import { currentEditorTheme, extensions } from '../stores';
   import getElectron from '../utility/getElectron';
   import ThemeSkeleton from './ThemeSkeleton.svelte';
 
@@ -19,6 +24,22 @@
   let restartWarning = false;
 
   export let selectedTab = 0;
+
+  const sqlPreview = `-- example query
+SELECT
+  MAX(Album.AlbumId) AS max_album,
+  MAX(Album.Title) AS max_title,
+  Artist.ArtistId,
+  'album' AS test_string,
+  123 AS test_number
+FROM
+  Album
+  INNER JOIN Artist ON Album.ArtistId = Artist.ArtistId
+GROUP BY
+  Artist.ArtistId
+ORDER BY
+  Artist.Name ASC
+  `;
 </script>
 
 <SettingsFormProvider>
@@ -82,6 +103,22 @@
               <ThemeSkeleton {theme} />
             {/each}
           </div>
+
+          <div class="heading">Editor theme</div>
+
+          <FormFieldTemplateLarge label="Theme" type='combo'>
+            <SelectField
+              isNative
+              notSelected="(use theme default)"
+              options={EDITOR_THEMES.map(theme => ({ label: theme, value: theme }))}
+              value={$currentEditorTheme}
+              on:change={e => ($currentEditorTheme = e.detail)}
+            />
+          </FormFieldTemplateLarge>
+
+          <div class="editor">
+            <SqlEditor value={sqlPreview} readOnly />
+          </div>
         </svelte:fragment>
       </TabControl>
     </FormValues>
@@ -105,4 +142,11 @@
     overflow-x: scroll;
     display: flex;
   }
+
+  .editor {
+    position: relative;
+    height: 200px;
+    width: 400px;
+    margin-left: var(--dim-large-form-margin);
+  }
 </style>

packages/web/src/stores.ts

@@ -56,6 +56,9 @@ export const commands = writable({});
 export const currentTheme = getElectron()
   ? writableSettingsValue('theme-light', 'currentTheme')
   : writableWithStorage('theme-light', 'currentTheme');
+export const currentEditorTheme = getElectron()
+  ? writableSettingsValue(null, 'currentEditorTheme')
+  : writableWithStorage(null, 'currentEditorTheme');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
 export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected));
 export const recentDatabases = writableWithStorage([], 'recentDatabases');