VueJS/public/data/id305.html

<h1>Цветовые схемы</h1>
<p>
    Наша программа получилась такая светлая-красивая, но в темноте пользоваться ей неудобно, яркий свет от экрана слишком бьёт по глазам, предлагаю
    <s>перейти на тёмную сторону</s> сделать тёмный вариант интерфейса.
</p>
<p>
    Открывайте основной модуль нашего приложения App.vue. В блоке <code>&lt;script></code> найдите секцию <code>data ()</code> и добавьте в неё переменную dark
    со значением по умолчанию равным false, это будет флаг использования тёмной версии интерфейса. После этого в блоке <code>&lt;template></code> измените
    <code>&lt;v-app></code> на <code>&lt;v-app :dark="dark"></code>, этим мы свяжем наш флаг использования тёмной версии с назначением соответствующего
    CSS-класса главному элементу программы.
</p>
<p>
    Попробуйте изменить в <code>data ()</code> значение переменной dark на true, ваше приложение станет тёмным. Получилось? Теперь прикрутим меню с пунктом для
    переключения вариантов интерфейса, для этого в конец блока <code>&lt;v-toolbar></code> добавим следующий код:
    <div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
        <pre>
&lt;v-menu bottom left>
    &lt;template v-slot:activator="{ on }">
        &lt;v-btn
            flat
            icon
            v-on="on"
        >
            &lt;v-icon>more_vert&lt;/v-icon>
        &lt;/v-btn>
    &lt;/template>

    &lt;v-list>
        &lt;v-list-tile>
            &lt;v-list-tile-action>
                &lt;v-switch v-model="dark" color="blue">&lt;/v-switch>
            &lt;/v-list-tile-action>
            &lt;v-list-tile-title>Тёмная схема&lt;/v-list-tile-title>
        &lt;/v-list-tile>
    &lt;/v-list>
&lt;/v-menu>
        </pre>
    </div>
    Теперь у нас есть переключатель темы, но при каждой повторной загрузке тема всегда включается светлая, реализуем сохранение значения флага в
    cookies, для этого в блоке <code>&lt;script></code> добавим секцию <code>watch</code> с кодом, отслеживающим изменение флага dark и сохраняющим
    его значение в localSorage:
    <div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
        <pre>
watch: {
    dark (val) { localStorage.dark = val; }
}
        </pre>
    </div>
</p>
<p>
    Сохранение сделали, сделаем и чтение сохранённой информации, добавив в секцию <code>mounted</code> строку
    <code>this.dark = localStorage.dark ? JSON.parse(localStorage.dark) : false;</code>. После чего наш App.vue должен выглядеть следующим образом:
    <div class="grey darken-3 white--text" style="overflow-x: auto; border-radius: 5px;">
        <pre>
&lt;template>
    &lt;v-app :dark="dark">
        &lt;v-toolbar app>
            &lt;v-toolbar-title class="headline text-uppercase">
                &lt;span>Vue.js:&lt;/span>
                &lt;span class="font-weight-light">Самоучитель&lt;/span>
            &lt;/v-toolbar-title>
            &lt;v-spacer>&lt;/v-spacer>
            &lt;v-btn
                flat
                href="https://home.cainet.info:3000/cai/VueJS/"
                target="_blank"
            >
                &lt;span class="mr-2">Актуальная версия&lt;/span>
            &lt;/v-btn>
            &lt;v-menu bottom left>
                &lt;template v-slot:activator="{ on }">
                    &lt;v-btn
                        flat
                        icon
                        v-on="on"
                    >
                        &lt;v-icon>more_vert&lt;/v-icon>
                    &lt;/v-btn>
                &lt;/template>

                &lt;v-list>
                    &lt;v-list-tile>
                        &lt;v-list-tile-action>
                            &lt;v-switch v-model="dark" color="blue">&lt;/v-switch>
                        &lt;/v-list-tile-action>
                        &lt;v-list-tile-title>Тёмная схема&lt;/v-list-tile-title>
                    &lt;/v-list-tile>
                &lt;/v-list>
            &lt;/v-menu>
        &lt;/v-toolbar>

        &lt;v-content>
            &lt;v-container fluid fill-height grid-list-md>
                &lt;v-layout row wrap full-height>
                    &lt;v-flex sm4>
                        &lt;TOC ref="TOC" />
                    &lt;/v-flex>
                    &lt;v-flex sm8 v-html="text">&lt;/v-flex>
                &lt;/v-layout>
            &lt;/v-container>
        &lt;/v-content>
        &lt;LoadingDialog ref="LoadingDialog" />
        &lt;MessageDialog ref="MessageDialog" />
    &lt;/v-app>
&lt;/template>

&lt;script>
    import LoadingDialog from './components/LoadingDialog'
    import MessageDialog from './components/MessageDialog'
    import TOC from './components/TOC'

    export default {
        name: 'App',

        components: {
            LoadingDialog,
            MessageDialog,
            TOC
        },

        data () {
            return {
                dark: false,
                docId: 0,
                text: ""
            }
        },

        mounted () {
            this.$refs.LoadingDialog.dialog = true;
            this.dark = localStorage.dark ? JSON.parse(localStorage.dark) : false;

            this.axios.get("data/start.html")
                .then(response => {
                    this.text = response.data;
                    this.$refs.LoadingDialog.dialog = false;
                })
                .catch(error => {
                    this.$refs.LoadingDialog.dialog = false;
                    console.log(error);
                    this.$refs.MessageDialog.title = "Ошибка";
                    this.$refs.MessageDialog.text = error;
                    this.$refs.MessageDialog.dialog = true;
                });

            this.$refs.LoadingDialog.dialog = true;

            this.axios.get("data/toc.json")
                .then(response => {
                    this.$refs.TOC.items = response.data;
                    this.$refs.LoadingDialog.dialog = false;
                })
                .catch(error => {
                    this.$refs.LoadingDialog.dialog = false;
                    console.log(error);
                    this.$refs.MessageDialog.title = "Ошибка";
                    this.$refs.MessageDialog.text = error;
                    this.$refs.MessageDialog.dialog = true;
                });

            this.$watch(
                "$refs.TOC.active",
                (newVal, oldVal) => {
                    if (newVal.length) {
                    this.$refs.LoadingDialog.dialog = true;
                    this.axios.get("data/id" + newVal + ".html")
                        .then(response => {
                            this.text = response.data;
                            this.$refs.LoadingDialog.dialog = false;
                        })
                        .catch(error => {
                            this.$refs.LoadingDialog.dialog = false;
                            console.log(error);
                            this.$refs.MessageDialog.title = "Ошибка";
                            this.$refs.MessageDialog.text = error;
                            this.$refs.MessageDialog.dialog = true;
                        });
                    }
                }
            );
        },

        watch: {
            dark (val) { localStorage.dark = val; }
        }
    }
&lt;/script>
        </pre>
    </div>
</p>