dostulata/initiative
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark and light theme with OS preference support
All checks were successful
CI / check (push) Successful in 1m22s
Details
CI / build-image (push) Successful in 36s
Details

Browse Source 
Follow OS color scheme by default, with a three-way toggle
(System / Light / Dark) in the kebab menu. Light theme uses warm,
neutral tones with soft card-to-background contrast. Semantic colors
(damage, healing, conditions) keep their hue across themes.

Closes #10

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-17 13:20:22 +01:00
parent 43780772f6
commit 2971898f0c
9 changed files with 202 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/src/components/stat-block.tsx
View File

@@ -30,7 +30,7 @@ function PropertyLine({
function SectionDivider() {
return (
<div className="my-2 h-px bg-gradient-to-r from-amber-800/60 via-amber-700/40 to-transparent" />
<div className="my-2 h-px bg-gradient-to-r from-stat-divider-from via-stat-divider-via to-transparent" />
);
}
@@ -54,7 +54,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
<div className="space-y-1 text-foreground">
{/* Header */}
<div>
<h2 className="font-bold text-amber-400 text-xl">{creature.name}</h2>
<h2 className="font-bold text-stat-heading text-xl">{creature.name}</h2>
<p className="text-muted-foreground text-sm italic">
{creature.size} {creature.type}, {creature.alignment}
</p>
@@ -194,7 +194,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
{creature.actions && creature.actions.length > 0 && (
<>
<SectionDivider />
<h3 className="font-bold text-amber-400 text-base">Actions</h3>
<h3 className="font-bold text-base text-stat-heading">Actions</h3>
<div className="space-y-2">
{creature.actions.map((a) => (
<div key={a.name} className="text-sm">
@@ -209,7 +209,9 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
{creature.bonusActions && creature.bonusActions.length > 0 && (
<>
<SectionDivider />
<h3 className="font-bold text-amber-400 text-base">Bonus Actions</h3>
<h3 className="font-bold text-base text-stat-heading">
Bonus Actions
</h3>
<div className="space-y-2">
{creature.bonusActions.map((a) => (
<div key={a.name} className="text-sm">
@@ -224,7 +226,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
{creature.reactions && creature.reactions.length > 0 && (
<>
<SectionDivider />
<h3 className="font-bold text-amber-400 text-base">Reactions</h3>
<h3 className="font-bold text-base text-stat-heading">Reactions</h3>
<div className="space-y-2">
{creature.reactions.map((a) => (
<div key={a.name} className="text-sm">
@@ -239,7 +241,7 @@ export function StatBlock({ creature }: Readonly<StatBlockProps>) {
{!!creature.legendaryActions && (
<>
<SectionDivider />
<h3 className="font-bold text-amber-400 text-base">
<h3 className="font-bold text-base text-stat-heading">
Legendary Actions
</h3>
<p className="text-muted-foreground text-sm italic">