파이어폭스 기준 입니다

크롬도 동일 할 것 같지만

테스트는 안해 봤습니다.

준비물 tampermonkey 애드온

// ==UserScript==
// @name         다모앙 - 다크모드
// @namespace    https://damoang.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://damoang.net/*
// ==/UserScript==

(() => {
    'use strict'

    const storedTheme = localStorage.getItem('theme')

    const getPreferredTheme = () => {
        if (storedTheme) {
            return storedTheme
        }

        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    }

    const setTheme = function (theme) {
        if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.setAttribute('data-bs-theme', 'dark')
        } else if(theme === 'auto') {
            document.documentElement.setAttribute('data-bs-theme', 'light')
        } else {
            document.documentElement.setAttribute('data-bs-theme', theme)
        }
    }

    setTheme(getPreferredTheme())

    const showActiveTheme = theme => {
        const activeThemeIcon = document.querySelector('.theme-icon-active i')
        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
        const svgOfActiveBtn = btnToActive.querySelector('span i').getAttribute('class')

        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
            element.classList.remove('active')
        })

        btnToActive.classList.add('active')
        activeThemeIcon.setAttribute('class', svgOfActiveBtn)
    }

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
        if (storedTheme !== 'light' || storedTheme !== 'dark') {
            setTheme(getPreferredTheme())
        }
    })

    window.addEventListener('DOMContentLoaded', () => {
        showActiveTheme(getPreferredTheme())

        document.querySelectorAll('[data-bs-theme-value]').forEach(toggle => {
            toggle.addEventListener('click', () => {
                const theme = toggle.getAttribute('data-bs-theme-value')
                localStorage.setItem('theme', theme)
                setTheme(theme)
                showActiveTheme(theme)
            })
        })
    })
})()

위 에드온으로 등록을 합니다.

F12 키를 눌러 브라우저의 개발자 모드를 활성화 시키고

캐시 사용 안함 을 활성화 해줍니다.(크롬은 캐시 사용 중지)

아무 페이지나 이동하면 다크모드 선택 가능 하도록 활성화 될 겁니다

이게 화면 번쩍이는 이유가 테마 설정을 2번 로딩 하기 때문인것 같습니다

처음 설정이 본래 설정이고 모종의 이유로 재로딩을 하면서 기존 데이터가 캐싱되면서 제대로 값을 못 불러오는 것이 아닌가 싶네요

더이상은 모르겠네요 ㄷㄷ