Red and Black Theme (Dark/Light mode toggle)

[memN0ps]

Hey, would it be possible to request a red and black theme and a red and white theme toggle? I've noticed there is green/black. Example: https://not-matthias.github.io/

[memN0ps]

Red and Black Theme

I figured it out. I had to add the CSS file to the config.toml file. I was able to do this by adding the following to the config.toml file:

[params]
    customcss = ["css/first.css"]

The first.css content is: https://github.com/athul/archie/blob/master/assets/css/main.css and the file is located in assets/css/first.css at the root of the project.

Default Red and Black Theme

You can change the default to dark theme by:

Adding the following in config.toml

[params]
    customjs = ["js/custom.js"]

Create static/js/custom.js at the root of the project and add:

function setTheme(mode) {
    localStorage.setItem("theme-storage", mode);
    if (mode === "dark") {
        document.getElementById("darkModeStyle").disabled=false;
        document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"sun\"></i>";
        feather.replace()
    } else if (mode === "light") {
        document.getElementById("darkModeStyle").disabled=true;
        document.getElementById("dark-mode-toggle").innerHTML = "<i data-feather=\"moon\"></i>";
        feather.replace()
    }
}

function toggleTheme() {
    if (localStorage.getItem("theme-storage") === "light") {
        setTheme("dark");
    } else if (localStorage.getItem("theme-storage") === "dark") {
        setTheme("light");
    }
}

//var savedTheme = localStorage.getItem("theme-storage") || "light";
var savedTheme = localStorage.getItem("theme-storage") || "dark";
setTheme(savedTheme);

Thanks.