Automatically switches Twitter(X)'s dark mode based on your system's theme settings. Customize your preferred dark theme (Dark Blue or Black) through easy menu options.

TwitterAutoDarkMode.js

// ==UserScript==
// @name         Twitter Auto Dark Mode
// @version      1.0
// @author       Risin42
// @license      MIT
// @description  Auto switch Twitter dark mode based on system settings
// @match        *://x.com/*
// @match        *://twitter.com/*
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
    'use strict';

    // Theme configuration
    const THEMES = {
        LIGHT: 0,
        DARK_BLUE: 1,
        BLACK: 2
    };

    // Get preferred dark theme from storage, default to dark blue
    let preferredDarkTheme = GM_getValue('preferredDarkTheme', THEMES.DARK_BLUE);

    // Register menu commands for theme selection
    GM_registerMenuCommand('Use Dark Blue Theme', () => {
        preferredDarkTheme = THEMES.DARK_BLUE;
        GM_setValue('preferredDarkTheme', THEMES.DARK_BLUE);
        toggleTheme(darkMedia.matches);
    });

    GM_registerMenuCommand('Use Black Theme', () => {
        preferredDarkTheme = THEMES.BLACK;
        GM_setValue('preferredDarkTheme', THEMES.BLACK);
        toggleTheme(darkMedia.matches);
    });

    function toggleTheme(isDarkMode) {
        const mode = isDarkMode ? preferredDarkTheme : THEMES.LIGHT;
        document.cookie = `night_mode=${mode};path=/;domain=.x.com;secure`;
        document.cookie = `night_mode=${mode};path=/;domain=.twitter.com;secure`;
    }

    const darkMedia = window.matchMedia('(prefers-color-scheme: dark)');

    // Toggle theme when page loaded
    toggleTheme(darkMedia.matches);

    // Toggle theme when system theme changes
    darkMedia.addEventListener('change', e => {
        toggleTheme(e.matches);
    });
})();