Now it's possible to disable the theme switcher

Carlo Corti

01.06.2021 64b32d0030e711d477835bdb58cc690dea62dd33

Now it's possible to disable the theme switcher

 README.md

@@ -108,6 +108,13 @@
displayMode = "dark"
```

### Disable Theme Switcher
You can easily disable the theme switcher from the `config.toml`. All you have to do is to set the parameter `disableThemeSwitcher` to `true`.
```toml
[params]
disableThemeSwitcher = true # Theme switcher is enabled by default
```

### Disable Animations
You can easily disable the animations from the `config.toml`. All you have to do is to set the parameter `doNotLoadAnimations` to `true`.
```toml

 assets/js/anatole-header.js

@@ -1,53 +1,3 @@
// initialize default value
function getTheme() {
    return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
}

function setTheme(style) {
    document.documentElement.setAttribute('data-theme', style);
    localStorage.setItem('theme', style);
}

function init() {
    // initialize default value
    var theme = getTheme();

    // check if a prefered color theme is set for users that have never been to our site
    const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (theme === null) {
        if (userPrefersDark) {
            setTheme('dark');
        } else if (!document.documentElement.getAttribute('data-theme')) {
            setTheme('light');
        } else {
            setTheme(document.documentElement.getAttribute('data-theme'));
        }
    } else {
        // load a stored theme
        if (theme == 'light') {
            document.documentElement.setAttribute('data-theme', 'light');
        } else {
            document.documentElement.setAttribute('data-theme', 'dark');
        }
    }
}


// switch themes
function switchTheme(e) {
    var theme = getTheme();
    if (theme == 'light') {
        setTheme('dark');
    } else {
        setTheme('light');
    }
}

document.addEventListener('DOMContentLoaded', function () {
    var themeSwitcher = document.querySelector('.theme-switch');
    themeSwitcher.addEventListener('click', switchTheme, false);
}, false);

document.addEventListener("DOMContentLoaded", function () {
// Get all "navbar-burger" elements
    var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
@@ -63,6 +13,4 @@
            });
        });
    }
});

init();
});

 assets/js/anatole-theme-switcher.js

New file
@@ -0,0 +1,51 @@
// initialize default value
function getTheme() {
    return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
}

function setTheme(style) {
    document.documentElement.setAttribute('data-theme', style);
    localStorage.setItem('theme', style);
}

function init() {
    // initialize default value
    const theme = getTheme();

    // check if a preferred color theme is set for users that have never been to our site
    const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (theme === null) {
        if (userPrefersDark) {
            setTheme('dark');
        } else if (!document.documentElement.getAttribute('data-theme')) {
            setTheme('light');
        } else {
            setTheme(document.documentElement.getAttribute('data-theme'));
        }
    } else {
        // load a stored theme
        if (theme === 'light') {
            document.documentElement.setAttribute('data-theme', 'light');
        } else {
            document.documentElement.setAttribute('data-theme', 'dark');
        }
    }
}


// switch themes
function switchTheme() {
    const theme = getTheme();
    if (theme === 'light') {
        setTheme('dark');
    } else {
        setTheme('light');
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const themeSwitcher = document.querySelector('.theme-switch');
    themeSwitcher.addEventListener('click', switchTheme, false);
}, false);

init();

 layouts/partials/head.html

@@ -51,13 +51,23 @@
    {{ end -}}

    <!-- JavaScript -->
    {{ $anatole := resources.Get "js/anatole-header.js" }}
    {{ $secureJS := $anatole |  resources.Minify | resources.Fingerprint }}
    {{ $anatoleHeader := resources.Get "js/anatole-header.js" }}
    {{ $secureHeaderJS := $anatoleHeader |  resources.Minify | resources.Fingerprint }}
    <script type="text/javascript"
            src="{{ $secureJS.Permalink }}"
            integrity="{{ $secureJS.Data.Integrity }}"
            src="{{ $secureHeaderJS.Permalink }}"
            integrity="{{ $secureHeaderJS.Data.Integrity }}"
            crossorigin="anonymous"></script>


    {{ if not .Site.Params.disableThemeSwitcher }}
        {{ $anatoleThemeSwitcher := resources.Get "js/anatole-theme-switcher.js" }}
        {{ $secureThemeSwitcherJS := $anatoleThemeSwitcher |  resources.Minify | resources.Fingerprint }}
        <script type="text/javascript"
                src="{{ $secureThemeSwitcherJS.Permalink }}"
                integrity="{{ $secureThemeSwitcherJS.Data.Integrity }}"
                crossorigin="anonymous"></script>
    {{ end }}

    {{- $js := "" -}}
    {{- range .Site.Params.customJs -}}
        {{- if or (in . "http://") (in . "https://") -}}

 layouts/partials/navbar.html

@@ -23,10 +23,12 @@
                </li>
            {{ end }}
        {{ end }}
        <li class="theme-switch-item">
            <a class="theme-switch" title="Switch Theme">
                <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
            </a>
        </li>
        {{ if not .Site.Params.disableThemeSwitcher }}
            <li class="theme-switch-item">
                <a class="theme-switch" title="Switch Theme">
                    <i class="fas fa-adjust fa-fw" aria-hidden="true"></i>
                </a>
            </li>
        {{ end }}
    </ul>
</div>