tom/edentext
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust dark theme to true color and use turquoise-grey

Browse Source
This commit is contained in:
Steffen Becker committed 2026-05-29 10:24:11 +02:00
1 parent 8a92ee7400
commit a2e1a6ffe9
5 files changed
+51 -35
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

CHANGELOG.md
+1 -5
View File
@@ -22,13 +22,9 @@
- Filename derived from first H1/H2/H3 heading, fallback `document.odt`
- Favicon (hand-coded SVG, no external assets)
- Lists (ordered / unordered)
- Light / Dark / Auto appearance mode (settings menu in toolbar)
- Light / Dark / Allblack / Auto appearance mode (settings menu in toolbar)
- expandable extended toolbar
- DIN A4 print layout with visual page breaks
- Repeating multi-page background (page surface + gap between pages)
- Shadow edges at page boundaries for depth effect
- Dynamic page snapping (editor always shows full pages)
- Print-ready @media print styles with @page A4 sizing
- add bottom toolbar to show page number
- Zoom feature
- font selection
src/App.svelte
+13 -11
View File
@@ -118,6 +118,10 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M13.5 10A6 6 0 0 1 6 2.5a6 6 0 1 0 7.5 7.5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
</svg>
{:else if themeMode === 'allBlack'}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<circle cx="8" cy="8" r="5.5" fill="currentColor"/>
</svg>
{:else}
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<rect x="1" y="2" width="14" height="9" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
@@ -128,7 +132,7 @@
</button>
{#if themeOpen}
<div class="theme-dropdown" role="menu">
{#each ([['light', 'Light'], ['dark', 'Dark'], ['auto', 'Auto']] as const) as [m, label]}
{#each ([['light', 'Light'], ['dark', 'Dark'], ['allBlack', 'AllBlack'], ['auto', 'Auto']] as const) as [m, label]}
<button
class="theme-option"
class:selected={themeMode === m}
@@ -317,7 +321,7 @@
}
.export-btn:hover:not(:disabled) {
background: var(--color-primary-hover);
background: var(--color-btn-hover);
}
.export-btn:disabled {
@@ -338,7 +342,7 @@
border-top: 1px solid var(--color-border);
font-family: var(--font-sans);
font-size: 0.75rem;
color: var(--color-text-muted);
color: var(--color-text);
user-select: none;
z-index: 50;
}
@@ -359,16 +363,15 @@
padding: 0;
border: none;
background: transparent;
color: var(--color-text-muted);
color: var(--color-text);
font-size: 14px;
line-height: 1;
cursor: pointer;
border-radius: 2px;
transition: color 0.1s, background 0.1s;
transition: background 0.1s;
}
.zoom-btn:hover:not(:disabled) {
color: var(--color-text);
background: var(--color-btn-hover);
}
@@ -394,7 +397,7 @@
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-text-muted);
background: var(--color-text);
cursor: pointer;
transition: background 0.1s;
}
@@ -409,7 +412,7 @@
height: 10px;
border: none;
border-radius: 50%;
background: var(--color-text-muted);
background: var(--color-text);
cursor: pointer;
transition: background 0.1s;
}
@@ -424,17 +427,16 @@
padding: 0 3px;
border: none;
background: transparent;
color: var(--color-text-muted);
color: var(--color-text);
font-family: var(--font-sans);
font-size: 0.75rem;
text-align: right;
cursor: pointer;
border-radius: 2px;
transition: color 0.1s, background 0.1s;
transition: background 0.1s;
}
.zoom-pct:hover {
color: var(--color-text);
background: var(--color-btn-hover);
}
</style>
src/lib/storage/theme.ts
+3 -3
View File
@@ -1,4 +1,4 @@
export type ThemeMode = 'light' | 'dark' | 'auto';
export type ThemeMode = 'light' | 'dark' | 'allBlack' | 'auto';
const THEME_KEY = 'odf-editor-theme';
const TOOLBAR_KEY = 'odf-editor-toolbar-expanded';
@@ -6,7 +6,7 @@ const FORMATTING_MARKS_KEY = 'odf-editor-formatting-marks';
export function loadTheme(): ThemeMode {
const saved = localStorage.getItem(THEME_KEY);
if (saved === 'light' || saved === 'dark' || saved === 'auto') return saved;
if (saved === 'light' || saved === 'dark' || saved === 'allBlack' || saved === 'auto') return saved;
return 'auto';
}
@@ -30,7 +30,7 @@ export function saveFormattingMarks(enabled: boolean): void {
localStorage.setItem(FORMATTING_MARKS_KEY, String(enabled));
}
function resolveMode(mode: ThemeMode): 'light' | 'dark' {
function resolveMode(mode: ThemeMode): 'light' | 'dark' | 'allBlack' {
if (mode === 'auto') {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
src/styles/editor.css
+11 -11
View File
@@ -25,43 +25,43 @@
font-family: var(--font-serif);
font-size: 1.05rem;
line-height: 1.5;
color: var(--color-text);
color: var(--color-page-text);
/* Multi-page background: page surfaces separated by editor background */
background:
/* Left border per page */
repeating-linear-gradient(
to bottom,
var(--color-border) 0px,
var(--color-border) var(--page-height),
var(--color-page-border) 0px,
var(--color-page-border) var(--page-height),
transparent var(--page-height),
transparent var(--page-cycle)
),
/* Right border per page */
repeating-linear-gradient(
to bottom,
var(--color-border) 0px,
var(--color-border) var(--page-height),
var(--color-page-border) 0px,
var(--color-page-border) var(--page-height),
transparent var(--page-height),
transparent var(--page-cycle)
),
/* Top/bottom border lines of each page */
repeating-linear-gradient(
to bottom,
var(--color-border) 0px,
var(--color-border) 1px,
var(--color-page-border) 0px,
var(--color-page-border) 1px,
transparent 1px,
transparent calc(var(--page-height) - 1px),
var(--color-border) calc(var(--page-height) - 1px),
var(--color-border) var(--page-height),
var(--color-page-border) calc(var(--page-height) - 1px),
var(--color-page-border) var(--page-height),
transparent var(--page-height),
transparent var(--page-cycle)
),
/* Page surface (white) alternating with gap (transparent = editor bg shows) */
repeating-linear-gradient(
to bottom,
var(--color-surface) 0px,
var(--color-surface) var(--page-height),
var(--color-page-bg) 0px,
var(--color-page-bg) var(--page-height),
transparent var(--page-height),
transparent var(--page-cycle)
);
src/styles/global.css
+23 -5
View File
@@ -19,22 +19,40 @@
--color-border: #e2e8f0;
--color-text: #1e293b;
--color-text-muted: #94a3b8;
--color-primary: #3b82f6;
--color-primary-hover: #2563eb;
--color-primary: #52748b;
--color-toolbar-bg: #ffffff;
--color-btn-hover: #cbd5e1;
--color-page-bg: #ffffff;
--color-page-text: #1e293b;
--color-page-border: #e2e8f0;
}
[data-theme="dark"] {
--color-bg: #0d1117;
--color-surface: #161b22;
--color-border: #30363d;
--color-text: #e6edf3;
--color-text: #f2e6f3;
--color-text-muted: #7d8590;
--color-primary: #2f81f7;
--color-primary-hover: #388bfd;
--color-primary: #52748b;
--color-toolbar-bg: #161b22;
--color-btn-hover: #3b4350;
--color-page-bg: #ffffff;
--color-page-text: #1e293b;
--color-page-border: #e2e8f0;
}
[data-theme="allBlack"] {
--color-bg: #0d1117;
--color-surface: #161b22;
--color-border: #30363d;
--color-text: #e6edf3;
--color-text-muted: #7d8590;
--color-primary: #52748b;
--color-toolbar-bg: #161b22;
--color-btn-hover: #3b4350;
--color-page-bg: #161b22;
--color-page-text: #e6edf3;
--color-page-border: #30363d;
}
html, body {