Style Audit Report

CloviTek Fleet Visual Analysis

Before/after style audit across 15 platforms — theme integrity, hardcoded color breakers, duplicate detection, and remediation guide.

Generated: 2026-06-17 Platforms audited: 15 Source: CSS static analysis
01 Summary Statistics
15
Platforms Audited
cloviscan → clovitek
12
Have Theme Toggle
clovipdf, clovianalytics, clovicode missing
15
Have Hardcoded Breakers
100% of platforms affected
2
Exact Color Duplicates
#4f46e5 (Legal+Tek), #f59e0b (PDF+Learn)
8
HIGH Severity
No CSS vars + many breakers
5
MEDIUM Severity
Partial vars, few breakers
2
LOW Severity
clovihuman, cloviscan
6
Platforms Without CSS Vars
cloviable, clovicharts, clovipdf, clovidecks, clovianalytics, clovicode
02 Color Uniqueness Map — Assigned Brand Colors

All 15 platform assigned brand colors. Red border = confirmed duplicate with another platform. Additional cross-platform color clashes noted below.

CloviScan
#F43F5E — Rose
CloviAble
#84CC16 — Lime
CloviLegal
#4F46E5 — Deep Indigo
DUPLICATE
Conflicts with CloviTek (#4F46E5)
CloviCharts
#0EA5E9 — Sky Blue
Assigned only — page uses violet #7c3aed
CloviPDF
#F59E0B — Amber
DUPLICATE
Conflicts with CloviLearn (#F59E0B)
CloviDecks
#7C3AED — Violet
Near-clash with CloviImage primary violet
CloviAnalytics
#06B6D4 — Cyan
Assigned only — page uses lime #84cc16
CloviImage
#EC4899 — Pink
CloviReach
#8B5CF6 — Purple
Near-clash cluster with CloviDecks, CloviImage
CloviHuman
#F97316 — Orange
CloviFlow
#10B981 — Emerald
Cross-contamination: used as accent on 4 other platforms
CloviForms
#6366F1 — Indigo
Page actually uses #7C3AED (violet), not assigned color
CloviCode
#22C55E — Green
Page dominated by orange #F97316 (18 hits)
CloviLearn
#F59E0B — Amber
DUPLICATE
Conflicts with CloviPDF (#F59E0B)
CloviTek
#4F46E5 — Deep Indigo
DUPLICATE
Conflicts with CloviLegal (#4F46E5)
Cross-Platform Near-Clash Colors (not exact dupes but visually indistinguishable)
Purple cluster: CloviDecks #7C3AED · CloviImage #7C3AED · CloviForms uses #7C3AED · CloviReach #8B5CF6
Emerald/Green cluster: CloviFlow #10B981 · CloviAble #84CC16 · CloviAnalytics #84CC16 · CloviLearn #10B981
Amber cluster: CloviPDF #F59E0B · CloviLearn #F59E0B · CloviScan #f59e0b (warn) · CloviDecks #FBBF24 · CloviForms #FBBF24
03 Per-Platform Theme Analysis
CloviScan
cloviscan.com
✓ Theme Toggle Default: Light LOW Severity Has CSS Vars
CSS Variables Defined
--brand: #F43F5E --brand-dark --brand-light --bg --surface --text --muted
Critical Hardcoded Breakers (3 of 7)
L143: .cs-logo background:linear-gradient(135deg,#be123c,#9f1239) — no theme variant
L244: .layer-tab.active background:#9f1239 — hardcoded, no theme override
L412: CTA button gradient #be123c→#9f1239 — bypasses --brand var
Well-structured dual-theme system. The --brand var is properly defined but CTAs, tabs, logo, and badges use raw dark-rose hex instead of the var, breaking on theme switch. Fix: replace 7 hardcoded instances with var(--brand-dark).
CloviAble
cloviable.com
⚠ Theme Toggle (logo only) Default: Light HIGH Severity No CSS Vars
CSS Variables
None defined — full tokenization required
Critical Hardcoded Breakers (4 of 20+)
L72: background:#0f766e; color:#fff — teal button, always dark regardless of theme
L82: background:#0f172a; color:#e2e8f0 — dark panel, inverts badly in light mode
L111: .flow-node background:#fff — card disappears on dark bg
L173: style="background:#0f766e" on CTA — inline, theme-unaware
No CSS custom properties — all colors hardcoded. Dominant teal (#0f766e, 44 hits) not the assigned lime. 20+ inline style= attributes won't adapt to any theme switch. Full tokenization pass required before dark mode can work.
CloviLegal
clovilegal.com
⚠ Theme Toggle (partial) Default: Dark MEDIUM Severity 3 CSS Vars only
CSS Variables Defined
--brand: #4f46e5 --bg: #0f0e1a --border
Critical Hardcoded Breakers
L51: .nav background:#0f0e1a — hardcoded dark nav, breaks in light mode
L165: .browser-mock background:#1a1830 — dark bg never switches
L760: color:#000 on enterprise CTA — black text on amber gradient
Dark-first single-page app. Only 3 CSS vars defined — nav and browser-mock use raw dark hex bypassing vars. Assigned indigo (#4F46E5) duplicates CloviTek's brand. Top color is #34d399 emerald (27 hits) — clashes with CloviFlow brand.
CloviCharts
clovicharts.com
✓ Theme Toggle Default: Light HIGH Severity No CSS Vars
CSS Variables
None — theming via [data-theme] class selectors only
Critical Hardcoded Breakers (4 of 10)
L86: color:#fff on hero — invisible on light background (no light override)
L131: .chart-tab.active color:#fff — active tab always white text
L325: style="color:#a78bfa" code block — always purple, no theme switch
L1077: footer border rgba(255,255,255,0.08) — near-invisible in light mode
Assigned Sky Blue (#0EA5E9) not used on page — actual brand is violet (#7c3aed). Hero text hardcoded white with no light-mode override is critical. API demo code block will be illegible in light mode. Needs color reassignment + CSS var system.
CloviPDF
clovipdf.com
✗ No Theme Toggle Default: Light HIGH Severity No CSS Vars
CSS Variables
None defined
Critical Hardcoded Breakers
L20: nav background:#1a1a2e — dark nav on light page always
L84: .features-band background:#1a1a2e — dark band in light page
L99: .code-block background:#1a1a2e — dark code block, no media query
L131: .pricing-card background:#fff — hardcoded white, fails if dark mode added
No theme toggle, no CSS vars. Mixed dark-nav + white-cards creates split personality impossible to dark-mode without full rewrite. Assigned amber (#F59E0B) only 4 times — page dominated by indigo/violet overlapping with CloviLegal, CloviForms, CloviTek. Duplicate assigned color with CloviLearn.
CloviDecks
clovidecks.com
⚠ Theme Toggle (logo only) Default: Light HIGH Severity No CSS Vars
CSS Variables
None — all hex literals
Critical Hardcoded Breakers (5 of 13)
L85: .tpl-name color:#fff — invisible on light bg
L133: .browser-chrome background:#1a1a2e — never switches
L265: .deck-thumb background:#0a0a14 — hardcoded near-black card
L931: inline style background:#16a34a — green CTA locked
L1098: inline style color:#fff in slide demo — breaks on light
html declares color-scheme:light but renders entirely dark — major mismatch. All 13+ component backgrounds hardcoded dark hex. No CSS vars. theme toggle only swaps logo image. Virtually every component will look broken in true light mode.
CloviAnalytics
clovianalytics.clovitek.com
✗ No Theme Toggle Default: Dark HIGH Severity No CSS Vars
CSS Variables
None defined
Critical Hardcoded Breakers
L33: .pill.nd background:#1a2540 — hardcoded dark bg on neutral pill
L92: select#infraHours style="background:#0c1730" — inline dark dropdown
L195: div style="background:#fff" — white bg clashes in dark dashboard
L196: iframe#replayStage background:#fff — replay iframe white on dark canvas
Dark-only cockpit with no toggle. Assigned cyan (#06B6D4) absent — page uses lime (#84cc16) overlapping CloviAble's brand. Session replay iframe/container hardcoded white creates jarring contrast against dark canvas. No CSS vars makes theming expensive.
CloviImage
cloviimage.clovitek.com
✓ Theme Toggle Default: Light MEDIUM Severity No CSS Vars
CSS Variables
None — theming via [data-theme] class selectors
Critical Hardcoded Breakers
L948: style="background:#0f0a1e" on #real-demo — outside theme system
L951: style="color:#fff" h2 inside #real-demo — no light-mode variant
L976: style="background:#1a1030" dark inline panel — no light override
L754: style="background:white" inline div — bypasses ci-card theming
Good [data-theme] coverage for nav/hero/cards/footer. Critical issue: entire #real-demo section uses hardcoded dark inline styles outside the ci-* class system — will look broken in light mode. Primary visual brand is purple (#7C3AED) not assigned pink.
CloviReach
reach.clovitek.com
✓ Theme Toggle Default: Light LOW Severity No CSS Vars (inline)
CSS Variables
Colors appear to come from external CloviTek UI Kit stylesheet
Critical Hardcoded Breakers (1 found)
L186: style="background:#fff;color:var(--teal)" — white bg on CTA stays white in dark mode
Cleanest implementation in fleet. Only 1 color breaker found. Uses localStorage key 'cr-theme' + data-theme + prefers-color-scheme. Colors likely sourced from CloviTek UI Kit — best practice for the fleet. Purple #8B5CF6 near-clashes with CloviDecks and CloviImage violet range.
CloviHuman
clovihuman.com
⚠ Theme Toggle (logo only) Default: Dark LOW Severity No CSS Vars
CSS Variables
None defined
Hardcoded Breakers (1 critical)
L381: .clv-testi .av color:#fff — avatar text safe only in dark mode
Dark-first page with only 1 color breaker. Orange brand (#F97316/#FB923C) well-applied with 26 combined hits. Green accent cluster (#4ade80/#86efac) clashes with CloviAble lime. Theme toggle only swaps logo — not a full system. Dark-only design avoids most breaker risks.
CloviFlow
flow.clovitek.com
✓ Theme Toggle (full) Default: Dark MEDIUM Severity Has CSS Vars
CSS Variables Defined
--bg: #f4faf7 --surface --border --text --muted
Critical Hardcoded Breakers
L90: .logo-clovi color:#1E1E2E — near-black text, invisible on dark bg
L90: .logo-dark override exists but base color breaks without it
Best dual-theme implementation in fleet. localStorage + prefers-color-scheme detection, sun/moon toggle, CSS vars for structural tokens. Only 1 real breaker (logo base color). Brand vars (#10B981) hardcoded in component rules rather than using CSS var — minor refactor recommended. CloviFlow is the reference standard for others.
CloviForms
cloviforms.com
✓ Theme Toggle Default: Light MEDIUM Severity --cf-* CSS Vars
CSS Variables Defined
--cf-violet --cf-violet-d --cf-violet-l --cf-ink --cf-muted --cf-bg --cf-ok
Critical Hardcoded Breakers (4 of 10)
L612: style="background:#0d0814" demo panel — dark bg outside theme system
L613: style="background:#1a1628" field rows — hardcoded dark, no flip
L1235: style="background:#0f172a" header bar — inline, won't flip
L757–L813: 8x background:#fff in demo widget — fine for light, breaks dark
Well-structured --cf-* CSS var namespace. Assigned color #6366F1 is NOT the actual page brand — page uses #7C3AED (violet). Interactive demo widget hardcodes dark backgrounds and white cards via inline styles outside the --cf-* system. Needs demo component refactor.
CloviCode
clovicode.clovitek.com
✗ No Real Theme Toggle Default: Dark only HIGH Severity No CSS Vars
CSS Variables
None — all hex literals
Critical Hardcoded Breakers
html has inline style="color-scheme:dark" — no light theme possible
rgba(5,5,11,.93) and .74 overlays — invisible on light backgrounds
#fff and #000 raw hex values without theme-conditional wrapping
Dark-only design with html hardcoded color-scheme:dark. [data-theme=dark] logo toggle exists but has no paired light-theme stylesheet. Assigned green (#22C55E) 7 hits but page dominated by orange #F97316 (18 hits). Full rewrite required for light mode support.
CloviLearn
clovilearn.clovitek.com
⚠ Theme Toggle (logo only) Default: Dark HIGH Severity No CSS Vars
CSS Variables
None defined
Critical Hardcoded Breakers (4 of 6)
L537: style="background:#0b1425" — dark navy panel, breaks in light
L636: style="background:#0d1726" — dark nav bar bg
L871/L911: style="background:#0b1425" sidebar panels (×2)
L1525-1528: stat cards dark bg + text-white — invisible in light mode
Dark-only dashboard with 6 critical inline dark backgrounds. Primary brand Emerald #10B981 (94 hits) duplicates CloviFlow's brand color. Assigned amber (#F59E0B) is a tertiary accent duplicating CloviPDF's assigned color. All structural backgrounds inline — theme refactor would need 100+ line edits.
CloviTek
clovitek.com
⚠ Theme Toggle (logo only) Default: Dark HIGH Severity Partial CSS Vars
CSS Variables Defined
--bg: #05050f --card --text --amber --indigo --cyan --rose
Critical Hardcoded Breakers (5 of 10)
L38: .nav a:hover color:#fff — invisible on light bg
L39: .nav .brand color:#fff — hardcoded white brand text
L157: .vol .vlabel color:#fff — always white label
L118: .card .evimg background:#0b1120 — dark bg always
L561: inline style color:#fff on span
CSS var system exists (--bg/--card/--text etc.) but is inconsistently applied — many components inline equivalent dark values directly, bypassing vars. True light-mode switch impossible without full refactor despite CSS var system being present. Assigned #4F46E5 duplicates CloviLegal.
04 Before / After Visual Mockups — Top 5 Most Broken Platforms

Showing what the broken theme state looks like vs. the correct fixed rendering. These simulate light-mode rendering for dark-default platforms, and dark-mode rendering for light-default platforms with hardcoded colors.

CloviDecks — html declares light but renders entirely dark
BEFORE — Broken: html color-scheme:light + hardcoded dark backgrounds
CloviDecks Templates   Pricing
.tpl-name (visible on dark)
browser-chrome (dark bg stuck in white page)
browser-left panel
← this text is invisible (color:#fff on white bg)
Issues: html declares color-scheme:light but 13+ components use hardcoded dark hex (#0a0a0f, #1a1a2e, #0d0d1c). White text (#fff) is invisible against the light page background. No CSS vars exist to fix with a single override. Template names, nav links, slide demos all break.
AFTER — Fixed: dark-first declared + CSS vars for all bg/text tokens
CloviDecks Templates   Pricing
.tpl-name — visible ✓
Browser chrome — dark context declared ✓
Left panel — consistent dark ✓
← text visible on dark bg with var(--text) ✓
Fix: Set html[data-theme=dark] as declared default. Add --deck-bg:#0a0a0f; --deck-text:#f1f5f9; CSS vars. Replace 13 hardcoded hex values with var() references. Add [data-theme=light] override block for future light mode.
CloviAble — 20+ inline style= dark teal hardcoded; theme toggle does nothing
BEFORE — Broken: All colors hardcoded inline, dark teal buttons on any bg
.flow-node — visible in light (ok)
CTA Button (always dark teal ⚠)
Dark panel #0f172a — stuck dark in any theme
Accessibility score
progress bar background:#0f766e inline — no theme switch
Issues: 20+ inline style="background:#0f766e" hardcoded — buttons, badges, progress bars, step circles all locked to dark teal. Dark panel (#0f172a) embedded inside light page. .flow-node (#fff) will disappear if dark mode enabled. No CSS vars = no tokenized fix path.
AFTER — Fixed: CSS vars + brand lime replaces teal, components adapt to theme
.flow-node — var(--ca-surface): visible ✓
CTA — var(--ca-brand: #84CC16) ✓
Panel — var(--ca-surface-2) adapts ✓
Accessibility score
background: var(--ca-brand) — adapts ✓
Fix: Define --ca-brand:#84CC16; --ca-bg:#f8fafc; --ca-surface:#fff; --ca-text:#1e293b; CSS vars. Replace all 20+ inline style="background:#0f766e" with class="ca-brand-bg". Add [data-theme=dark] block setting dark equivalents. Move to lime brand (#84CC16) to match assignment.
CloviCharts — hero text + active tabs always white; API code demo illegible in light mode
BEFORE — Broken: Light mode default but hero text color:#fff (invisible)
AI Chart Builder
← Hero text invisible (color:#fff on white bg)
Active Tab (ok on purple)
Tab 2 (white text on light bg ⚠)
const chart = new CloviChart(
  // comment — invisible
  data: [...] // near-white on white = invisible
Issues: L86 hero text color:#fff with no light override — invisible on default light mode. L131 active tab always color:#fff. Entire API code demo uses inline near-white colors (rgba(255,255,255,0.65), #e2e8f0) that vanish against white card background.
AFTER — Fixed: [data-theme=light] overrides for text colors + code block bg
AI Chart Builder ✓
Visible hero subtitle ✓
Active Tab ✓
Tab 2 — dark text ✓
const chart = new CloviChart(
  // comment ✓
  data: [...] // visible on dark code bg ✓
Fix: Add [data-theme=light] .hero { color: var(--cc-text); }. Add [data-theme=light] .chart-tab.active { color: #fff; } (only on colored bg). Wrap API code blocks in .cc-code { background: #0f172a; } class instead of inline styles. Assign sky blue #0EA5E9 as active accent.
CloviLearn — 6 structural dark backgrounds inline; stat cards invisible in light mode
BEFORE — Broken: Dark nav/sidebar/panels hardcoded, stat cards text-white
CloviLearn Courses   Dashboard
My Courses
Module 1
Module 2
Dashboard Overview
47
Lessons
89%
Score
← stat cards dark bg + white text on light page
Issues: Nav bar (#0d1726), sidebar panels (#0b1425), and stat cards (#0a1322) all hardcoded dark via inline styles. If a light theme toggle is ever wired, entire structural layout breaks. 6 critical inline background properties, 94 hits of #10B981 duplicating CloviFlow's brand.
AFTER — Fixed: CSS vars for structural bg, stat cards use var(--cl-surface)
CloviLearn ✓ Courses   Dashboard
My Courses
Module 1
Module 2
Dashboard Overview
47
Lessons ✓
89%
Score ✓
← var(--cl-surface) adapts to theme ✓
Fix: Add --cl-bg, --cl-nav, --cl-sidebar, --cl-surface, --cl-text CSS vars. Replace 6 inline background: #0b1425/#0d1726/#0a1322 with class-based token selectors. Differentiate brand from CloviFlow: assign unique color (e.g., #F59E0B amber as primary) rather than sharing Emerald.
CloviCode — html hardcodes color-scheme:dark; overlays invisible if light mode attempted
BEFORE — Broken: Hardcoded dark-only; near-black overlays, no light path
CloviCode
Build apps with AI
← overlay rgba(5,5,11,.93) — invisible on white, blocks content
Start Free
View Demo
const app = clovi.build({
  name: 'my-app' // hardcoded #000
Issues: html has inline style="color-scheme:dark" blocking any browser light-mode detection. Near-black overlays (rgba(5,5,11,.93) and .74) become invisible content-blockers on light bg. Assigned green (#22C55E) barely used — page dominated by orange and purple. No CSS vars.
AFTER — Fixed: Proper dark declaration + CSS var tokens + green brand surfaced
CloviCode ✓
Build apps with AI — visible ✓
Start Free ✓
View Demo ✓
const app = clovi.build({'{'}
  name: 'my-app' // ✓
Fix: Remove inline style="color-scheme:dark" from html. Add html[data-theme=dark] as default via JS on load. Define --cc-bg:#05050b; --cc-brand:#22C55E; --cc-text:#e2e8f0;. Replace near-black rgba overlays with var(--cc-bg). Surface green brand in hero + CTAs.
05 Recommended Color Assignment — Deduplication & Identity Map

All 15 platforms should have visually distinct assigned colors. Conflicts are marked; proposed alternatives ensure no two platforms share a hue cluster.

Platform Current Color Page Actual Color Proposed Color Conflict With Action
CloviScan
#F43F5E
#F43F5E ✓
#F43F5E
 None KEEP
CloviAble
#84CC16
#0f766e (teal!)
#84CC16
 CloviAnalytics uses lime as accent KEEP + ALIGN PAGE
CloviLegal
#4F46E5
#4F46E5 ✓
#312E81
 CloviTek also #4F46E5 CHANGE → Deep Indigo
CloviCharts
#0EA5E9
#7c3aed (violet!)
#0EA5E9
 Page not using assigned color KEEP + ALIGN PAGE to Sky Blue
CloviPDF
#F59E0B
#6366f1 (indigo!)
#D97706
 CloviLearn also #F59E0B CHANGE → Amber-700 (darker)
CloviDecks
#7C3AED
#7C3AED (near ✓)
#7C3AED
 CloviImage uses #7C3AED as dominant; CloviForms uses same KEEP but differentiate from CloviImage
CloviAnalytics
#06B6D4
#84cc16 (lime!)
#06B6D4
 Page uses CloviAble's lime brand KEEP assigned + ALIGN PAGE to Cyan
CloviImage
#EC4899
#7C3AED (violet!)
#EC4899
 None for Pink. Violet clashes fleet-wide. KEEP Pink + SURFACE as primary, retire violet
CloviReach
#8B5CF6
#8B5CF6 ✓
#8B5CF6
 Near-clash with CloviDecks #7C3AED KEEP (lightest violet — distinguishable)
CloviHuman
#F97316
#F97316 ✓
#F97316
 CloviCode page uses same orange (18 hits) KEEP (unique to Human; Code needs realignment)
CloviFlow
#10B981
#10B981 ✓
#10B981
 CloviLearn uses Emerald as primary (94 hits!) KEEP (CloviFlow is original; CloviLearn must change)
CloviForms
#6366F1
#7C3AED (violet!)
#6366F1
 Page uses #7C3AED clashing with CloviDecks KEEP Indigo + ALIGN PAGE away from violet
CloviCode
#22C55E
#F97316 (orange!)
#22C55E
 Page dominated by CloviHuman's orange; green cluster overlap KEEP Green + ALIGN PAGE — retire orange
CloviLearn
#F59E0B
#10B981 (emerald!)
#EAB308
 CloviPDF also #F59E0B; page uses CloviFlow's Emerald CHANGE → Yellow #EAB308 (distinct from amber)
CloviTek
#4F46E5
#6366f1 (near)
#4F46E5
 CloviLegal also #4F46E5 KEEP (flagship — CloviLegal changes)
06 CSS Fix Patterns — Remediation Cookbook
Pattern 1 — Text Color Fix
Replace hardcoded color:#fff text that breaks in light mode.
/* BEFORE: breaks in light mode */ .nav-link { color: #fff; } .hero h1 { color: #ffffff; } /* AFTER: CSS var approach */ :root { --text-primary: #0f172a; } [data-theme=dark] { --text-primary: #f1f5f9; } .nav-link { color: var(--text-primary); } .hero h1 { color: var(--text-primary); }
Apply to: CloviTek nav, CloviDecks .tpl-name, CloviCharts hero, CloviLearn stat cards
Pattern 2 — Background Color Fix
Replace hardcoded dark/light backgrounds with adaptive vars.
/* BEFORE: hardcoded dark */ .nav { background: #0f0e1a; } .sidebar { background: #0b1425; } /* AFTER: token-driven */ :root { --bg-nav: #ffffff; --bg-sidebar: #f1f5f9; } [data-theme=dark] { --bg-nav: #0f0e1a; --bg-sidebar: #0b1425; } .nav { background: var(--bg-nav); } .sidebar { background: var(--bg-sidebar); }
Apply to: CloviLearn panels, CloviLegal nav, CloviDecks browser-chrome, CloviCode hero
Pattern 3 — Border Color Fix
Replace near-invisible white-tinted borders on light bg.
/* BEFORE: invisible in light mode */ footer { border-color: rgba(255,255,255,0.08); } /* AFTER: adaptive border */ :root { --border-subtle: rgba(0,0,0,0.1); } [data-theme=dark] { --border-subtle: rgba(255,255,255,0.08); } footer { border-color: var(--border-subtle); }
Apply to: CloviCharts footer, CloviImage comparison card borders, all platform dividers
Pattern 4 — SVG / Icon Fill Fix
SVG icons with hardcoded fill colors that don't adapt.
/* BEFORE: hardcoded fill */ .icon svg { fill: #ffffff; } .icon path { stroke: #fff; } /* AFTER: var-driven */ :root { --icon-color: #374151; } [data-theme=dark] { --icon-color: #e2e8f0; } .icon svg { fill: var(--icon-color); } .icon path { stroke: var(--icon-color); } /* For brand-colored icons: */ .icon-brand svg { fill: var(--brand); }
Apply to: all platform nav icons, feature icons, CloviScan badge icons
Pattern 5 — Inline Style Override
Replace inline style= attributes with utility classes.
/* BEFORE: inline, un-overridable */ <div style="background:#0f766e;color:#fff"> CTA Button </div> /* AFTER: class-based + CSS var */ .btn-brand { background: var(--brand); color: var(--brand-text, #fff); } [data-theme=light] .btn-brand { background: var(--brand); color: #fff; } [data-theme=dark] .btn-brand { background: var(--brand-dark); color: #fff; } <div class="btn-brand">CTA</div>
Critical for: CloviAble (20+ inline teal), CloviLearn (6 inline dark panels), CloviForms demo widget
Pattern 6 — Theme Detection Bootstrap
Standard theme init script — CloviFlow pattern (reference implementation).
/* CSS: define both themes */ :root { --bg: #f8fafc; --text: #0f172a; } [data-theme=dark] { --bg: #0a0f1e; --text: #e2e8f0; } /* JS: detect + persist */ (function() { const saved = localStorage.getItem('theme'); const pref = window.matchMedia( '(prefers-color-scheme:dark)' ).matches ? 'dark' : 'light'; document.documentElement .setAttribute('data-theme', saved || pref); })(); /* Toggle button */ btn.addEventListener('click', () => { const next = html.dataset.theme === 'dark' ? 'light' : 'dark'; html.setAttribute('data-theme', next); localStorage.setItem('theme', next); });
Platforms missing this entirely: CloviPDF, CloviAnalytics, CloviCode. Copy CloviFlow's implementation.
07 Priority Remediation Queue
P0 — Critical (No CSS vars + missing theme toggle + multiple breakers)
CloviAbleAdd --ca-* CSS vars, replace 20+ inline teal attrs, align page to lime #84CC16 brand
CloviDecksFix html color-scheme mismatch, add --deck-* vars, align 13 dark component backgrounds
CloviPDFAdd theme toggle, add --cpdf-* vars, resolve amber color duplicate with CloviLearn
CloviCodeRemove hardcoded color-scheme:dark from html, add --cc-* vars, surface green brand
P1 — High (Partial vars but critical inline breakers)
CloviLearnReplace 6 inline dark backgrounds, change brand color from Emerald to unique Yellow, add --cl-* vars
CloviChartsAdd light override for hero text, fix active tab text, migrate API demo block to dark bg class
CloviAnalyticsAdd theme toggle, fix session replay white iframe, align page to assigned cyan #06B6D4
CloviTekUse existing --vars consistently, fix 10 hardcoded text/bg literals in nav/cards/footer
P2 — Medium (Good structure, isolated breakers)
CloviFormsFix demo widget 10 inline dark/white backgrounds, align page brand from violet to assigned indigo
CloviImageFix #real-demo section hardcoded inline dark styles, add --ci-* vars
CloviLegalExpand from 3 CSS vars to full system, change assigned color to #312E81 to avoid CloviTek clash
CloviScanReplace 7 raw dark-rose hex instances with var(--brand-dark), low effort
P3 — Low (1-2 breakers only, good implementation)
CloviReachFix L186 hardcoded #fff CTA bg — 1 line fix
CloviHumanFix L381 avatar color:#fff — 1 line fix. Consider adding CSS vars for future proofing.
CloviFlowFix L90 logo base color — 1 line fix. Reference implementation for all others to follow.