Способы выбора цветовой темы веб-сайта

На некоторых сайтах вы можете выбрать цветную тему веб-сайта, нажав кнопку. Кажется, что ничего сложного, однако есть ли какие-либо современные методы для этого (возможно, переключение между классами на странице или вызов разных файлов css)?Способы выбора цветовой темы веб-сайта

источник

2013-12-01 sdvnksv

я найти новые CSS3 решения очень полезно также ЯШ:

element.classList.add('className'); 
element.classList.remove('className'); 
element.classList.toggle('className'); 
element.classList.contains('className');// check first

и поэтому, если вы хотите изменить стиль целой страницы вам нужно начать с самого высокого элемента, как вы не можете стиля родительских узлов с помощью CSS ...

пример 1

с более чем 2-х классов

body.class1{color:blue} 
body.class1>div{color:blue} 
body.class1>div>a>p>whatever:hover{color:blue} 

body.class2{color:green} 
body.class2>div{color:green} 
/*the div's inside the body with class 'class2' have a green font*/ 
body.class2>div>a>p>whatever:hover{color:green}

в этом случае вы изменить стиль для всей страницы, просто позвонив

body.classList.remove('class1'); 
body.classList.add('class2');

пример 2

с 2-мя классами (один по умолчанию и дополнительных)

body{color:blue} 
body>div{color:blue} 
body>div>a>p>whatever:hover{color:blue} 

body.extra{color:green} 
body.extra>div{color:green} 
body.extra>div>a>p>whatever:hover{color:green}

ЯШ:

body.classList.toggle('extra');

вы также можете изменить весь css .. зависит от того, сколько вы действительно хотите изменить.

или создавать правила динамически с помощью JavaScript

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule

myStyle.insertRule("#blanc { color: white }", 0);

, но я думаю, что первое из них является самым простым в обращении ...

также, если у вас есть контейнер, который будет отображается как сетка, ряды больших значков - самое простое решение - просто создать класс на родительском контейнере. Например, в примере 1.

tip: еще одна вещь, которую я использую в последнее время, это hsla (оттенок, насыщенность, легкость, альфа);

я использую это, если я хочу, чтобы иметь фон и шрифт тот же цвет, но шрифт просто немного темнее:

background-color:hsla(360,100%,20%,1);// 20% light 
color:hsla(360,100%,80%,1);// 80% light

источник

2013-12-01 13:24:07 cocco

Дайте вашему телу класс цвета.

Например, <body class="color-green">. Вы можете переключать класс через JS:

document.body.classList.toggle('color-green').

В вашем CSS вы должны создавать цветовые Осведомленный селекторы:

.button { 
    color: blue; 
} 

.color-green .button { 
    color: green; 
}

На мой взгляд, это путь.

Если вы создаете много правил цвета в своем CSS, вы, вероятно, должны разделять их на свои собственные файлы и включать их при нажатии кнопки изменения цвета.

источник

2013-12-01 13:33:40

Способы выбора цветовой темы веб-сайта

ответ

Смежные вопросы