hoppscotch/pages/settings.vue

<template>
    <div class="page">

        <pw-section class="blue" label="Theme">
            <ul>
                <li>
                    <h3>Background</h3>
                    <div class="backgrounds">
                        <span v-for="theme in themes" :key="theme.class" @click="applyTheme(theme.class)">
                            <swatch :color="theme.color" :name="theme.name" :class="{ vibrant: theme.vibrant }" :active="settings.THEME_CLASS === theme.class"></swatch>
                        </span>
                    </div>

                </li>
            </ul>

            <br><br>

            <ul>
                <li>

                    <h3>Color</h3>
                    <div class="colors">
                        <span v-for="entry in colors" :key="entry.color"
                              @click.prevent="setActiveColor(entry.color, entry.vibrant)">
                            <swatch
                                :color="entry.color"
                                :name="entry.name"
                                :class="{ vibrant: entry.vibrant }"
                                :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
                        </span>
                    </div>

                    <p>
                        <input id="disableFrameColors" type="checkbox"
                              :checked="!settings.DISABLE_FRAME_COLORS"
                              @change="toggleSetting('DISABLE_FRAME_COLORS')">
                        <label for="disableFrameColors">Enable multi-colored frames</label>
                    </p>
                </li>
            </ul>
        </pw-section>

    </div>
</template>

<script>
    import section from "../components/section";
    import swatch from "../components/settings/swatch";

    export default {
        data () {
            return {
                // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
                //        You should copy the existing light theme as a template and then just
                //        set the relevant values.
                themes: [
                    { "color": "#121212", "name": "Dark (Default)", "class": "" },
                    { "color": "#DFDFDF", "name": "Light", "vibrant": true, "class": "light" }
                ],

                // You can define a new color here! It will simply store the color value.
                colors: [
                    // If the color is vibrant, black is used as the active foreground color.
                    { "color": "#51ff0d", "name":"Lime (Default)", "vibrant": true },
                    { "color": "#FFC107", "name":"Yellow", "vibrant": true },
                    { "color": "#E91E63", "name":"Pink", "vibrant": false },
                    { "color": "#e74c3c", "name":"Red", "vibrant": false },
                    { "color": "#9b59b6", "name":"Purple", "vibrant": false },
                    { "color": "#2980b9", "name":"Blue", "vibrant": false },
                ],
                settings: {
                    THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || '',
                    THEME_COLOR: '',
                    THEME_COLOR_VIBRANT: true,

                    DISABLE_FRAME_COLORS: this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false
                }
            }
        },

        components: {
            'pw-section': section,
            'swatch': swatch
        },

        methods: {
            applyTheme (name) {
                this.applySetting('THEME_CLASS', name);
                document.documentElement.className = name;
            },

            setActiveColor (color, vibrant) {
                // By default, the color is vibrant.
                if(vibrant == null) vibrant = true;

                document.documentElement.style.setProperty('--ac-color', color);
                document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');

                this.applySetting('THEME_COLOR', color.toUpperCase());
                this.applySetting('THEME_COLOR_VIBRANT', vibrant);
            },

            getActiveColor () {
                // This strips extra spaces and # signs from the strings.
                const strip = (str) => str.replace(/#/g, '').replace(/ /g, '');

                return `#${strip(window.getComputedStyle(document.documentElement).getPropertyValue('--ac-color')).toUpperCase()}`;
            },

            applySetting (key, value) {
                this.settings[key] = value;
                this.$store.commit('postwoman/applySetting', [key, value]);
            },

            toggleSetting (key) {
                this.settings[key] = !this.settings[key];
                this.$store.commit('postwoman/applySetting', [key, this.settings[key]]);
            }
        },

        beforeMount () {
            this.settings.THEME_COLOR = this.getActiveColor();
        }
    }
</script>