Cms-Dark-Mode - #1861
Conversation
02d3403 to
4c22df7
Compare
…ng in (#1858) Wraps the account/login banner and privacy-policy banner in Vue Transitions using the grid-template-rows 0fr->1fr technique so height (not just opacity) animates smoothly, avoiding the layout-shift jank on appearance/removal. Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
… color adjustments
- Updated background and text colors in EditContentBasic.vue, EditContentImage.vue, EditContentMedia.vue, EditContentParent.vue, TagSelector.vue, RichTextEditor.vue, FormLabel.vue, LTextToggle.vue, GroupSelector.vue, ImageEditor.vue, and MediaEditor.vue to improve visibility and aesthetics in dark mode. - Adjusted hover and active states for buttons and toggles to ensure consistent user experience in dark mode. - Ensured that error and help messages are clearly visible in both light and dark themes.
- Updated background and text colors in EditContentBasic.vue, EditContentImage.vue, EditContentMedia.vue, EditContentParent.vue, TagSelector.vue, RichTextEditor.vue, FormLabel.vue, LTextToggle.vue, GroupSelector.vue, ImageEditor.vue, and MediaEditor.vue to improve visibility and aesthetics in dark mode. - Adjusted hover and active states for buttons and toggles to ensure consistent user experience in dark mode. - Ensured that error and help messages are clearly visible in both light and dark themes.
some screenshots from the work so far...any comments? |
|
Looks good. Only thing I would say is the text feels a bit bright |
johan-bell
left a comment
johan-bell
left a comment
There was a problem hiding this comment.
The approach (Tailwind darkMode: "class" + persisted theme ref + selector modal) is right, but there are functional regressions and a consistent pattern of replacing light-mode colours instead of adding dark: variants.
Blocking — functional regressions:
LInput.vue:192—:rightAddOnDisabled/@clickwere moved outside the span's opening tag, so they render as literal text and the click handler is dead (affects LTextarea, AffinityConfigPanel).DisplayCard.vue:50— strayApplyline pasted between</script>and<template>.LButton.vue:20— thesmsize variant is commented out; ~15 files still passsize="sm"and lose their padding. Lines 45/47 also duplicate the muted compound with conflicting margins, and the primary/tertiary disabled-state classes were dropped.
Blocking — light-mode breakage (dark colours applied unconditionally): e.g. EditContentValidation.vue:160 (bg-slate-700/800 without dark:), LanguageDisplayCard.vue:31, EmptyState.vue:33, RedirectDisplaycard.vue:89, StorageFormModal.vue:220 (all text-zinc-100/200 on white cards), LCard.vue:59 (dark border in light mode), SideBar.vue:257, LanguageCoverageCard.vue:39-54 (light-mode highlight gone).
Structural: cms/index.html root keeps bg-zinc-50 text-zinc-900 with no dark variants — that's why ~100 per-component overrides were needed, and the ~71 untouched .vue files (groups/, users/, autoGroupMappings/, recommendations/) are unreadable in dark mode. Adding dark variants at the root (plus a pre-paint theme script to avoid the light flash) would shrink this PR a lot.
Minor: French comments in LCard/LInput, unused isDarkTheme export, matchMedia comment narrates the bug (see repo comment style), transparent/conflicting padding classes in DashboardStatCards.
4 participants
No description provided.