# Tailwind CSS Dark Mode without `dark:` Prefixes
> Add dark mode to your Astro (or whatever) website using Tailwind CSS without `dark:` prefixes. Also supports `prefers-color-scheme` media query.
- URL: https://jubayeramb.com/writings/add-dark-mode-tailwind-css-astro/
- Author: Jubayer Al Mamun (https://jubayeramb.com/about/)
- Published: 2023-11-10
- Topics: Technical, Astro, Tailwind CSS, CSS, HTML, JavaScript
A quick guide on how to add dark mode to your Astro (or whatever) website using Tailwind CSS without `dark:` prefixes. Also supports `prefers-color-scheme` media query.
In this blog, I will show you how to add dark mode to a Astro website. This will also work with any other framework or even vanilla HTML/CSS/JS.
You can check the complete source code of this blog on [GitHub](https://github.com/jubayeramb/astro-tailwind-dark-theme).
## 1. Initial setup
Initialize an Astro project by running the following command in your terminal:
```bash
npm create astro@latest
```
> You can use your preferred package manager (`yarn` or `pnpm`) instead of `npm` if you want.
You can choose to use the default template or any other template you want. I will be using the default template for this blog. You can go with or without TypeScript.
Once your project is initialized and dependencies are installed, you can start the dev server by running:
```bash
npm run dev
```
The default dev server will be running on `localhost:4321`.
## 2. Add Tailwind CSS
You can add Tailwind CSS to your project by running the following command in your terminal:
```bash
npx astro add tailwind
```
The `astro add` CLI command will automatically install the required dependencies and add the required Tailwind configuration to your project. So you're now good to go with Tailwind CSS!
> You can also add Tailwind CSS manually by following the [Manual Tailwind CSS installation documentation](https://docs.astro.build/en/guides/integrations-guide/tailwind/#manual-install) on Astro doc.
## 3. Clean up the project (optional)
If you chose the empty template, you don't need to follow this step. But if you chose any other template, you can clean up the project by removing the unnecessary files and code. You can remove the following files and folders:
- `src/pages/index.astro`
- `src/components/Card.astro`
Now create a new file `src/pages/index.astro` and add the following code:
```astro
---
import Layout from "../layouts/Layout.astro";
---
Welcome To Your Site
```
Also replace the content of `src/layouts/Layout.astro` with the following code:
```astro
---
interface Props {
title: string;
}
const { title } = Astro.props;
---
{title}
```
> **Notice** defining the `Props` type helps you getting type support for the component incoming props. If you didn't choose TypeScript, you can remove the `Props` interface.
Now you can save the files and check the browser (make suer the dev server is running). You should see a page with a title "Welcome To Your Site" placed in the center of the page. _**Notice that the Tailwind CSS is already working.**_
## 4. Add dark mode
Now we will add dark mode to our website. We will be using the `prefers-color-scheme` media query to detect the user's system preference by default and then we will add a toggle button to switch between light and dark mode.
To skip the `dark:` prefixes, we will take advantage of the Tailwind color palette customization and CSS variables. First we will declare two color variable in our `./src/styles/global.css` file and define the colors in the `tailwind.config.js` file and then we will use the `bg-[color]` and `text-[color]` classes to apply the colors to the elements.
### 4.1. Add color variables
Create a `global.css` file in the `./src/styles/` directory and add the following code:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root,
:root[data-theme="light"] {
--color-bgColor: 221 230 237;
--color-contentColor: 34 40 49;
--sun-fill: rgb(0, 0, 0);
--moon-fill: transparent;
}
@media (prefers-color-scheme: dark) {
:root {
--color-bgColor: 34 40 49;
--color-contentColor: 238 238 238;
--sun-fill: transparent;
--moon-fill: rgb(255, 255, 255);
}
}
:root[data-theme="dark"] {
--color-bgColor: 34 40 49;
--color-contentColor: 238 238 238;
--sun-fill: transparent;
--moon-fill: rgb(255, 255, 255);
}
}
```
> Here we are using the `--color-bgColor` and `--color-contentColor` variables to define the background and content colors. We are also using the `--sun-fill` and `--moon-fill` variables to define the fill color of the sun and moon icons. We will use these variables in the `tailwind.config.js` file to define the colors.
> **Notice** that we are using the `:root[data-theme="light"]` and `:root[data-theme="dark"]` selectors to define the colors. We will use the `data-theme` attribute to switch between light and dark mode. We're also using the `prefers-color-scheme` media query to detect the user's system preference by default.
### 4.2. Add color definitions
Now open the `tailwind.config.cjs` file and add the following code:
```js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
colors: {
bgColor: "rgb(var(--color-bgColor) / )",
contentColor: "rgb(var(--color-contentColor) / )",
},
},
},
plugins: [],
};
```
### 4.3. Import global styles
Usually you will be using the `Layout.astro` component to wrap your other pages. So import the `global.css` file in the `./src/layouts/Layout.astro` file frontmatter (otherwise add it to the `index.astro` file, if you're not using the `Layout.astro` component) like this:
```astro
---
interface Props {
title: string;
}
const { title } = Astro.props;
import "../styles/global.css";
---
```
Now all you need to do is to use the `bg-bgColor` and `text-contentColor` classes to apply the colors to the elements. For example, you can replace the `` element of the `./src/layouts/Layout.astro` wrapper file with the following code:
```astro
```
**Wohoo! You have successfully added dark mode to your website!** 🔥
Now your site will respond to the user's system preference. Toggle your System theme to see the effect on your site. But we still need to add a toggle button for the user to switch between light and dark mode manually.
### 4.4. Add a toggle button
Now we will add a toggle button to switch between light and dark mode manually. We will use the `data-theme` attribute to switch between light and dark mode. We will also use the `--sun-fill` and `--moon-fill` variables to define the fill color of the sun and moon icons. We will use the `bg-bgColor` and `text-contentColor` classes to apply the colors to the elements.
Create a `ThemeIcon.astro` file into the `./src/components/` directory and add the following code:
```astro
---
---
```
> Here we are using a SVG icon to toggle between light and dark mode (you can update the icon as of your choice). We are also using the `localStorage` API to store the user's preference. We are using the `data-theme` attribute to switch between light and dark mode. We are also using the `--sun-fill` and `--moon-fill` variables to define the fill color of the sun and moon icons. We are using the `bg-bgColor` and `text-contentColor` classes to apply the colors to the elements.
Now you can import the `ThemeIcon.astro` component in the `./src/layouts/Layout.astro` file and place it anywhere you want. For example, you can place it in the `` element of the `./src/layouts/Layout.astro` wrapper file like this:
```astro
```
> You can create a Nav component and place the `ThemeIcon.astro` component in the Nav component.
**Congratulations! You did it! You Added a dynamic dark theme to your site!** 🎉
You don't even need to add the `dark:` prefixes to the every Tailwind CSS classes where you need to add dark theme variant. You can use the `bgColor` and `contentColor` color variant to apply the colors to the elements and the site will automatically adjust the theme color.
Now you can save the files and check the browser (make suer the dev server is running). You should see a toggle button in the center of the page. Click on the button to switch between light and dark mode.
Thanks for reading! 🙏