# What Are the Available Theme Options in Nitter?

> Explore Nitter's nine theme options, from Twitter and Dracula to automatic modes. Customize your Nitter experience with these CSS-driven visual styles selectable on the preferences page.

- Repository: [Zed/nitter](https://github.com/zedeus/nitter)
- Tags: how-to-guide
- Published: 2026-09-04

---

**Nitter offers nine built-in visual themes—including Twitter, Twitter Dark, Dracula, and automatic modes—that are dynamically loaded from CSS files stored in the repository and selectable via the user preferences page.**

The open-source Twitter alternative **Nitter** (hosted at `zedeus/nitter`) allows users to customize their browsing experience through multiple interface themes. These **Nitter theme options** are discovered automatically at runtime by scanning the static assets directory, requiring no database entries or configuration files to add new styles.

## Where Nitter Stores Theme Files

All theme definitions reside as standard CSS files in the `public/css/themes` directory of the repository. Each `.css` file represents a distinct visual theme that Nitter can serve to clients.

When the application initializes its preferences system, it references these files to build the selection list presented to users.

## How Nitter Discovers Available Themes

The theme discovery logic is implemented in `src/routes/preferences.nim` within the **`findThemes`** procedure. This function reads the contents of the themes directory using `walkDir` and transforms raw filenames into human-readable labels.

The transformation follows a specific pattern:

- Underscores are converted to spaces
- Filename extensions (`.css`) are removed
- The remaining text is title-cased for display

For example, [`twitter_dark.css`](https://github.com/zedeus/nitter/blob/main/twitter_dark.css) becomes **"Twitter Dark"** and `auto_(twitter).css` becomes **"Auto (Twitter)"** in the preferences dropdown.

## Complete List of Nitter Theme Options

Based on the current state of the `zedeus/nitter` repository, the following nine themes are available:

- **Twitter** — The classic light theme matching Twitter's original design (from [`twitter.css`](https://github.com/zedeus/nitter/blob/main/twitter.css))
- **Twitter Dark** — A dark variant of the standard Twitter interface (from [`twitter_dark.css`](https://github.com/zedeus/nitter/blob/main/twitter_dark.css))
- **Nitter** — The default Nitter-specific styling (from [`nitter.css`](https://github.com/zedeus/nitter/blob/main/nitter.css))
- **Pleroma** — Color scheme inspired by the Pleroma federated platform (from [`pleroma.css`](https://github.com/zedeus/nitter/blob/main/pleroma.css))
- **Mastodon** — Theme matching the Mastodon social network's aesthetic (from [`mastodon.css`](https://github.com/zedeus/nitter/blob/main/mastodon.css))
- **Dracula** — A dark theme using the popular Dracula color palette (from [`dracula.css`](https://github.com/zedeus/nitter/blob/main/dracula.css))
- **Black** — A high-contrast dark theme with pure black backgrounds (from [`black.css`](https://github.com/zedeus/nitter/blob/main/black.css))
- **Auto** — Automatically switches between light and dark based on system preferences (from [`auto.css`](https://github.com/zedeus/nitter/blob/main/auto.css))
- **Auto (Twitter)** — System-aware switching between Twitter light and dark variants (from `auto_(twitter).css`)

## How Themes Are Applied to Pages

Nitter applies selected themes through both server-side template rendering and client-side JavaScript widgets.

### Server-Side Theme Injection

In `src/views/general.nim`, the application checks user preferences and injects the appropriate stylesheet link into the HTML `<head>`. The code retrieves the theme name from the `prefs.theme` object and constructs the CSS path dynamically:

```nim
let theme = prefs.theme.toTheme
if theme.len > 0:
  link(rel="stylesheet",
       type="text/css",
       href=(&"/css/themes/{theme}.css"))

```

This ensures that the selected theme loads immediately with the page, preventing flash-of-unstyled-content issues.

### Client-Side Theme Switching

For embedded widgets and certain dynamic components, Nitter supports client-side theme specification through [`public/js/widgets.js`](https://github.com/zedeus/nitter/blob/main/public/js/widgets.js). The JavaScript handles theme parameters passed via options objects:

```javascript
if (opts.theme) {
  var theme = opts.theme === "dark"
                ? "twitter_dark"
                : opts.theme === "light"
                ? "twitter"
                : opts.theme;
  url += "?theme=" + encodeURIComponent(theme);
}

```

This allows external sites embedding Nitter content to force specific themes regardless of the user's saved preferences.

## How to Add Custom Themes to Nitter

Because **Nitter theme options** are file-based, adding new themes requires no code changes:

1. Create a new CSS file in `public/css/themes/` using underscores for spaces in the filename (e.g., [`solarized_dark.css`](https://github.com/zedeus/nitter/blob/main/solarized_dark.css))
2. Restart the Nitter application or wait for the next preferences page load
3. The **`findThemes`** procedure will automatically detect the new file and display it as **"Solarized Dark"** in the settings dropdown

The theme immediately becomes available to all users without modifying database schemas or recompiling the application logic.

## Summary

- **Nitter** dynamically discovers **theme options** by scanning the `public/css/themes` directory at runtime
- The **`findThemes`** procedure in `src/routes/preferences.nim` converts filenames like [`twitter_dark.css`](https://github.com/zedeus/nitter/blob/main/twitter_dark.css) into display names like **"Twitter Dark"**
- Nine built-in themes are currently available, including light variants (**Twitter**, **Nitter**), dark modes (**Twitter Dark**, **Dracula**, **Black**), and automatic switching options (**Auto**, **Auto (Twitter)**)
- Themes are applied server-side via `src/views/general.nim` and can be overridden client-side through [`public/js/widgets.js`](https://github.com/zedeus/nitter/blob/main/public/js/widgets.js)
- Adding custom themes only requires placing a new CSS file in the themes directory

## Frequently Asked Questions

### How do I change the theme in Nitter?

Navigate to the preferences page on your Nitter instance, locate the theme dropdown populated by the **`findThemes`** function, select your desired visual style, and save the settings. The change is stored in your browser cookies and takes effect immediately on the next page load.

### Where are Nitter theme files stored?

All theme CSS files are stored in `public/css/themes` relative to the repository root. The application serves these as static assets, and the preferences scanner reads this directory to build the available options list dynamically.

### Can I add my own custom theme to Nitter?

Yes. Create a valid CSS file with your custom styles, save it to `public/css/themes/` using underscores to represent spaces in the name, and the theme will automatically appear in the preferences dropdown. No code recompilation or database migration is necessary because themes are discovered dynamically from the filesystem.

### What is the difference between Auto and Auto (Twitter) themes?

The **Auto** theme switches between light and dark variants of the default **Nitter** theme based on your operating system's color scheme preference. The **Auto (Twitter)** theme performs the same automatic switching but uses the **Twitter** light and **Twitter Dark** styles instead of the Nitter default styles.