implement dark mode

fhackett · fhackett · commit 865e09675fda · 2022-11-09T18:44:23.000-08:00
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -21,15 +21,15 @@ const links = [
 ];
 ---
 
-<header class="flex flex-row flex-wrap gap-8 rounded border-2 border-slate-800 mb-4 p-4 items-end">
+<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">
     <h1 class="text-4xl">
         <a href="/">DistCompiler/PGo</a>
     </h1>
     <nav class="mr-8">
         <ul class="flex flex-row gap-4 text-lg font-medium">
             {
                 links.map(link => (
-                    <li class={title === link.name ? "text-slate-400 underline hover:no-underline whitespace-nowrap" : "hover:underline whitespace-nowrap"}>
+                    <li class={title === link.name ? "text-slate-600 dark:text-slate-400 underline hover:no-underline whitespace-nowrap" : "hover:underline whitespace-nowrap"}>
                         <a href={link.href}>&#62; {link.name}</a>
                     </li>
                 ))
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
@@ -6,12 +6,12 @@ export interface Props {
 const {headings} = Astro.props;
 ---
 
-<ul class="border-x-2 border-t-2 border-slate-800 p-4 flex flex-row flex-wrap align-baseline gap-4 text-lg">
+<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">
     {
         headings
             .map(heading => (
                 <li class="whitespace-nowrap">
-                    <a class={`hover:underline"${heading.depth === 1 ? '' : ' text-base text-slate-600'}`} href={`#${heading.slug}`}>
+                    <a class={`hover:underline"${heading.depth === 1 ? '' : ' text-base text-slate-600 dark:text-slate-400'}`} href={`#${heading.slug}`}>
                         {heading.depth === 1 ? '↴ ' : `${'.'.repeat(heading.depth - 1)} `}{heading.text}
                     </a>
                 </li>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -14,17 +14,17 @@ const { frontmatter: {title}, headings } = Astro.props;
 		<meta name="generator" content={Astro.generator} />
 		<title>DistCompiler/PGo: {title}</title>
 	</head>
-	<body class="container p-8 mx-auto">
+	<body class="container p-8 mx-auto dark:bg-slate-900">
 		<!-- the github ribbon, taken from a generator -->
 		<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>
 		
 		<!-- actual content below -->
 		<Navbar title={title} />
 		<TableOfContents headings={headings} />
-		<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">
+		<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">
 			<slot />
 		</main>
-		<footer class="gap-8 rounded-b border-2 border-slate-800 p-4 mt-4 text-center">
+		<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">
 			&#169; {(new Date()).getFullYear()} The PGo Team
 		</footer>
 	</body>
