Сегодня хотел бы поделиться одним очень полезным скриптом - это переключатель стилей или Switch Stylesheet. Делая этот блог, я не раз слышал, что многим людям не удобно читать текст на тёмном фоне, глаза режет и всё такое... но мне нравится тёмный дизайн и менять фон мне никак не хотелось, вот и вспомнил, что я где-то видел сайт, на котором кнопкой можно было менять оформление. Короче, пришлось озаботиться раскопками скрипта, который бы мог изменять дизайн. Дело оказалось не таким простым, как казалось. Нашел много разных скриптов, но один не пашет, другой заставляет страницу перезагружаться, третий создает еще одну дублирующую страницу... ничего из этого меня не устраивало. И вот, наконец, нашел именно то, что нужно. Простой скрипт, который по одному клику меняет CSS стили.

Делается это очень просто:

1. Загружаете скрипт styleswitch.js в корень своего сайта.

2. Вставляете ссылку на этот скрипт между тегами <head></head> ниже ссылки на ваш основной CSS стиль:

3. Вставляете ссылки переключения стилей в тело:

Вот примерно так всё вместе это должно выглядеть в коде:

Как это работает можно увидеть на этом блоге, кликаем по этим ссылкам →

Dark Light

Смотрим и вдохновляемся классными примерами сайтов с переключателями стилей дизайна.

1. Sparklette

2. Kineticshadows

3. Kulturbanause

4. Webstaze

5. Popurls

6. Urbanchip

7. Wish tree

8. Mixoart

9. Ps-designstudio

10. Marius Roosendaal

11. Diegovalobra

12. Switch Display Options