Skip to content

Commit 865e096

Browse files
committed
implement dark mode
1 parent a43ca1a commit 865e096

File tree

3 files changed

+7
-7
lines changed

3 files changed

+7
-7
lines changed

src/components/Navbar.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,15 @@ const links = [
2121
];
2222
---
2323

24-
<header class="flex flex-row flex-wrap gap-8 rounded border-2 border-slate-800 mb-4 p-4 items-end">
24+
<header class="flex flex-row flex-wrap gap-8 rounded border-2 border-slate-800 dark:border-slate-200 mb-4 p-4 items-end text-black dark:text-white">
2525
<h1 class="text-4xl">
2626
<a href="/">DistCompiler/PGo</a>
2727
</h1>
2828
<nav class="mr-8">
2929
<ul class="flex flex-row gap-4 text-lg font-medium">
3030
{
3131
links.map(link => (
32-
<li class={title === link.name ? "text-slate-400 underline hover:no-underline whitespace-nowrap" : "hover:underline whitespace-nowrap"}>
32+
<li class={title === link.name ? "text-slate-600 dark:text-slate-400 underline hover:no-underline whitespace-nowrap" : "hover:underline whitespace-nowrap"}>
3333
<a href={link.href}>&#62; {link.name}</a>
3434
</li>
3535
))

src/components/TableOfContents.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ export interface Props {
66
const {headings} = Astro.props;
77
---
88

9-
<ul class="border-x-2 border-t-2 border-slate-800 p-4 flex flex-row flex-wrap align-baseline gap-4 text-lg">
9+
<ul class="dark:text-white border-x-2 border-t-2 border-slate-800 dark:border-slate-200 p-4 flex flex-row flex-wrap align-baseline gap-4 text-lg">
1010
{
1111
headings
1212
.map(heading => (
1313
<li class="whitespace-nowrap">
14-
<a class={`hover:underline"${heading.depth === 1 ? '' : ' text-base text-slate-600'}`} href={`#${heading.slug}`}>
14+
<a class={`hover:underline"${heading.depth === 1 ? '' : ' text-base text-slate-600 dark:text-slate-400'}`} href={`#${heading.slug}`}>
1515
{heading.depth === 1 ? '' : `${'.'.repeat(heading.depth - 1)} `}{heading.text}
1616
</a>
1717
</li>

src/layouts/Layout.astro

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@ const { frontmatter: {title}, headings } = Astro.props;
1414
<meta name="generator" content={Astro.generator} />
1515
<title>DistCompiler/PGo: {title}</title>
1616
</head>
17-
<body class="container p-8 mx-auto">
17+
<body class="container p-8 mx-auto dark:bg-slate-900">
1818
<!-- the github ribbon, taken from a generator -->
1919
<div class="github-ribbon" style="position: absolute; right: 0px; top: 0px; width: 150px; height: 150px; overflow: hidden; z-index: 99999;"><a target="_blank" style="display: inline-block; width: 200px; overflow: hidden; padding: 6px 0px; text-align: center; transform: rotate(45deg); text-decoration: none; color: rgb(255, 255, 255); position: inherit; top: 45px; right: -40px; border-width: 1px 0px; border-style: dotted; border-color: rgba(255, 255, 255, 0.7); font: 700 13px &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 3px 0px; background-color: rgb(170, 0, 0); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));" href="https://github.com/DistCompiler/pgo">Fork me on GitHub</a></div>
2020

2121
<!-- actual content below -->
2222
<Navbar title={title} />
2323
<TableOfContents headings={headings} />
24-
<main class="prose prose-h1:font-semibold prose-headings:my-4 prose-p:my-1 prose-ul:my-1 max-w-none mb-4 border-2 border-slate-800 p-4">
24+
<main class="prose dark:prose-invert prose-h1:font-semibold prose-headings:my-4 prose-p:my-1 prose-ul:my-1 max-w-none mb-4 border-2 border-slate-800 dark:border-slate-200 p-4">
2525
<slot />
2626
</main>
27-
<footer class="gap-8 rounded-b border-2 border-slate-800 p-4 mt-4 text-center">
27+
<footer class="gap-8 rounded-b border-2 border-slate-800 text-black dark:border-slate-200 dark:text-white p-4 mt-4 text-center">
2828
&#169; {(new Date()).getFullYear()} The PGo Team
2929
</footer>
3030
</body>

0 commit comments

Comments
 (0)