Смена стилей нажатием на кнопку
 

Здравствуйте
На сайте использую данный код для смены стилей css

<link id="dyncss" rel="stylesheet" type="text/css" href=""> 
<script type="text/javascript"> 
function setDynCSS(url) { 
if (!arguments.length) { 
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1]; 
if (!url) return ''; 
} 
document.getElementById('dyncss').href = url; 
var d = new Date(); 
d.setFullYear(d.getFullYear() + 1); 
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join(''); 
return url; 
} 
setDynCSS(); 
</script>

<img style="cursor:pointer;" src="Ссылка на картинку 1" onclick="setDynCSS('Ссылка на стиль 1.css')"> 
<img style="cursor:pointer;" src="Ссылка на картинку 1" onclick="setDynCSS('Ссылка на стиль 2.css')">

Скрип работает. Меняет фон сайта (светлый/темный) при нажатии на кнопки и запоминает его. Проблема только одна, при выборе светлого фона сайта изначально загружается темный фон (который стоит по умолчанию на сайте) , а потом сам меняется на светлый.
Как можно выполнять js до появления основного стиля сайта?
Подойдет любой другой вариант который не покажет пользователю разницу между стилями при загрузке стиля исполняемого js.

ddro3doff,
измените логику скрипта и не грузите по умолчанию ничего

function setDynCSS(url) {
if (!arguments.length) {
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];
if (!url) url = '2.css';
}
else {
var d = new Date();
d.setFullYear(d.getFullYear() + 1);
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
}
document.getElementById('dyncss').href = url;
}
setDynCSS();

Спасибо. Все работает

А возможно что бы одновременно менялись 2 фаила css?
Например style.css и engene.css менялись на style1.css и engene1.css

да, можно сколько угодно. наверняка есть примеры на форуме, поищите.
нужен объект {ночь : [ссылки], день : [ссылки]}

ddro3doff,

<link id="dyncss" rel="stylesheet" type="text/css" href="">
<link id="engcss" rel="stylesheet" type="text/css" href="">
<img style="cursor:pointer;" src="Ссылка на картинку 1" onclick="setDynCSS('dark')">
<img style="cursor:pointer;" src="Ссылка на картинку 1" onclick="setDynCSS('light')">

<script>
function setDynCSS(url) {
if (!arguments.length) {
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];
if (!url) url = 'dark';
}
else {
var d = new Date();
d.setFullYear(d.getFullYear() + 1);
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
}
var cssObj = {'dark' : ['style.css', 'engene.css'], 'light' : ['style1.css', 'engene1.css']}
if(url in cssObj){
document.getElementById('dyncss').href = cssObj[url][0];
document.getElementById('engcss').href = cssObj[url][1];
}
}
setDynCSS();

</script>

Все замечательно. Спасибо. Но,если умолчанию не указывать css, то для нового юзера сайт загружается без стилей. После первого нажатия на кнопку день или ночь все нормализуется.Как бы При первом заходе отдавать фаил юзеру, а после нажатbя на день/ночь больше его не юзать?

у нового будет dark!
сотрите куки или
замените dyncss на любое другое слово, строки 9 и 15.

Спасибо еще раз. Все заработало.
Только опять одно"НО"
Убрал из основной стиль

<link href="{THEME}/css/engine.css" type="text/css" rel="stylesheet">

Добавил

<img style="cursor:pointer;" src="/templates/Default/images/off.png" onclick="setDynCSS('dark')">

<img style="cursor:pointer;" src="/templates/Default/images/on.png" onclick="setDynCSS('light')">


<script>
function setDynCSS(url) {
if (!arguments.length) {
url = (url = document.cookie.match(/\bdyncss=([^;]*)/)) && url[1];
if (!url) url = 'dark';
}
else {
var d = new Date();
d.setFullYear(d.getFullYear() + 1);
document.cookie = ['dyncss=', url, ';expires=', d.toGMTString(), ';path=/;'].join('');
}
var cssObj = {'dark' : ['{THEME}/css/main.css', '{THEME}/css/engene.css'], 'light' : ['{THEME}/css/main2.css', '{THEME}/css/engene1.css']}
if(url in cssObj){
document.getElementById('dyncss').href = cssObj[url][0];
document.getElementById('engcss').href = cssObj[url][1];
}
}
setDynCSS();

</script>

main.css и main2.css меняется, а engene.css и engene1.css не подхватывает из скрипта.

ddro3doff,
<link id="engcss" rel="stylesheet" type="text/css" href="">
второй линк добавили?

Теперь все работает как нужно, только при загрузке страницы, первым загружается страница без стилей на белом фоне , а потом уже подхватываются css. Смотрится очень некрасиво + бьет по глазам из-за темного дизайна. Можно как-то устранить данный дефект?
Спасибо за терпение :thanks:

ddro3doff,
скрипт и теги link перенесите как можно выше в head

Пробовал, все ровно не успевает.

ddro3doff,
пока не могу ничего добавить, может специалисты по дизайну что-то предложат.

ddro3doff,
может вам грузить всё сразу, а смену стилей сделать через смену класса body.

Если я правильно понял, то если я я буду загружать основные css сразу, то при загрузке страницы они всегда будут подхватываться первыми. Даже если я буду менять класс у body.

рони,
Вот нашел пример рабочего скрипта на сайте , только вот как он добился такого результат? https://akniga.org/

смена темы оформления
 

ddro3doff,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
body.dark {
    background-color: #000000;
    color: #FFFFFF;
}
</style>
</head>
<body>
<script>
function setTheme(theme) {
document.body.classList.remove('dark', 'light');
if(!theme) theme = localStorage.getItem('theme') || 'dark';
else {localStorage.setItem('theme', theme) };
document.body.classList.add(theme)
}
setTheme();
</script>
<h1>test</h1>
<img style="cursor:pointer;" src="/templates/Default/images/off.png" onclick="setTheme('dark')">
<img style="cursor:pointer;" src="/templates/Default/images/on.png" onclick="setTheme('light')">
</body>
</html>

пост #15 и #18 (возможно там другая реализация, но смысл тот же, смена класса у body);
скрипт ставить сразу после <body>

А кроме body еще можно класс какой нибудь подменить?
Например
.action-buttons {
height: 100%;
width: 100%;
margin-left: 0px;
background: #151617;
float: left;
}

нет смысла.
уже достаточно
body.dark .action-buttons{
пишите тут что вам нужно
}