Color Themes

The current css now allows us to work with variables within the css and change them via javascript. That is why WinnetouJs implements the newTheme method, responsible for dynamically changing themes within web applications.

First, our app has to be using the css variables in order to create your style sheets.

        
:root {
    --main-bg-color: #222;
    --main-fg-color: #eee;
}
body,
html {
    background-color: var(--main-bg-color);
    color: var(--main-fg-color);
}
       
      

Now we can create our themes and change them at any time. The themes will be saved in client and will be loaded the next time the user open our app.

        
function lightTheme() {
    Winnetou.newTheme({
        "--main-bg-color": "#fff",
        "--main-fg-color": "#333",
    });
}

function darkTheme() {
    Winnetou.newTheme({
        "--main-bg-color": "#222",
        "--main-fg-color": "#eee",
    });
}