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

Здравствуйте
На сайте использую данный код для смены стилей 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="">
второй линк добавили?