
Getting a fully functional dark mode is super easy with Tailwind.

First, add this to your `tailwind.config.js` file:

```js
module.exports = {
  ...
  darkMode: "class",
};
```

Then add global light/dark styles to your index stylesheet in your app:
(hint: put this in the same file where you have the `@tailwind base` config,
if you are using next.js, it's the stylesheet being imported in `_app.jsx` and for create-react-app `index.js`)

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-white dark:bg-slate-800 text-black dark:text-white;
  }
}
```

Now for the fun part, let's implement the logic and a toggle button looking like this:

<DarkmodeSwitch />
[If you just want to skip to the final code, click here](#full-code)

Let's create a new component called `DarkmodeSwitch`:

```jsx
export function DarkmodeSwitch() {
  const [isDarkMode, setIsDarkMode] = useState(false);
  return <button>{isDarkMode ? "Dark mode" : "Light mode"}</button>;
}
```

Add an onClick handler to toggle between the modes, let's also store it in localStorage for later.

```jsx
const handleClick = () => {
  if (isDarkMode) {
    window.document.documentElement.classList.remove("dark");
    localStorage.setItem("theme", "light");
  } else {
    localStorage.setItem("theme", "dark");
    window.document.documentElement.classList.add("dark");
  }
  setIsDarkMode(!isDarkMode);
};
```

Add an useEffect to initially check what our users stored preference is:

```jsx
useEffect(() => {
  const theme = localStorage.getItem("theme");
  if (theme === "dark") {
    window.document.documentElement.classList.add("dark");
    setIsDarkMode(true);
  }
}, []);
```

Finally let's add some cool icons and styling, and we get our finished code:

## Full code

```jsx
import { useEffect, useState } from "react";

const Moon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="h-5 w-5"
    viewBox="0 0 20 20"
    fill="currentColor"
  >
    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
  </svg>
);

const Sun = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="h-5 w-5"
    viewBox="0 0 20 20"
    fill="currentColor"
  >
    <path
      fillRule="evenodd"
      d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
      clipRule="evenodd"
    />
  </svg>
);

export function DarkmodeSwitch() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const theme = localStorage.getItem("theme");
    if (theme === "dark") {
      window.document.documentElement.classList.add("dark");
      setIsDarkMode(true);
    }
  }, []);

  const handleClick = () => {
    if (isDarkMode) {
      window.document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    } else {
      localStorage.setItem("theme", "dark");
      window.document.documentElement.classList.add("dark");
    }
    setIsDarkMode(!isDarkMode);
  };

  return (
    <button
      className="text-gray-400 hover:bg-slate-200 p-2 flex items-center justify-center rounded-md dark:hover:bg-slate-700"
      onClick={handleClick}
      aria-label={`Toggle ${isDarkMode ? "light" : "dark"} mode`}
    >
      {isDarkMode ? <Sun /> : <Moon />}
    </button>
  );
}
```

[The source code can also be found here](https://github.com/HermanNygaard/nygaard.dev/blob/main/src/components/DarkmodeSwitch.tsx)

## Wrapping up

Thats it! We could improve this further by on default use the preferred browser theme, and also avoiding a flash of light
if using SSG/SRR, but this should get you pretty far for now.
[I also recommend this brilliant post by joshwcomeu](https://www.joshwcomeau.com/react/dark-mode/)



Storing all your configs in a single place makes changing between Macs a breeze.
In this article I'll explain how I store my dotfiles for easy version control and some of the tools I use.
For now it's the bare necessities but it gets the job done.  
[My dotfiles can be found here](https://github.com/HermanNygaard/dotfiles) (feel free to fork it!)

## Symlinking with GNU Stow

Stow is a neat little program that creates symlinks to my home directory from `~/.dotfiles` by structuring
files the same way you would in your home directory:

```
~ /.dotfiles/
  - zsh/.zshrc
  - nvim/.config/nvim
```

As you can see the directory names (zsh, nvim) are just used to help you organize your dotfiles,
while the content inside is what will get symlinked to your ~ directory.  
An example:  
Zsh saves it's config directly under your home dir, `~/.zshrc`, while nvim saves its config
under `~/.config/nvim` which is why we use `.config` as the second part of the path.

After running `stow zsh && stow nvim` ~ will have these symlinks:

```
~ /
 - .zshrc
 - .config/nvim
```

This way one can easily edit and version control dotfiles in the ` ~/.dotfiles/` directory.

## Homebrew and Brewfile

To manage my packages I use Homebrew.
All installed packages can be stored in a `Brewfile`, a file with all your brew packages listed.
The command `brew bundle dump --describe` will create a Brewfile. The `describe` flag adds a short comment over
each line describing what the package does.  
Then run `brew bundle` to install all packages.  
By having a `.Brewfile` in your ~ directory it will be used as a global file,
which is convenient so you can run `bundle` or `bundle dump` anywhere with the `--global` flag.

Some apps I have in my Brewfile and recommend are:

- Rectangle, my favorite window manager for macOS
- iTerm, terminal emulator

## Visual Studio Code

For VS Code it seems like the easiest option simply is to use the Settings Sync feature in VS Code.
I would prefer a config file that you could dump all settings and extensions into, but couldn't
find an easy way to do this.

## Setup script

In the README I have a simple script you can run from a brand new Mac:

```bash
# Installs git
xcode-select --install
git clone https://github.com/HermanNygaard/dotfiles.git ~/.dotfiles
cd ~/.dotfiles; source setup.sh
```

Here is the `setup.sh` script, which installs all Brew packages as well as ohmyzsh:

```
#!/usr/bin/env zsh

echo ">>>>>Installing homebrew"
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" </dev/null ## /dev/null skips pressing enter for the installation
brew bundle --file=~/.dotfiles/homebrew/.Brewfile

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```

## Future endeavours

As my time was fairly limited when setting this up I still have some things left I want to look into:

- Create a simple script to run stow on all my directories in the setup script
- Native MacOS settings
- iTerm settings



Hello and welcome!  
I mainly made this blog to learn more about MDX and Tailwind, as well as a place for
myself to index and look back on for recaps on topics I found interesting,
such as [dotfiles for macOS](/blog/macos-dotfiles).

## Tech

The site uses Next.js with SSG and MDX to generate the posts and corresponding routes
directly from markdown files in the source code. It uses Tailwind for styling
and is for the time being hosted on Vercel.  
[Source can be found here](https://github.com/HermanNygaard/nygaard.dev)


Blog