Add ink theme and remove onyx border class

Add an "Ink" theme for e-ink displays and remove the previously applied
onyx-border class from the App container. The new theme defines
high-contrast monochrome variables, suppresses shadows and decorative
effects, adjusts scrollbars and select options, and adds a subtle
linux-window-border color suitable for e-ink screens. The onyx border
CSS was removed and the App.svelte container no longer toggles the
onyx-border class; the Settings screen now includes the Ink option in
the theme selector.
Remove unnecessary blank line in app.css

Remove an unneeded blank line in the Tauri app stylesheet. The extra
line was left behind when considering a mode elimination and is not
required, so this cleans up the CSS file to keep it tidy and consistent.
This commit is contained in:
Tristan Michael 2026-04-14 05:27:21 -07:00
parent fdc556ddd5
commit 31af983640
3 changed files with 38 additions and 5 deletions

View file

@ -14,7 +14,7 @@
</script> </script>
<div class={app.isDark ? "dark" : ""} data-theme={app.currentTheme ?? ""}> <div class={app.isDark ? "dark" : ""} data-theme={app.currentTheme ?? ""}>
<div class="h-screen w-screen" class:p-2={isLinux} class:onyx-border={app.currentTheme === "onyx"}> <div class="h-screen w-screen" class:p-2={isLinux}>
<div <div
class="relative h-full w-full overflow-hidden bg-surface-light text-text-light dark:bg-surface-dark dark:text-text-dark" class="relative h-full w-full overflow-hidden bg-surface-light text-text-light dark:bg-surface-dark dark:text-text-dark"
class:rounded-xl={isLinux} class:rounded-xl={isLinux}

View file

@ -195,10 +195,6 @@ body {
border-color: rgba(209, 191, 130, 0.15); border-color: rgba(209, 191, 130, 0.15);
} }
/* Thick gold window border */
[data-theme="onyx"] .onyx-border {
border: 3px solid #a6905a;
}
[data-theme="solarized"] { [data-theme="solarized"] {
--color-primary: #268bd2; --color-primary: #268bd2;
@ -216,6 +212,42 @@ body {
--color-danger: #dc322f; --color-danger: #dc322f;
} }
/* ── Ink (e-ink screen) theme ────────────────────────────────────── */
[data-theme="ink"] {
--color-primary: #000000;
--color-primary-hover: #1a1a1a;
--color-surface-light: #ffffff;
--color-surface-dark: #ffffff;
--color-card-light: #f0f0f0;
--color-card-dark: #f0f0f0;
--color-text-light: #000000;
--color-text-dark: #000000;
--color-text-secondary-light: #444444;
--color-text-secondary-dark: #444444;
--color-border-light: #000000;
--color-border-dark: #000000;
--color-danger: #000000;
}
/* Suppress all shadows and decorative effects on ink screens */
[data-theme="ink"] * {
box-shadow: none !important;
text-shadow: none !important;
scrollbar-color: #444444 transparent;
}
[data-theme="ink"] ::-webkit-scrollbar-thumb {
background: #444444;
}
[data-theme="ink"] select option {
background-color: #ffffff;
color: #000000;
}
[data-theme="ink"] .linux-window-border {
border-color: rgba(0, 0, 0, 0.5);
}
/* ── Accessibility: Reduced motion ───────────────────────────────── */ /* ── Accessibility: Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {

View file

@ -260,6 +260,7 @@
<option value="dracula">Dracula</option> <option value="dracula">Dracula</option>
<option value="solarized">Solarized Dark</option> <option value="solarized">Solarized Dark</option>
<option value="onyx">Black and Gold</option> <option value="onyx">Black and Gold</option>
<option value="ink">Ink</option>
</select> </select>
</section> </section>