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 && (
<nav
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) => {
const isCurrent = index === items.length - 1;
@@ -22,12 +22,12 @@ const { items = [] } = Astro.props as { items?: BreadcrumbItem[] };
) : (
<span
aria-current={isCurrent ? "page" : undefined}
class={isCurrent ? "font-bold text-black" : undefined}
class={isCurrent ? "font-bold text-foreground" : undefined}
>
{item.label}
</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>
</head>
<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">
<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">
<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-border pb-4 sm:mb-6 sm:flex-row sm:items-center sm:justify-between">
<a href="/" class="inline-flex w-fit items-center">
<img
src="/branding/logo.png"
@@ -29,7 +29,7 @@ const { title, breadcrumbs = [] } = Astro.props as {
<Breadcrumbs items={breadcrumbs} />
</header>
<slot />
<footer class="text-gray-600 flex-1 flex items-end">
<footer class="flex flex-1 items-end text-muted">
<p>
&copy; {new Date().getFullYear()} Radium, a project by
<a

6
src/pages/index.astro
View File

@@ -40,16 +40,16 @@ const sections = await Promise.all(
sections.map((section) => (
<a
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">
{section.title}
</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}
</span>
{section.articleCount !== 0 && (
<span class="text-[11px] text-gray-500">
<span class="text-[11px] text-muted-soft">
{section.articleCount === 1
? "1 article"
: `${section.articleCount} articles`}

43
src/styles/global.css
View File

@@ -2,28 +2,44 @@
@plugin "@tailwindcss/typography";
:root {
--background: #ffffff;
color-scheme: light;
--background: #f3f4f6;
--foreground: #000000;
--surface: #ffffff;
--surface-subtle: #f9fafb;
--border: #e5e7eb;
--muted: #4b5563;
--muted-soft: #6b7280;
--link: #095fb5;
--banner-overlay: rgb(0 0 0 / 30%);
}
body {
background: greenyellow;
background: var(--surface);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* @media (prefers-color-scheme: dark) {
:root {
--background: #000000;
--foreground: #ffffff;
}
} */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--background: #000000;
--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) {
body.site-shell {
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");
background-position: center;
background-repeat: no-repeat;
@@ -34,9 +50,14 @@ body {
@theme inline {
--color-background: var(--background);
--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 {
@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;
}