Technology


# How to Add a Dark Theme with Only CSS

In this blog post, we'll learn how to add a dark theme to your website using only CSS. This method leverages the CSS `prefers-color-scheme` media query to automatically apply a dark or light theme based on the user's system settings.

By the end of this tutorial, you'll have a responsive dark theme for your site that switches based on user preference—without any JavaScript!

## Step 1: Define CSS Variables for Themes

First, we'll use CSS variables to define the colors for both the light and dark themes. This allows us to switch between themes easily and consistently across your site.

In your main CSS file (e.g., `globals.css`), define the default (light) theme using `:root`:

```
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --link-color: #0070f3;
  --border-color: #eaeaea;
  --card-background-color: #fafafa;
  --code-background-color: #f5f5f5;
}
```

These variables will be used for elements like background color, text color, links, borders, and cards. By defining these variables in `:root`, they'll be applied globally across your site.

## Step 2: Define the Dark Theme with `prefers-color-scheme`

Now, we want to create a dark theme that is applied when the user has their system set to dark mode. To do this, we’ll use the `prefers-color-scheme: dark` media query.

Below the light theme definition, add the dark theme like this:

```
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --link-color: #64b5f6;
    --border-color: #333;
    --card-background-color: #1e1e1e;
    --code-background-color: #2d2d2d;
  }
}
```

This will automatically apply the dark theme whenever the user's system preference is set to dark mode.

## Step 3: Apply the Theme to Your Website

Now that we’ve defined our color variables, we can use them to style the elements on our website. For example, let’s apply the background color and text color to the body:

```
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}
```

The `transition` property ensures a smooth transition between the light and dark themes.

You can apply the same approach to other elements like buttons, links, and cards. Here’s an example of how to style links and buttons:

```
a {
  color: var(--link-color);
}

button {
  background-color: var(--card-background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
```

This will ensure that your buttons and links adapt to both themes without any additional work.

## Step 4: Test the Dark Theme

Once you've defined your themes and applied them to the appropriate elements, it’s time to test the dark mode. 

To test it:
1. Switch your operating system to dark mode. On macOS, this can be done in System Preferences -> General -> Appearance. On Windows, go to Settings -> Personalization -> Colors and select Dark.
2. Refresh your website and see the dark theme in action!

Your site should automatically switch to the dark theme when your system is in dark mode, thanks to the `prefers-color-scheme` media query.

## Step 5: Optional - Light/Dark Theme Toggle (Without JavaScript)

While this method automatically applies the user’s system preference, you can also allow the user to toggle between light and dark themes manually. 

However, to handle this fully client-side, you would typically need JavaScript to switch the theme manually. For now, we’re focusing on a solution that **only uses CSS**, so we’ll rely on the system preference.

## Conclusion

By using only CSS and the `prefers-color-scheme` media query, we can provide a seamless dark theme experience for users who prefer it. This method is efficient and avoids the need for JavaScript.

Just by defining variables and applying media queries, your site can automatically switch between light and dark modes based on the user's system settings.

No need to worry about writing custom JavaScript, as CSS handles everything! Now, enjoy your clean, responsive dark theme!


How to Add a Dark Theme with Only CSS


# Building a Blog with Next.js, Markdown, and Dynamic Routing

In this post, we’ll walk through the process of building a blog using Next.js and Markdown. This project incorporates dynamic routing, category-based organization, and front matter for managing metadata. By the end of this blog, you’ll understand how to set up a flexible and scalable blog using these technologies.

## Setting Up the Folder Structure

We started by organizing our blog posts into categories by creating folders within the `/posts` directory. Each folder represents a category, and each markdown file within a folder is a blog post.

### Folder Structure Example

```
/posts
  /nextjs
    - first-post.md
  /javascript
    - intro-to-js.md
```

Each post is written in Markdown and contains front matter at the top, which allows us to store metadata like the post’s title, description, and date. Here's an example of the front matter in a markdown file:

```
---
title: "Building a Blog with Next.js and Markdown"
date: "2024-10-18"
---
```

This structure allows us to easily categorize and organize blog posts while keeping everything readable and manageable.

## Reading Metadata from Markdown Files

To parse the front matter and content from the markdown files, we used the `gray-matter` package. This allows us to extract the metadata (such as title, description, and date) and the actual content of each post.

We updated the `getAllPosts` function to read and parse all markdown files:

```
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';

const postsDirectory = path.join(process.cwd(), 'posts');

export function getAllPosts() {
  const categories = fs.readdirSync(postsDirectory);
  const allPosts = [];
  const categoryMetadata = [];

  categories.forEach((category) => {
    const categoryPath = path.join(postsDirectory, category);
    const postFiles = fs.readdirSync(categoryPath);

    const posts = postFiles.map((fileName) => {
      const filePath = path.join(categoryPath, fileName);
      const fileContents = fs.readFileSync(filePath, 'utf8');
      const { data: frontMatter, content } = matter(fileContents);

      return {
        slug: `${category}/${fileName.replace(/\.md$/, '')}`,
        category,
        frontMatter,
        content,
      };
    });

    allPosts.push(...posts);

    categoryMetadata.push({
      category,
      title: posts[0]?.frontMatter.categoryTitle || category,
      description: posts[0]?.frontMatter.categoryDescription || '',
    });
  });

  return { allPosts, categoryMetadata };
}
```

By using `gray-matter`, we’re able to pull in the post’s front matter along with the content. This makes it easier to display post titles, descriptions, and dates dynamically across the site.

## Dynamic Routing with Next.js

