Theme Variant

Alternative theme such as light/dark.

html

<div class="themev themev--light">
  <p class="themev__heading">Weekly report</p>
  <p class="themev__tag">theme: light</p>
  <div class="themev__card" style="border-color:#A8E6C1;">Nested card inherits the theme</div>
</div>
<style>
.themev { font: 14px/1.5 system-ui, sans-serif; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.themev--light { background: #FAF7F2; color: #241430; }
.themev--dark { background: #241430; color: #FAF7F2; }
.themev--high-contrast { background: #000000; color: #ffffff; }
.themev__heading { margin: 0 0 4px; font-weight: 700; font-size: 16px; }
.themev__tag { margin: 0 0 14px; font-size: 11px; opacity: .7; }
.themev__card { padding: 12px; border-radius: 8px; border: 2px solid; font-size: 12px; }
.themev--high-contrast .themev__card { border-width: 3px; }
</style>

tailwind

<div class="themevtw themevtw--light font-sans p-5 rounded-xl w-[280px] box-border">
  <p class="m-0 mb-1 font-bold text-base">Weekly report</p>
  <p class="m-0 mb-3.5 text-[11px] opacity-70">theme: light</p>
  <div class="p-3 rounded-lg border-2 text-xs" style="border-color:#A8E6C1;">Nested card inherits the theme</div>
</div>
<style>
.themevtw--light { background: #FAF7F2; color: #241430; }
.themevtw--dark { background: #241430; color: #FAF7F2; }
.themevtw--high-contrast { background: #000000; color: #ffffff; }
</style>

react

export function ThemeVariant({
  heading = "Weekly report",
  themeVariant = "light",
  accent = "#A8E6C1",
  showCard = true,
}) {
  const palette = {
    light: { background: "#FAF7F2", color: "#241430" },
    dark: { background: "#241430", color: "#FAF7F2" },
    "high-contrast": { background: "#000000", color: "#ffffff" },
  }[themeVariant];
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", padding: 20, borderRadius: 12, width: 280, boxSizing: "border-box", ...palette }}>
      <p style={{ margin: "0 0 4px", fontWeight: 700, fontSize: 16 }}>{heading}</p>
      <p style={{ margin: "0 0 14px", fontSize: 11, opacity: .7 }}>theme: {themeVariant}</p>
      {showCard && <div style={{ padding: 12, borderRadius: 8, border: `${themeVariant === "high-contrast" ? 3 : 2}px solid ${accent}`, fontSize: 12 }}>Nested card inherits the theme</div>}
    </div>
  );
}