DEV Community 👩‍💻👨‍💻

Kolja
Kolja

Posted on

multiple Themeswitch in Svelte with Tailwind

You need a running svelte app with tailwind.

Create a new component components/themeSwitch.svelte

<script>
    // define themes
    const themes = ['theme-dark', 'theme-light'];

    // loox in localstorage for a theme & set it as body attribute
    if (localStorage.getItem('data-theme')) {
        document.body.setAttribute('data-theme', localStorage.getItem('data-theme'));
    }

    // set first theme as default theme (if no :root{})
    else {
        document.body.setAttribute('data-theme', themes[0]);
    }

    // get currentTheme from body, step to the next theme & set this in licalStorage & body
    function toggleTheme() {
        let currentTheme = document.body.getAttribute('data-theme');
        let themeIndex = themes.indexOf(currentTheme) + 1;
        if (themeIndex === themes.length) themeIndex = 0;
        localStorage.setItem('data-theme', themes[themeIndex]);
        document.body.setAttribute('data-theme', themes[themeIndex]);
    }
</script>

<button on:click={toggleTheme}>
    <svg class="SVGicon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
        <path id="Palette_1_" d="M84.71,80.953c-0.169-4.002-6.185-15.902-6.043-20.52c0.162-5.236,3.329-11.685,9.923,0.922  c3.951,7.555,10.016,2.854,10.752-0.822c2.223-11.12-1.078-24.458-11.591-37.527C69.567,0.405,37.605-5.802,16.38,9.144  C-4.844,24.092-5.271,57.752,14.097,77.26c17.555,17.676,41.765,25.445,62.007,16.926C78.197,93.301,85.123,90.59,84.71,80.953z   M27.852,15.419c3.83-2.697,9.12-1.78,11.819,2.052c2.699,3.831,1.779,9.122-2.051,11.819c-3.833,2.699-9.122,1.78-11.821-2.051  C23.1,23.408,24.018,18.119,27.852,15.419z M11.314,49.892c-2.697-3.831-1.777-9.122,2.053-11.819  c3.828-2.697,9.122-1.782,11.819,2.049c2.699,3.832,1.777,9.124-2.051,11.821C19.305,54.641,14.012,53.727,11.314,49.892z   M52.489,27.813c-2.701-3.831-1.781-9.124,2.051-11.821c3.831-2.697,9.12-1.779,11.821,2.053c2.697,3.83,1.778,9.12-2.053,11.819  C60.477,32.562,55.187,31.645,52.489,27.813z M23.794,71.543c-2.697-3.834-1.78-9.127,2.05-11.824  c3.831-2.697,9.124-1.779,11.821,2.051c2.697,3.832,1.78,9.125-2.051,11.822C31.784,76.291,26.492,75.371,23.794,71.543z" />
    </svg>
</button>

<style>
    .SVGicon {
        fill: var(--text-prim);
    }
    .SVGicon:hover {
        filter: brightness(150%);
    }
</style>
Enter fullscreen mode Exit fullscreen mode

Load this in yout svelte app

<script>
    import themeSwitch from '../components/themeSwitch.svelte';
</script>

<nav class="sm:block">
    <themeSwitch />
</nav>
Enter fullscreen mode Exit fullscreen mode

Add Theme colors to .app.css or ./custom.css:

@tailwind base;
@tailwind components;
@tailwind utilities;


[data-theme="theme-light"] {
    --text-prim: #6c757d;
    --text-seco: #007bff;
    --text-tert: #17a2b8;
    --bg-prim: #F8F9FA;
    --bg-seco: #F7F7F9;
    --bg-tert: #EFEFEF;
    --border-prim: #777777;
    --border-seco: #dddddf;
    --border-tert: #c9c9cc;
    --success: #007E33;
    --info: #0099CC;
    --warn: #FF8800;
    --error: #CC0000;
}

[data-theme="theme-dark"] {
    --text-prim: #d7d7d8;
    --text-seco: #2798e4;
    --text-tert: #988cca;
    --bg-prim: #232327;
    --bg-seco: #27272B;
    --bg-tert: #2C2C31;
    --border-prim: #1b1b20;
    --border-seco: #991b1b;
    --border-tert: #991b1b;
    --success: #6a8759;
    --info: #c9ac57;
    --warn: #cb7832;
    --error: #e9553b;
}
Enter fullscreen mode Exit fullscreen mode

Set these vars to your tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
    content: ['./src/**/*.{svelte,js,ts}'],
    theme: {

        backgroundColor: {
            "prim": "var(--bg-prim)",
            "seco": "var(--bg-seco)",
            "tert": "var(--bg-tert)",
            "info": "var(--info)",
            "warn": "var(--warn)",
            "error": "var(--error)",
            ...colors
        },
        textColor: {
            "prim": "var(--text-prim)",
            "seco": "var(--text-seco)",
            "tert": "var(--text-tert)",
            "success": "var(--success)",
            "info": "var(--info)",
            "warn": "var(--warn)",
            "error": "var(--error)",
            ...colors
        },
        borderColor: {
            "prim": "var(--border-prim)",
            "seco": "var(--border-seco)",
            "tert": "var(--border-tert)",
            ...colors

        },
        extend: {

        },
    },
    plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Have a nice ThemeSwitching :-)

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!