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:
parent
fdc556ddd5
commit
31af983640
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue