RadiumPublic/radie-help
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Dark Mode

Browse Source
This commit is contained in:
mido
2026-05-04 10:33:46 -05:00
parent bcbb97040d
commit 11bab0b14b
4 changed files with 41 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Breadcrumbs.astro
View File

@@ -8,7 +8,7 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
items.length > 0 && ( items.length > 0 && (
<nav <nav
aria-label="Breadcrumb" aria-label="Breadcrumb"
class="flex flex-wrap items-center gap-1.5 rounded md:px-3 text-[13px] leading-none text-gray-600" class="flex flex-wrap items-center gap-1.5 rounded text-[13px] leading-none text-muted md:px-3"
> >
{items.map((item, index) => { {items.map((item, index) => {
const isCurrent = index === items.length - 1; const isCurrent = index === items.length - 1;
@@ -22,12 +22,12 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
) : ( ) : (
<span <span
aria-current={isCurrent ? "page" : undefined} aria-current={isCurrent ? "page" : undefined}
class={isCurrent ? "font-bold text-black" : undefined} class={isCurrent ? "font-bold text-foreground" : undefined}
> >
{item.label} {item.label}
</span> </span>
)} )}
{index < items.length - 1 && <span class="text-gray-400">/</span>} {index < items.length - 1 && <span class="text-muted-soft">/</span>}
</> </>
); );
})} })}

6
src/layouts/Layout.astro
View File

@@ -17,8 +17,8 @@ const { title, breadcrumbs = [] } = Astro.props as {
<title>Radium Help - {title}</title> <title>Radium Help - {title}</title>
</head> </head>
<body class="site-shell min-h-screen sm:flex sm:items-center sm:justify-center"> <body class="site-shell min-h-screen sm:flex sm:items-center sm:justify-center">
<main class="flex min-h-screen w-full flex-col bg-white p-4 sm:min-h-200 sm:w-11/12 md:w-3/4 sm:rounded sm:p-5 sm:shadow"> <main class="flex min-h-screen w-full flex-col bg-surface p-4 text-foreground sm:min-h-200 sm:w-11/12 sm:rounded sm:p-5 sm:shadow md:w-3/4">
<header class="mb-5 flex flex-col gap-3 border-b border-gray-200 pb-4 sm:mb-6 sm:flex-row sm:items-center sm:justify-between"> <header class="mb-5 flex flex-col gap-3 border-b border-border pb-4 sm:mb-6 sm:flex-row sm:items-center sm:justify-between">
<a href="/" class="inline-flex w-fit items-center"> <a href="/" class="inline-flex w-fit items-center">
<img <img
src="/branding/logo.png" src="/branding/logo.png"
@@ -29,7 +29,7 @@ const { title, breadcrumbs = [] } = Astro.props as {
<Breadcrumbs items={breadcrumbs} /> <Breadcrumbs items={breadcrumbs} />
</header> </header>
<slot /> <slot />
<footer class="text-gray-600 flex-1 flex items-end"> <footer class="flex flex-1 items-end text-muted">
<p> <p>
&copy; {new Date().getFullYear()} Radium, a project by &copy; {new Date().getFullYear()} Radium, a project by
<a <a

6
src/pages/index.astro
View File

@@ -40,16 +40,16 @@ const sections = await Promise.all(
sections.map((section) => ( sections.map((section) => (
<a <a
href={`/${section.name}`} href={`/${section.name}`}
class="block rounded border border-gray-200 hover:bg-gray-50 p-4 text-black bg-white" class="block rounded border border-border bg-surface p-4 text-foreground hover:bg-surface-subtle"
> >
<span class="mb-1 block text-sm font-bold text-link"> <span class="mb-1 block text-sm font-bold text-link">
{section.title} {section.title}
</span> </span>
<span class="mb-2 block text-[12px] leading-5 text-gray-700"> <span class="mb-2 block text-[12px] leading-5 text-muted">
{section.description} {section.description}
</span> </span>
{section.articleCount !== 0 && ( {section.articleCount !== 0 && (
<span class="text-[11px] text-gray-500"> <span class="text-[11px] text-muted-soft">
{section.articleCount === 1 {section.articleCount === 1
? "1 article" ? "1 article"
: `${section.articleCount} articles`} : `${section.articleCount} articles`}

37
src/styles/global.css
View File

@@ -2,28 +2,44 @@
@plugin "@tailwindcss/typography"; @plugin "@tailwindcss/typography";
:root { :root {
--background: #ffffff; color-scheme: light;
--background: #f3f4f6;
--foreground: #000000; --foreground: #000000;
--surface: #ffffff;
--surface-subtle: #f9fafb;
--border: #e5e7eb;
--muted: #4b5563;
--muted-soft: #6b7280;
--link: #095fb5;
--banner-overlay: rgb(0 0 0 / 30%);
} }
body { body {
background: greenyellow; background: var(--surface);
color: var(--foreground); color: var(--foreground);
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
} }
/* @media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
color-scheme: dark;
--background: #000000; --background: #000000;
--foreground: #ffffff; --foreground: #f4f7fb;
--surface: #11161d;
--surface-subtle: #1a202a;
--border: #2a3340;
--muted: #c7d0dc;
--muted-soft: #98a6b6;
--link: #7ab8ff;
--banner-overlay: rgb(0 0 0 / 58%);
} }
} */ }
@media (min-width: 640px) { @media (min-width: 640px) {
body.site-shell { body.site-shell {
background-image: background-image:
linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), linear-gradient(var(--banner-overlay), var(--banner-overlay)),
url("/branding/banner.png"); url("/branding/banner.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -34,9 +50,14 @@ body {
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
--color-link: #095FB5; --color-surface: var(--surface);
--color-surface-subtle: var(--surface-subtle);
--color-border: var(--border);
--color-muted: var(--muted);
--color-muted-soft: var(--muted-soft);
--color-link: var(--link);
} }
@utility prose-radium { @utility prose-radium {
@apply prose prose-sm max-w-none prose-headings:font-bold prose-headings:mb-1 prose-headings:mt-0 prose-hr:mt-2 prose-hr:mb-6 prose-hr:border-gray-300 text-[12px] prose-li:marker:text-black prose-a:text-link prose-a:no-underline prose-a:hover:underline; @apply prose prose-sm max-w-none text-[12px] text-foreground prose-headings:mt-0 prose-headings:mb-1 prose-headings:font-bold prose-headings:text-foreground prose-p:text-foreground prose-strong:text-foreground prose-li:text-foreground prose-li:marker:text-muted prose-hr:mt-2 prose-hr:mb-6 prose-hr:border-border prose-a:text-link prose-a:no-underline prose-a:hover:underline;
} }