Next.js provides a powerful routing system that allows us to create dynamic pages based on the category and post slug. For this project, we structured our routes like this:

- `/blog/[category]/[slug]`: The dynamic route for blog posts. Each post is stored in a specific category, and the slug is the post's filename without the `.md` extension.

### Example of `getStaticPaths` and `getStaticProps`

Here's how we dynamically generated paths for our blog posts:

```
export async function getStaticPaths() {
  const { allPosts } = getAllPosts();

  const paths = allPosts.map((post) => ({
    params: {
      category: post.category,
      slug: post.slug.split('/').pop(),
    },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  const { category, slug } = params;
  const { allPosts } = getAllPosts();
  const post = allPosts.find(
    (post) => post.category === category  &&
      post.slug.split('/').pop() === slug
  );

  return {
    props: {
      post,
    },
  };
}
```

With `getStaticPaths`, we generate all possible paths for each blog post based on its category and slug. Then in `getStaticProps`, we fetch the post’s data for rendering based on these parameters.

## Displaying Categories and Posts

On the homepage, we linked to each category rather than displaying all posts. This keeps the homepage clean and organized, with each category having its own page that lists the posts under it.

```
export async function getStaticProps() {
  const { categoryMetadata } = getAllPosts();

  return {
    props: {
      categories: categoryMetadata,
    },
  };
}

export default function BlogHome({ categories }) {
  return (
    <LayoutWrapper>
      <h1>Blog Categories</h1>
      <div>
        {categories.map((category) => (
          <Link 
            href={`/blog/${category.category}`}
            key={category.category}>
            <div>
              <h2>{category.title}</h2>
              <p>{category.description}</p>
            </div>
          </Link>
        ))}
      </div>
    </LayoutWrapper>
  );
}
```

This structure allows for a clean, scalable blog that organizes content by categories and provides an easy way to navigate between posts and categories.

## Conclusion

Building a blog with Next.js and Markdown is a powerful and flexible way to manage content. Using dynamic routing and front matter allows for easy customization, scalability, and the ability to categorize posts. Whether you're building a simple personal blog or a large content site, this setup provides the flexibility needed for growth and customization.


Building this Blog


### How I ended up running tennis league software for my tennis club.

#### Start
I started playing tennis about two years ago and was looking for a way to find players to hit with. That’s when I found Pacific Beach Tennis Club (PBTC). PBTC had this thing called a flex league, which was basically a shared email list managed by one guy. There were three separate lists.

I emailed the (awesome) guy running it, and after a couple of days, he added me to the league. I could tell he was doing everything manually.

#### Problem
I wanted to join the 4.0 league because the 3.5 league didn’t have many matches each season. The whole process of being added to the next league was slow, with everything being managed by just one person. Plus, I didn't really get many matches in that league.

#### Solutions
I decided to start a WhatsApp group to see who was actually active in the 3.5 league. This worked somewhat, but I was kind of doing it behind the manager’s back. Then, I thought, why not make this a web app that could handle everything? So, I built a small prototype with a leaderboard for the current league players.

I pitched the idea of using this app to the manager. He quickly saw the value in not having to do everything manually. I’m sure he was tired of it by then, after managing it all for seven years. He gave me a list of requirements like having a contact list, a way to email everyone, and the need for three separate leagues. Everyone had to have access to it. We used this method for a year, and then the manager asked if I wanted to take over the league entirely—I agreed.

#### Early Design Choices
Since I had experience building `react` web apps, I decided to use a framework called `nextjs`, which made it simple to host the app and get it running quickly. I hosted it on vercel.

For the database, I chose AWS DynamoDB because it was free, flexible, and something I was already familiar with. To handle user authentication, I integrated Auth0 to make sure that only authorized users could access the email list.

I built out the app’s features and tested it on a smaller group of players. We basically treated it like a playoff, with each league having its own page defined in the database. I still had to manually populate the leagues every season.

Initially, emailing everyone was a bit of a hassle because people had to copy a list of emails into their own email clients, which sometimes caused problems with old email software. To fix that, I integrated AWS Simple Email Service into the app to make emailing easier.

#### Problems that arose

##### Matchmaking
It was difficult to gauge people’s actual skill levels, so sometimes they’d get into a match and either crush their opponent or get crushed. To address this, I used a matchmaking algorithm from Microsoft called TrueSkill to better rank players based on their performance.

##### Emailing people
The manual process of copying emails into clients like Gmail was causing issues, especially with older email software. I introduced AWS Simple Email Service to streamline this, allowing users to email directly through the app.

##### Tournaments
This wasn’t a problem but more of a feature request. I added the ability to organize tournaments within the league. The logic was complex, but I eventually got it to work.

#### Current Problems
The app is far from its ideal state, which is why I’m working on a new version. Here are some of the current issues:

1. People still have to email me to add or remove themselves from individual leagues.
2. I set up access per league but not for the entire club, meaning users from one league can't view others. It’d be nice if everyone could see all leagues in the club.
3. Creating a new league every season is a hassle. I’d like this process to be automatic so I can simply announce the new season.
4. Booking court time is a pain. People have to reserve a court first, then find someone to play with. I don’t have much control over this aspect. :shrug:
5. The ranking system might not be clear to everyone.
6. There’s no way to selectively email people other than creating your own list. A filter or level-based system would be helpful.
7. I want to spin off new leagues, but the current process is clunky. I need a better admin system to manage this.

#### Conclusion
The main problem I’m facing now is time. I want to make everything better, but as the software grows, it’s becoming harder to manage and add new features. And I'm crunched for time. Looks like I’ll need to do a part two of this. 🎾
