What Are the Available Theme Options in Nitter?

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 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)
• Twitter Dark — A dark variant of the standard Twitter interface (from twitter_dark.css)
• Nitter — The default Nitter-specific styling (from nitter.css)
• Pleroma — Color scheme inspired by the Pleroma federated platform (from pleroma.css)
• Mastodon — Theme matching the Mastodon social network's aesthetic (from mastodon.css)
• Dracula — A dark theme using the popular Dracula color palette (from dracula.css)
• Black — A high-contrast dark theme with pure black backgrounds (from black.css)
• Auto — Automatically switches between light and dark based on system preferences (from 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:

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. The JavaScript handles theme parameters passed via options objects:

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)
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 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
• 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}