openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Dark Mode Toggle + RRULE UI für wiederkehrende Aufgaben/Termine

Browse Source 
Dark Mode: Manueller Theme-Switch (System/Hell/Dunkel) in Einstellungen
mit localStorage-Persistenz und Flash-Prevention via data-theme Attribut.

RRULE UI: Wiederholungs-Formular in Aufgaben- und Kalender-Modals mit
Frequenz (Täglich/Wöchentlich/Monatlich), Intervall, Wochentag-Auswahl
und optionalem Enddatum. Backend-Routen für is_recurring/recurrence_rule
in POST/PUT erweitert. Repeat-Icon auf wiederkehrenden Einträgen.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-26 00:11:45 +01:00
parent 093b6a8736
commit f507ef8488
10 changed files with 479 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/layout.css
+78
View File
@@ -1020,6 +1020,84 @@
to { opacity: 0; transform: scale(0.95) translateY(4px); }
}
/* --------------------------------------------------------
* RRULE-Felder (Wiederholungs-Formular, shared Tasks + Kalender)
* -------------------------------------------------------- */
.rrule-fields {
margin-top: var(--space-4);
border-top: 1px solid var(--color-border-subtle);
padding-top: var(--space-4);
}
.rrule-details {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-3);
padding: var(--space-3);
background: var(--color-surface-2);
border-radius: var(--radius-sm);
}
.rrule-row {
display: flex;
align-items: flex-end;
gap: var(--space-3);
}
.rrule-interval-wrap {
display: flex;
align-items: center;
gap: var(--space-2);
}
.rrule-interval-unit {
font-size: var(--text-sm);
color: var(--color-text-secondary);
white-space: nowrap;
}
.rrule-day-grid {
display: flex;
gap: var(--space-1);
flex-wrap: wrap;
margin-top: var(--space-1);
}
.rrule-day {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border);
background: transparent;
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
min-height: unset;
}
.rrule-day:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
.rrule-day--active {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
.rrule-day--active:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
}
/* --------------------------------------------------------
* Print-Styles
* -------------------------------------------------------- */
public/styles/settings.css
+43
View File
@@ -262,6 +262,49 @@
width: 100%;
}
/* --------------------------------------------------------
Theme-Toggle
-------------------------------------------------------- */
.theme-toggle {
display: flex;
gap: var(--space-2);
}
.theme-toggle__btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border);
background: transparent;
color: var(--color-text-secondary);
font-size: var(--text-sm);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-fast);
min-height: 44px;
}
.theme-toggle__btn:hover {
border-color: var(--color-text-secondary);
color: var(--color-text-primary);
}
.theme-toggle__btn--active {
background: var(--color-accent-light);
border-color: var(--color-accent);
color: var(--color-accent);
}
.theme-toggle__btn--active:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
/* --------------------------------------------------------
Abmelden
-------------------------------------------------------- */
public/styles/tokens.css
+54 -1
View File
@@ -241,9 +241,13 @@
/* ================================================================
* Dark Mode
* Zwei Selektoren: (1) System-Preference, (2) manueller Override
* via data-theme="dark" auf <html>.
* data-theme="light" erzwingt Light Mode (kein Dark-Override).
* Ohne data-theme folgt die App der System-Einstellung.
* ================================================================ */
@media (prefers-color-scheme: dark) {
:root {
:root:not([data-theme="light"]) {
/* Neutral-Skala invertiert (warm-dunkel) */
--neutral-50: #1A1A18;
--neutral-100: #222220;
@@ -301,3 +305,52 @@
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
}
}
/* Manueller Dark-Mode-Override: data-theme="dark" auf <html> */
:root[data-theme="dark"] {
--neutral-50: #1A1A18;
--neutral-100: #222220;
--neutral-150: #2A2A28;
--neutral-200: #333331;
--neutral-250: #3D3D3A;
--neutral-300: #48484A;
--neutral-400: #636360;
--neutral-500: #8E8D89;
--neutral-600: #AEADB0;
--neutral-700: #C8C7C3;
--neutral-800: #E2E1DC;
--neutral-900: #F5F4F1;
--neutral-950: #FAFAF8;
--color-surface: #2A2A28;
--color-surface-2: #1A1A18;
--color-surface-3: #333331;
--sidebar-bg: #1A1A18;
--sidebar-shadow-light: rgba(255, 255, 255, 0.04);
--sidebar-shadow-dark: rgba(0, 0, 0, 0.4);
--color-accent-light: #1A2D4D;
--color-accent-subtle: #162442;
--color-success-light: #1A3325;
--color-warning-light: #332400;
--color-danger-light: #3D1C1A;
--color-info-light: #1A2D40;
--meal-breakfast-light: #332400;
--meal-lunch-light: #1A3325;
--meal-dinner-light: #1A2D4D;
--meal-snack-light: #3D2010;
--color-priority-low-bg: rgba(142, 141, 137, 0.18);
--color-priority-medium-bg: rgba(230, 147, 10, 0.18);
--color-priority-high-bg: rgba(212, 81, 30, 0.18);
--color-priority-urgent-bg: rgba(229, 83, 75, 0.18);
--color-overlay: rgba(0, 0, 0, 0.6);
--color-overlay-light: rgba(0, 0, 0, 0.35);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
}