Виджет Изменение контрастности

Это в файл header.html (или похожий файл) в самое начало (можно разместить ниже скрипта для увеличения текста (для слабовидящих)):

<span class="site_blackwhite_styles" style="display: none;"></span>
<script type="text/javascript">
$(document).ready(function(){
	var blackwhite_params = {
		block: '.site_blackwhite_styles',
		styles: [
			black: [ // стили черного сайта
				'{{template.path}}/css/style.css',
			],
			white: [ // стили белого сайта
				'{{template.path}}/css/style2.css',
			]
		]
	};
	setBlackWhite(blackwhite_params, 'load');
	
	// версия для двух кнопок
	var ver = getBlackWhite();
	if(ver == 'white'){
		if(!$('.blackwhite_btn.black').hasClass('disabled')){
			$('.blackwhite_btn.black')
				.addClass('disabled')
				.attr('disabled', 'disabled');
		}
	}
	if(ver == 'black'){
		if(!$('.blackwhite_btn.white').hasClass('disabled')){
			$('.blackwhite_btn.white')
				.addClass('disabled')
				.attr('disabled', 'disabled');
		}
	}
	$(document).on('click', '.blackwhite_btn.black', function(){
		var ver = getBlackWhite();
		setBlackWhite(blackwhite_params, 'black'); // сама переключалка
		if(ver == 'black'){
			if(!$(this).hasClass('disabled')){
				$(this)
					.addClass('disabled')
					.attr('disabled', 'disabled');
			}
		}
		$('.blackwhite_btn.white')
			.removeClass('disabled')
			.removeAttr('disabled');
	});
	$(document).on('click', '.blackwhite_btn.white', function(){
		var ver = getBlackWhite();
		setBlackWhite(blackwhite_params, 'white'); // сама переключалка
		if(ver == 'white'){
			if(!$(this).hasClass('disabled')){
				$(this)
					.addClass('disabled')
					.attr('disabled', 'disabled');
			}
		}
		$('.blackwhite_btn.black')
			.removeClass('disabled')
			.removeAttr('disabled');
	});
	
	// версия для одной кнопки
	$(document).on('click', '.blackwhite_btn.change', function(){
		setBlackWhite(blackwhite_params, 'change'); // сама переключалка
	});
});
</script>

При переключении режима просмотра будут подгружаться соответствующие стили. Соответственно создаем css файлы, выделенные в начале скрипта с названием style.css, style2.css.

Создаем css файл (contrast.css) для контрастного стиля:

body,
body *,
#bmc_header tr * {
	background: #000 !important;    
	color: #fff !important;
	text-shadow: none !important;
	border-color: #fff !important;
}
.grenbtn,input[type=submit] {
	border: 1px solid #fff !important;
}
button {
	background-color: #f4f4f4 !important;
	color: #222!important;
}
.contrast {
	background-image: url(../images/contrast.png) !important;
	background-repeat:  no-repeat !important;
	background-position: center !important;
	color: transparent !important;
	border: 1px solid silver !important;
	background-size: 15px !important;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
	-khtml-border-radius: 2px;
	width: 30px;
}
a:hover {
	text-decoration: underline !important;
	opacity: 1 !important;
}

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

В месте, где необходимо вывести кнопки ставим следующий код. У кнопки меняющий контраст обязательно должны быть прописаны классы blackwhite_btn и change.

<ul class="buttons">
	<!--кнопка переключения контрастности -->
	<li>
		<button class="blackwhite_btn change contrast">C</button>
	</li>
</ul>

Виджет "Изменение контрастности"