behavior ThemeSwitcher
    on load
        set userPreference to localStorage.theme
        if userPreference
            set the @data-bs-theme of the body to userPreference
            exit
        end

        if window.matchMedia('(prefers-color-scheme: dark)').matches
            put "<i class='bx bxs-moon'></i>" into me
            set the @data-bs-theme of the body to "dark"
        else
            put "<i class='bx bxs-sun'></i>" into me
            set the @data-bs-theme of the body to "light"
        end
    end

    on click
        if @data-bs-theme of the body is "dark"
            set the @data-bs-theme of the body to "light"
            set localStorage.theme to "light"
        else
            set the @data-bs-theme of the body to "dark"
            set localStorage.theme to "dark"
        end
    end

    on mutation of @data-bs-theme from body
        if @data-bs-theme of the body is "dark"
            put "<i class='bx bxs-sun'></i>" into me
        else
            put "<i class='bx bxs-moon'></i>" into me
        end
    end
end