Skip to content

Commit

Permalink
Use style variables and settings file for theme support
Browse files Browse the repository at this point in the history
  • Loading branch information
xcmd-io committed Dec 3, 2023
1 parent 9c1b947 commit bb3cc1a
Show file tree
Hide file tree
Showing 15 changed files with 311 additions and 39 deletions.
19 changes: 17 additions & 2 deletions Cargo.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 6 additions & 3 deletions xcmd-tauri/dist/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ body {
margin: 0;
padding: 0;
padding-top: 3px;
background: #eee;
color: var(--foreground);
background: var(--background);
box-sizing: border-box;
cursor: default;
-webkit-user-select: none;
Expand Down Expand Up @@ -49,10 +50,12 @@ input {
box-sizing: border-box;
padding: 3px;
width: 100%;
border: 1px solid #eee;
border: 1px solid var(--background);
color: var(--input-foreground);
background: var(--input-background);
}
.address:focus {
border: 1px solid #06b;
border: 1px solid var(--input-border);
outline: none;
}

Expand Down
16 changes: 16 additions & 0 deletions xcmd-tauri/dist/index.mjs
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
import { Store } from './modules/tauri-plugin-store-api.mjs';
import stylesheet from './index.css' assert { type: 'css' };
import defaultThemeStylesheet from './themes/light.css' assert { type: 'css' };
import { Code, getKey } from './keyboard.mjs';
import { Palette } from './palette/palette.mjs';
import { Pane } from './pane.mjs';
import { VSplit } from './vsplit/vsplit.mjs';

const store = new Store('settings.json');
const theme = await store.get('theme') ?? 'light';
document.adoptedStyleSheets.push(defaultThemeStylesheet);

if (theme) {
try {
console.log(`loading theme: ${theme}`);
const themeStylesheet = await import(`./themes/${theme}.css`, { assert: { type: 'css' } });
document.adoptedStyleSheets.push(themeStylesheet.default);
} catch (e) {
console.log(`loading theme failed: ${e}`);
}
}

document.adoptedStyleSheets.push(stylesheet);

const vsplit = /** @type {HTMLElement} */ (document.getElementById('vsplit'));
Expand Down
180 changes: 180 additions & 0 deletions xcmd-tauri/dist/modules/tauri-plugin-store-api.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
// @ts-nocheck
const invoke = window.__TAURI__.invoke;
const listen = window.__TAURI__.listen;

// Copyright 2021 Tauri Programme within The Commons Conservancy
// SPDX-License-Identifier: Apache-2.0
// SPDX-License-Identifier: MIT
/**
* A key-value store persisted by the backend layer.
*/
class Store {
constructor(path) {
this.path = path;
}
/**
* Inserts a key-value pair into the store.
*
* @param key
* @param value
* @returns
*/
async set(key, value) {
return await invoke("plugin:store|set", {
path: this.path,
key,
value,
});
}
/**
* Returns the value for the given `key` or `null` the key does not exist.
*
* @param key
* @returns
*/
async get(key) {
return await invoke("plugin:store|get", {
path: this.path,
key,
});
}
/**
* Returns `true` if the given `key` exists in the store.
*
* @param key
* @returns
*/
async has(key) {
return await invoke("plugin:store|has", {
path: this.path,
key,
});
}
/**
* Removes a key-value pair from the store.
*
* @param key
* @returns
*/
async delete(key) {
return await invoke("plugin:store|delete", {
path: this.path,
key,
});
}
/**
* Clears the store, removing all key-value pairs.
*
* Note: To clear the storage and reset it to it's `default` value, use `reset` instead.
* @returns
*/
async clear() {
return await invoke("plugin:store|clear", {
path: this.path,
});
}
/**
* Resets the store to it's `default` value.
*
* If no default value has been set, this method behaves identical to `clear`.
* @returns
*/
async reset() {
return await invoke("plugin:store|reset", {
path: this.path,
});
}
/**
* Returns a list of all key in the store.
*
* @returns
*/
async keys() {
return await invoke("plugin:store|keys", {
path: this.path,
});
}
/**
* Returns a list of all values in the store.
*
* @returns
*/
async values() {
return await invoke("plugin:store|values", {
path: this.path,
});
}
/**
* Returns a list of all entries in the store.
*
* @returns
*/
async entries() {
return await invoke("plugin:store|entries", {
path: this.path,
});
}
/**
* Returns the number of key-value pairs in the store.
*
* @returns
*/
async length() {
return await invoke("plugin:store|length", {
path: this.path,
});
}
/**
* Attempts to load the on-disk state at the stores `path` into memory.
*
* This method is useful if the on-disk state was edited by the user and you want to synchronize the changes.
*
* Note: This method does not emit change events.
* @returns
*/
async load() {
return await invoke("plugin:store|load", {
path: this.path,
});
}
/**
* Saves the store to disk at the stores `path`.
*
* As the store is only persisted to disk before the apps exit, changes might be lost in a crash.
* This method lets you persist the store to disk whenever you deem necessary.
* @returns
*/
async save() {
return await invoke("plugin:store|save", {
path: this.path,
});
}
/**
* Listen to changes on a store key.
* @param key
* @param cb
* @returns A promise resolving to a function to unlisten to the event.
*/
async onKeyChange(key, cb) {
return await listen("store://change", (event) => {
if (event.payload.path === this.path && event.payload.key === key) {
cb(event.payload.value);
}
});
}
/**
* Listen to changes on the store.
* @param cb
* @returns A promise resolving to a function to unlisten to the event.
*/
async onChange(cb) {
return await listen("store://change", (event) => {
if (event.payload.path === this.path) {
cb(event.payload.key, event.payload.value);
}
});
}
}

export { Store };
//# sourceMappingURL=index.mjs.map
25 changes: 15 additions & 10 deletions xcmd-tauri/dist/palette/palette.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@
border-spacing: 0;
white-space: nowrap;
table-layout: fixed;
border: 1px solid #ccc;
background: #eee;
border: 1px solid var(--border);
color: var(--foreground);
background: var(--background);
box-sizing: border-box;
box-shadow: 0 0 6px #ccc;
box-shadow: 0 0 6px var(--border);
padding: 3px;
}

