blade/materialious
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved color picker

Browse Source
This commit is contained in:
WardPearce
2026-02-09 17:44:18 +13:00
parent d8d92061ca
commit 6c62071acd
5 changed files with 127 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
materialious/electron/src/setup.ts
+2
View File
@@ -190,6 +190,8 @@ export class ElectronCapacitorApp {
globalShortcut.register('Control+Shift+I', () => {
this.MainWindow.webContents.toggleDevTools();
});
this.MainWindow.webContents.toggleDevTools();
// Security
this.MainWindow.webContents.setWindowOpenHandler((details) => {
shell.openExternal(details.url);
materialious/package-lock.json
Generated
+37 -2
View File
@@ -1,12 +1,12 @@
{
"name": "materialious",
"version": "1.13.11",
"version": "1.13.14",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "materialious",
"version": "1.13.11",
"version": "1.13.14",
"hasInstallScript": true,
"dependencies": {
"@capacitor-community/electron": "^5.0.1",
@@ -65,6 +65,7 @@
"prettier": "^3.6.2",
"prettier-plugin-svelte": "^3.4.0",
"svelte": "^5.47.0",
"svelte-awesome-color-picker": "^4.1.1",
"svelte-check": "^4.3.3",
"tslib": "^2.7.0",
"typescript": "^5.9.3",
@@ -5611,6 +5612,13 @@
"simple-swizzle": "^0.2.2"
}
},
"node_modules/colord": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
"dev": true,
"license": "MIT"
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -12540,6 +12548,33 @@
"node": ">=18"
}
},
"node_modules/svelte-awesome-color-picker": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/svelte-awesome-color-picker/-/svelte-awesome-color-picker-4.1.1.tgz",
"integrity": "sha512-k4APFGBFN8EpvUS0UJfdlqj8xDekMbqGBwnDYBK1QCY8kcTXSO8c7SitEk70MkiYOIByOgXlHcjaipy6H7dpAw==",
"dev": true,
"license": "MIT",
"dependencies": {
"colord": "^2.9.3",
"svelte-awesome-slider": "2.0.0"
},
"engines": {
"node": ">=24"
},
"peerDependencies": {
"svelte": "^5.0.0"
}
},
"node_modules/svelte-awesome-slider": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/svelte-awesome-slider/-/svelte-awesome-slider-2.0.0.tgz",
"integrity": "sha512-YBkOdYm1Feaqsn2JkJBRs+Kc/X3Qy/3GuVmI7GmoYDjBaHkjx9uH4khTuED22z57Hg3gGWeDhp/clIjWDdLNaw==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"svelte": "^5.0.0"
}
},
"node_modules/svelte-check": {
"version": "4.3.5",
"resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-4.3.5.tgz",
materialious/package.json
+2 -1
View File
@@ -34,6 +34,7 @@
"prettier": "^3.6.2",
"prettier-plugin-svelte": "^3.4.0",
"svelte": "^5.47.0",
"svelte-awesome-color-picker": "^4.1.1",
"svelte-check": "^4.3.3",
"tslib": "^2.7.0",
"typescript": "^5.9.3",
@@ -79,4 +80,4 @@
"youtubei.js": "^16.0.1",
"zod": "^4.3.6"
}
}
}
materialious/src/lib/components/settings/Interface.svelte
+59 -11
View File
@@ -8,10 +8,12 @@
import { Capacitor } from '@capacitor/core';
import ui from 'beercss';
import { iso31661 } from 'iso-3166';
import type { RgbaColor, HsvaColor, Colord } from 'colord';
import { _ } from '$lib/i18n';
import { get } from 'svelte/store';
import { ensureNoTrailingSlash } from '../../misc';
import { ensureNoTrailingSlash, isMobile } from '../../misc';
import { getPages, type Pages } from '../../navPages';
import ColorPicker from 'svelte-awesome-color-picker';
import {
authStore,
darkModeStore,
@@ -40,12 +42,22 @@
let defaultPage = $state(get(interfaceDefaultPage));
let invalidInstance = $state(false);
let colorPickerOpen = $state(false);
let colorPickerDebounce: ReturnType<typeof setTimeout>;
async function setColor(color: any) {
const target = color.target;
const hex = (target as { value: string }).value;
setAmoledTheme();
themeColorStore.set(hex);
async function setColor(color: {
hsv: HsvaColor | null;
rgb: RgbaColor | null;
hex: string | null;
color: Colord | null;
}) {
if (!color.hex) return;
if (colorPickerDebounce) clearTimeout(colorPickerDebounce);
colorPickerDebounce = setTimeout(() => {
setAmoledTheme();
themeColorStore.set(color.hex);
}, 10);
}
function toggleDarkMode() {
@@ -140,8 +152,11 @@
</button>
</nav>
</form>
{#if invalidInstance}
<div style="margin-bottom: 6em;"></div>
{#if isMobile()}
{#if invalidInstance}
<div style="margin-bottom: 6em;"></div>
{/if}
{/if}
{#if Capacitor.isNativePlatform() && (invalidInstance || $interfaceAllowInsecureRequests)}
@@ -173,13 +188,27 @@
<span>{$_('layout.theme.lightMode')}</span>
{/if}
</button>
<button>
<button onclick={() => (colorPickerOpen = !colorPickerOpen)}>
<i>palette</i>
<span>{$_('layout.theme.color')}</span>
<input onchange={setColor} type="color" />
</button>
<div class="margin"></div>
{#if colorPickerOpen}
<div class="space"></div>
<div class="color-picker">
<ColorPicker
isTextInput={false}
isDialog={false}
onInput={setColor}
position="responsive"
isAlpha={false}
sliderDirection="horizontal"
/>
</div>
{/if}
<div class="space"></div>
{#if $darkModeStore}
<div class="field no-margin">
@@ -413,3 +442,22 @@
>
</div>
{/if}
<style>
.color-picker {
--cp-bg-color: var(--surface-container);
--cp-border-color: transparent;
--cp-text-color: var(--on-surface);
--cp-input-color: var(--surface);
--cp-button-hover-color: var(--surface-variant);
--slider-width: 50px;
--picker-width: 60vw;
width: 100%;
}
@media screen and (max-width: 640px) {
.color-picker {
--picker-width: 85vw;
}
}
</style>
materialious/src/lib/css/global.css
+27 -1
View File
@@ -19,7 +19,7 @@ body {
overflow: hidden;
}
:has(>main) {
:has(> main) {
height: 100%;
min-height: 0;
overflow: hidden;
@@ -96,6 +96,32 @@ menu {
right: 0;
}
.color-picker .picker {
display: none;
}
.color-picker .thumb {
height: 20px;
width: 20px;
opacity: 0.5;
}
.color-picker div {
margin: 0;
padding: 0;
width: 100%;
}
.color-picker .track {
border-radius: 0.25rem;
}
.color-picker .h {
margin-top: 0 !important;
justify-content: flex-start !important;
margin: 0 !important;
}
@media screen and (max-width: 1000px) {
menu.mobile {
position: fixed !important;