Помогите сделать динамическое изменение стилей фона на сайте

[Vadim Zhizherin]

Создайте HTML-страницу с возможностью переключения стилевого файла для страницы index.html.

Для этого необходимо создать две страницы со стилями light.css и dark.css', задающие разный фон и шрифт для страницы, а также к тегу <link>, с помощью которого подключается стилевой файл, добавить id:

<link id="CSSsource" href="light.css" rel="stylesheet" />
Далее нужно создать функцию, которая переключает стиль страницы при нажатии на кнопку.

[Nexus]

var includeStyle;
(function() {
    const ID = 'variable-stylesheet';

    includeStyle = function(path) {//Принимает путь к css файлу
        let node = document.getElementById(ID);
        if (node)
            node.parentNode.removeChild(node);

        node = document.createElement('link');
        node.rel = 'stylesheet';
        node.href = path;
        node.id = ID;

        document.head.appendChild(node);
    };
})();

[Vadim Zhizherin]

Скажи, пожалуйста, где тут что? Как сделать так, чтобы по нажатию на кнопку менялся фон?

[Nexus]

Vadim Zhizherin, функция "includeStyle" принимает в кач-ве аргумента строку (доступные значения: light, dark).

<button type="button" onclick="includeStyle('light.css');">Light</button>
<button type="button" onclick="includeStyle('dark.css');">Dark</button>

[Vadim Zhizherin]

То есть там, где написано style писать light?

Должно быть две функции?

[Nexus]

Vadim Zhizherin, я привел пример кнопок...

[Vadim Zhizherin]

я понял, что функций две, но, там, где написано style или ID писать название css файла и его ID?

[Vadim Zhizherin]

var includeStyle;
(function() {
    let styles = {
        light: 'light.css',
        dark: 'dark.css'
    };
    const ID = 'variable-stylesheet';

    includeStyle = function(light) {
        if (!styles[light])
            return;

        let node = document.getElementById(llight);
        if (node)
            node.parentNode.removeChild(node);

        node = document.createElement('light.css');
        node.rel = 'stylesheet';
        node.href = styles[light];
        node.id = llight;

        document.head.appendChild(node);
    };

      includeStyle = function(dark) {
        if (!styles[dark])
            return;

        let node = document.getElementById(ddark);
        if (node)
            node.parentNode.removeChild(node);

        node = document.createElement('dark.css');
        node.rel = 'stylesheet';
        node.href = styles[dark];
        node.id = ddark;

        document.head.appendChild(node);
    };
})();

[Nexus]

Vadim Zhizherin, функция одна.
Убрал список доступных файлов, теперь функция принимает просто путь к css файлу.
Еще один пример:

<!-- Подключить файл «new-style.css» -->
<button type="button" onclick="includeStyle('new-style.css');">Подключить файл</button>

[Nexus]

https://plnkr.co/edit/VhrGgdLyyI98sSbrmUNB?p=preview