Add dark mode

date-fns · Dec 17, 2023 · a1a4200 · a1a4200
1 parent a07805a
commit a1a4200
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 38 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -2,6 +2,8 @@
 const today = new Date();
 ---
 
-<footer class="text-center text-monsoon-700 px-5 py-5 sm:py-12 bg-monsoon-50">
+<footer
+ class="text-center text-monsoon-700 bg-monsoon-50 px-5 py-5 sm:py-12 dark:bg-diesel-950 dark:text-monsoon-500"
+>
  &copy; {today.getFullYear()} date-fns
 </footer>
diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro
@@ -14,14 +14,16 @@ const { title, description, pubDate } = Astro.props;
  <head>
  <BaseHead title={title} description={description} />
  </head>
- <body>
+ <body class="dark:bg-diesel-950">
  <Header mode="post" />
 
  <main>
  <article>
  <Pattern title={title} date={pubDate} mode="post" />
 
- <div class="prose sm:prose-lg m-auto px-2 py-5 sm:px-10 sm:py-20">
+ <div
+ class="prose prose-pink dark:prose-invert sm:prose-lg m-auto px-2 py-5 sm:px-10 sm:py-20"
+ >
  <slot />
  </div>
  </article>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -20,7 +20,7 @@ if (!first) throw new Error("No posts found");
  <head>
  <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  </head>
- <body>
+ <body class="dark:bg-diesel-950">
  <Header />
 
  <main
@@ -38,16 +38,13 @@ if (!first) throw new Error("No posts found");
 
  {
  posts.map((post) => (
- <li class="w-full max-w-screen-sm border-b border-monsoon-100 pb-8 sm:pb-10 last:border-none last:pb-0">
- <a
- href={`/${post.slug.slice(11)}/`}
- class="space-y-2 text-monsoon-800"
- >
- <h3 class="text-2xl sm:text-3xl font-bold leading-tight text-monsoon-950">
+ <li class="w-full max-w-screen-sm border-b border-monsoon-100 pb-8 sm:pb-10 last:border-none last:pb-0 dark:border-monsoon-950">
+ <a href={`/${post.slug.slice(11)}/`} class="space-y-2">
+ <h3 class="text-2xl sm:text-3xl font-bold leading-tight text-monsoon-950 dark:text-monsoon-300">
  {post.data.title}
  </h3>
 
- <div class="flex space-x-2 items-center text-monsoon-800">
+ <div class="flex space-x-2 items-center text-monsoon-800 dark:text-monsoon-600">
  <Author prefix="By" />
  <span>·</span>
  <FormattedDate date={post.data.pubDate} />

diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -4,34 +4,49 @@ import typography from "@tailwindcss/typography";
 export default {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
- extend: {},
- colors: {
- siren: {
- 50: "#fef1f9",
- 100: "#fee5f5",
- 200: "#ffcaed",
- 300: "#ff9fdc",
- 400: "#ff64c2",
- 500: "#fe36a7",
- 600: "#ef1384",
- 700: "#d00668",
- 800: "#ac0856",
- 900: "#760a3d",
- 950: "#580028",
- },
+ extend: {
+ colors: {
+ siren: {
+ 50: "#fef1f9",
+ 100: "#fee5f5",
+ 200: "#ffcaed",
+ 300: "#ff9fdc",
+ 400: "#ff64c2",
+ 500: "#fe36a7",
+ 600: "#ef1384",
+ 700: "#d00668",
+ 800: "#ac0856",
+ 900: "#760a3d",
+ 950: "#580028",
+ },
+
+ monsoon: {
+ 50: "#f8f7f8",
+ 100: "#f2f1f2",
+ 200: "#e6e4e5",
+ 300: "#d3ced1",
+ 400: "#b7afb3",
+ 500: "#9f959a",
+ 600: "#8d8287",
+ 700: "#70666a",
+ 800: "#5e5659",
+ 900: "#514a4d",
+ 950: "#2e292b",
+ },
 
- monsoon: {
- 50: "#f8f7f8",
- 100: "#f2f1f2",
- 200: "#e6e4e5",
- 300: "#d3ced1",
- 400: "#b7afb3",
- 500: "#9f959a",
- 600: "#8d8287",
- 700: "#70666a",
- 800: "#5e5659",
- 900: "#514a4d",
- 950: "#2e292b",
+ diesel: {
+ 50: "#ffedf0",
+ 100: "#ffd5db",
+ 200: "#fdabba",
+ 300: "#fc7591",
+ 400: "#fa3d6f",
+ 500: "#f7185d",
+ 600: "#e90d60",
+ 700: "#c10d59",
+ 800: "#991352",
+ 900: "#7b1344",
+ 950: "#12020a",
+ },
  },
  },
  },