themes

packages/types/extensions.d.ts

@@ -24,6 +24,7 @@ export interface FileFormatDefinition {
 export interface ThemeDefinition {
   className: string;
   themeName: string;
+  themeType: 'light' | 'dark';
 }
 
 export interface PluginDefinition {

packages/web/src/Screen.svelte

@@ -3,6 +3,7 @@
   import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
   import {
     currentTheme,
+    currentThemeDefinition,
     isFileDragActive,
     leftPanelWidth,
     selectedWidget,
@@ -19,9 +20,11 @@
   import ModalLayer from './modals/ModalLayer.svelte';
   import DragAndDropFileTarget from './DragAndDropFileTarget.svelte';
   import dragDropFileTarget from './utility/dragDropFileTarget';
+
+  $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 </script>
 
-<div class={`${$currentTheme} root`} use:dragDropFileTarget>
+<div class={`${$currentTheme} ${currentThemeType} root`} use:dragDropFileTarget>
   <div class="iconbar">
     <WidgetIconPanel />
   </div>
@@ -126,6 +129,7 @@
     height: var(--dim-toolbar-height);
     left: 0;
     right: 0;
+    background: var(--theme-bg-1);
   }
 
   .splitter {

packages/web/src/celldata/JsonCellView.svelte

@@ -38,4 +38,17 @@
     right: 0;
     bottom: 0;
   }
+
+  :global(.theme-type-dark) .inner {
+    --json-tree-string-color: #efc5c5;
+    --json-tree-symbol-color: #efc5c5;
+    --json-tree-boolean-color: #a6b3f5;
+    --json-tree-function-color: #a6b3f5;
+    --json-tree-number-color: #bfbdf2;
+    --json-tree-label-color: #e9aaed;
+    --json-tree-arrow-color: #d4d4d4;
+    --json-tree-null-color: #dcdcdc;
+    --json-tree-undefined-color: #dcdcdc;
+    --json-tree-date-color: #dcdcdc;
+  }
 </style>

packages/web/src/charts/DataChart.svelte

@@ -48,8 +48,9 @@
     return {};
   }
 
-  function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType, dataColumnColors) {
+  function createChartData(freeData, labelColumn, dataColumns, colorSeed, chartType, dataColumnColors, themeDef) {
     if (!freeData || !labelColumn || !dataColumns || !freeData.rows || dataColumns.length == 0) return null;
+    const palettes = themeDef?.themeType == 'dark' ? presetDarkPalettes : presetPalettes;
     const colors = randomcolor({
       count: _.max([freeData.rows.length, dataColumns.length, 1]),
       seed: colorSeed,
@@ -65,8 +66,8 @@
         if (chartType == 'line' || chartType == 'bar') {
           const color = dataColumnColors[dataColumn];
           if (color) {
-            backgroundColor = presetPalettes[color][4] + '80';
+            backgroundColor = palettes[color][4] + '80';
-            borderColor = presetPalettes[color][7];
+            borderColor = palettes[color][7];
           } else {
             backgroundColor = colors[columnIndex] + '80';
             borderColor = colors[columnIndex];
@@ -98,6 +99,7 @@
   import { getFormContext } from '../forms/FormProviderCore.svelte';
   import { generate, presetPalettes, presetDarkPalettes, presetPrimaryColors } from '@ant-design/colors';
   import { extractDataColumnColors, extractDataColumns } from './chartDataLoader';
+  import { currentThemeDefinition } from '../stores';
 
   export let data;
   export let menu;
@@ -116,7 +118,8 @@
     dataColumns,
     $values.colorSeed || '5',
     $values.chartType,
-    dataColumnColors
+    dataColumnColors,
+    $currentThemeDefinition
   );
 </script>
 

packages/web/src/forms/SelectField.svelte

@@ -32,6 +32,7 @@
     {/each}
   </select>
 {:else}
+  <div class="select">
     <SvelteSelect
       {...$$restProps}
       items={options}
@@ -54,4 +55,29 @@
       bind:listOpen
       bind:isFocused
     />
+  </div>
 {/if}
+
+<style>
+  .select {
+    --border: 1px solid var(--theme-border);
+    --placeholderColor: var(--theme-font-2);
+    --background: var(--theme-bg-0);
+    --listBackground: var(--theme-bg-1);
+    --itemActiveBackground: var(--theme-bg-selected);
+    --itemIsActiveBG: var(--theme-bg-selected);
+    --itemHoverBG: var(--theme-bg-hover);
+    --itemColor: var(--theme-font-1);
+    --listEmptyColor: var(--theme-bg-0);
+
+    --multiClearBG: var(--theme-bg-3);
+    --multiClearFill: var(--theme-font-2);
+    --multiClearHoverBG: var(--theme-bg-hover);
+    --multiClearHoverFill: var(--theme-font-hover);
+    --multiItemActiveBG: var(--theme-bg-1);
+    --multiItemActiveColor: var(--theme-font-1);
+    --multiItemBG: var(--theme-bg-1);
+    --multiItemDisabledHoverBg: var(--theme-bg-1);
+    --multiItemDisabledHoverColor: var(--theme-bg-1);
+  }
+</style>

packages/web/src/forms/TextField.svelte

@@ -8,4 +8,4 @@
   if (focused) onMount(() => domEditor.focus());
 </script>
 
-<input type="text" {...$$restProps} bind:value on:change on:input bind:this={domEditor} on:keydown />
+<input type="text" {...$$restProps} bind:value on:change on:input bind:this={domEditor} on:keydown autocomplete="new-password" />

packages/web/src/plugins/ThemeDark.svelte

@@ -1,11 +1,12 @@
 <script context="module">
   export const className = 'theme-dark';
   export const themeName = 'Dark';
+  export const themeType = 'dark';
 </script>
 
 <style>
   :global(.theme-dark) {
-    --theme-font-1: #ddd;
+    --theme-font-1: #e3e3e3;
     --theme-font-2: #919191;
     --theme-font-3: #5e5e5e;
     --theme-font-4: #2b2b2b;

packages/web/src/plugins/ThemeLight.svelte

@@ -1,6 +1,7 @@
 <script context="module">
   export const className = 'theme-light';
   export const themeName = 'Light';
+  export const themeType = 'light';
 </script>
 
 <style>

packages/web/src/query/AceEditor.svelte

@@ -15,7 +15,7 @@
   import 'ace-builds/src-noconflict/theme-twilight';
   import 'ace-builds/src-noconflict/ext-searchbox';
   import 'ace-builds/src-noconflict/ext-language_tools';
-  import { currentDropDownMenu } from '../stores';
+  import { currentDropDownMenu, currentThemeDefinition } from '../stores';
   import _ from 'lodash';
   import { handleCommandKeyDown } from '../commands/CommandListener.svelte';
 
@@ -41,7 +41,7 @@
    **/
   export let value: string = ''; // String, required
   export let mode: string = 'text'; // String
-  export let theme: string = 'github'; // String
+  // export let theme: string = 'github'; // String
   export let options: any = {}; // Object
   export let menu;
   export let readOnly;
@@ -52,6 +52,8 @@
   let clientWidth;
   let clientHeight;
 
+  $: theme = $currentThemeDefinition?.themeType == 'dark' ? 'twilight' : 'github';
+
   export function getEditor(): ace.Editor {
     return editor;
   }

packages/web/src/stores.ts

@@ -49,6 +49,10 @@ export const currentArchive = writable('default');
 export const isFileDragActive = writable(false);
 export const selectedCellsCallback = writable(null);
 
+export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) =>
+  $extensions.themes.find(x => x.className == $currentTheme)
+);
+
 const electron = getElectron();
 
 subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');

packages/web/src/widgets/CellDataWidget.svelte

@@ -55,14 +55,14 @@
   $: usedFormatType = selectedFormatType == 'autodetect' ? autodetectFormatType : selectedFormatType;
   $: usedFormat = formats.find(x => x.type == usedFormatType);
 
-  $: selection = $selectedCellsCallback();
+  $: selection = $selectedCellsCallback ? $selectedCellsCallback() : [];
 </script>
 
 <div class="wrapper">
   <WidgetTitle>Cell data view</WidgetTitle>
   <div class="main">
     <div class="toolbar">
-      Format:
+      Format:<span>&nbsp;</span>
       <SelectField
         isNative
         value={selectedFormatType}
@@ -104,6 +104,8 @@
     display: flex;
     background: var(--theme-bg-1);
     align-items: center;
+    border-bottom: 1px solid var(--thene-border);
+    margin: 2px;
   }
 
   .data {