Expand All @@ -28,12 +29,14 @@
box-sizing: border-box;
padding: 3px;
width: 100%;
border: 1px solid #ccc;
color: var(--input-foreground);
background: var(--input-background);
border: 1px solid var(--border);
}

.palette input:focus {
outline: 0;
border: 1px solid #06b;
border: 1px solid var(--input-border);
}

.palette .vtable {
Expand All @@ -44,8 +47,9 @@
border-spacing: 0;
white-space: nowrap;
table-layout: fixed;
border: 1px solid #ccc;
background: #fff;
border: 1px solid var(--border);
color: var(--input-foreground);
background: var(--input-background);
}

.palette .vtable,
Expand All @@ -61,8 +65,9 @@
width: 100%;
overflow: scroll;
overflow-x: hidden;
scrollbar-color: #eee #eee;
background: #eee;
color: var(--foreground);
background: var(--background);
scrollbar-color: var(--background) var(--background);
top: 0;
}

Expand Down Expand Up @@ -99,7 +104,7 @@
}

.palette .vtable tbody tr:focus {
outline: 1px #000 dotted;
outline: 1px var(--outline) dotted;
}

.palette .vtable--align-right {
Expand Down
16 changes: 10 additions & 6 deletions xcmd-tauri/dist/tabs/tabs.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ ul.tabs {
padding: 0;
overflow-x: scroll;
width: 100%;
color: var(--foreground);
background: var(--background);
}

ul.tabs li {
Expand All @@ -16,22 +18,24 @@ ul.tabs li {
white-space: nowrap;
margin: 0;
padding: 4px;
background: #eee;
border: 1px solid #eee;
border-right-color: #ddd;
color: var(--foreground);
background: var(--background);
border: 1px solid var(--background);
border-right-color: var(--border);
}

ul.tabs li.selected {
background: #fff;
border-bottom-color: #fff;
color: var(--input-foreground);
background: var(--input-background);
border-bottom-color: var(--input-background);
}

ul.tabs::-webkit-scrollbar {
height: 3px;
}

ul.tabs::-webkit-scrollbar-track {
background: #fff;
background: var(--input-background);
}

ul.tabs::-webkit-scrollbar-thumb {
Expand Down
9 changes: 9 additions & 0 deletions xcmd-tauri/dist/themes/dark.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
:root {
--foreground: #ccc;
--background: #2d2d2d;
--border: #3b3b3b;
--outline: #aaa;
--input-foreground: #aaa;
--input-background: #1e1e1e;
--input-border: #2d495c;
}
9 changes: 9 additions & 0 deletions xcmd-tauri/dist/themes/light.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
:root {
--foreground: #333;
--background: #eee;
--border: #ccc;
--outline: #000;
--input-foreground: #000;
--input-background: #fff;
--input-border: #06b;
}
Loading

0 comments on commit bb3cc1a

Please sign in to comment.