darkMode

[CabinetAdmin]

Зачем заменяете? Используете более одного стиля и замена цвета предназначена только для этого стиля? Если нет, то оставьте имя all, ну или скопируйте её и переименуйте в название стиля. Тут тогда можно будет цвета подобрать конкретно под этот стиль, а в папке all для всех остальных.

Запустил на тестовом - работает. Правда пришлось чуть подправить стиль, не знаю это только с моим стилем (версия 2.0.6) или у них во всех версиях так... В общем в футере присутствует лишнее событие:

Код: Выделить всё

<!-- EVENT overall_footer_after -->

которое стоит сразу за:

Код: Выделить всё

<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->

Посмотрите, может быть это и мешает работе расширения.

[romaamor]

CabinetAdmin,

а так же как сделать переключатель по типу как у вас на форуме.

???

[CabinetAdmin]

Для этого расширения? Мне кажется не сложно наверно, завтра посмотрю как там кнопка устроена.

[romaamor]

Для этого расширения?

Да. А то родная кнопка мелко заметна.

[southklad]

CabinetAdmin, Нет, я создал папку стиля своего, туда скопировал с другой папки и уже его изменил, но при нажатии на изменение стиль не меняется на светлый, только темный и там и там

[southklad]

Вот тестовый https://southklad.ru/test3.0/

[CabinetAdmin]

Вот тестовый

Ну правильно, стилевой файл добавляется ведь сразу в тело страницы, а в нём у вас сразу добавлены стили переопределения цветов, на вроде этого:

Код: Выделить всё

html {
	background-color: #171c20;
}

вот у вас сразу все цвета и тёмные.

Вам нужен чуть другой подход. Вам надо все элементы, для тёмного режима, перечислять с соответствующим классом darkmode, за исключением кода выше, его надо заменить на body, должно получиться что-то вроде этого:

Код: Выделить всё

body.darkmode {
	background-color: #171c20;
}

.darkmode .class-1 {
	background-color: #000;
}

.darkmode .class-2 {
	background-color: #333;
}

.darkmode .class-3, .darkmode .class-4 {
	background-color: #fff;
}

и тд и тп.

зы. В стилевом файле в самом конце файла добавьте }.

[CabinetAdmin]

Переключатель. Пара вариантов.

Вариант первый. Те же самые иконки, только крупнее и расположены справа сверху.

Код: Выделить всё

@media (min-width: 768px) {
	#callDark, #callLight {
		position: fixed;
		right: 10px;
		bottom: 0;
		top: 15px;
	}

	#callDark span, #callLight span {
		display: none;
	}

	#callDark .icon, #callLight .icon {
		font-size: 36px;
	}

	#callDark a {
		color: #000;
	}

	#callLight a {
		color: #000;
		position: sticky;
		top: 16px;
	}
}

Вариант второй. Иконки как здесь на форуме, только без анимации при переходе с одного режима на другой.

Код: Выделить всё

@media (min-width: 768px) {
	#callDark, #callLight {
		position: fixed;
		right: 10px;
		bottom: 0;
		top: 15px;
		width: 46px;
	}

	#callDark span, #callLight span,
	#callDark .icon, #callLight .icon {
		display: none;
	}

	#callDark a, #callLight a {
		display: block;
		margin: 0 auto;
		border-radius: 50%;
		width: 36px;
		height: 36px;
		position: relative;
		box-shadow: inset 16px -16px 0 0 #464646;
		-webkit-transform: scale(1) rotate(-2deg);
		transform: scale(1) rotate(-2deg);
		-webkit-transition: box-shadow .5s ease 0s,-webkit-transform .4s ease .1s;
		transition: box-shadow .5s ease 0s,-webkit-transform .4s ease .1s;
		transition: box-shadow .5s ease 0s,transform .4s ease .1s;
		transition: box-shadow .5s ease 0s,transform .4s ease .1s,-webkit-transform .4s ease .1s;
	}

	#callDark a:before, #callLight a:before {
		content: '';
		width: inherit;
		height: inherit;
		border-radius: inherit;
		position: absolute;
		left: 0;
		top: 0;
		-webkit-transition: background .3s ease;
		transition: background .3s ease;
	}

	#callDark a:hover {
		-webkit-transform: scale(1) rotate(10deg);
		transform: scale(1) rotate(10deg);
	}

	#callLight a {
		position: sticky;
		top: 16px;
		box-shadow: inset 32px -32px 0 0 #fff;
		-webkit-transform: scale(0.5) rotate(0deg);
		transform: scale(0.5) rotate(0deg);
		-webkit-transition: box-shadow .2s ease 0s -webkit-transform .3s ease .1s;
		transition: box-shadow .2s ease 0s, -webkit-transform .3s ease .1s;
		transition: transform .3s ease .1s, box-shadow .2s ease 0s;
		transition: transform .3s ease .1s, box-shadow .2s ease 0s,-webkit-transform .3s ease .1s;
	}

	#callLight a:after {
		content: '';
		width: 8px;
		height: 8px;
		border-radius: 50%;
		margin: -4px 0 0 -4px;
		position: absolute;
		top: 50%;
		left: 50%;
		box-shadow: 0 -23px 0 #000000, 0 23px 0 #000000, 23px 0 0 #000000, -23px 0 0 #000000, 15px 15px 0 #000000, -15px 15px 0 #000000, 15px -15px 0 #000000, -15px -15px 0 #000000;
		-webkit-transform: scale(0);
		transform: scale(0);
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
	}

	#callLight a:before {
		background: #000000;
		-webkit-transition: background .3s ease .1s;
		transition: background .3s ease .1s;
	}

	#callLight a:after {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
		-webkit-transition: -webkit-transform .5s ease .15s;
		transition: -webkit-transform .5s ease .15s;
		transition: transform .5s ease .15s;
		transition: transform .5s ease .15s,-webkit-transform .5s ease .15s;
	}

	#callLight a:hover:after {
		-webkit-transform: scale(1.7);
		transform: scale(1.7);
	}
}

Пояснения.
Иконка будет отображаться только от ширины экрана 768px и шире. Сделано это потому, что на небольших экранах пункты меню: ссылки, фак, уведомления и тд. перестанут сворачиваться. На маленьких экранах будет отображаться родной вариант кнопки.

Почему во втором варианте нет анимации как здесь? Потому что в этом расширении включение режимов выполнено на двух разных кнопках, на "Кабинете Админа" на одной.

Почему иконка расположена сверху, а не снизу? Потому что с расширении использует не совсем типичный вариант смены цветов:

Код: Выделить всё

filter: invert(1) hue-rotate(.5turn);

Если зафиксировать кнопку внизу, то при включении тёмного режима кнопка окажется не внизу экрана, а внизу страницы форума, на уровне подвала.

Если использовать расширение только как переключатель, а стили переопределять по классам конкретно по блокам и при удалении filter из стиля, то из обоих вариантов удалить top: 15px; в #callDark, #callLight и в #callLight a:

Код: Выделить всё

	position: sticky;
	top: 16px;

[romaamor]

Спасибо. Работает. Выбрал первый вариант. Только ещё надо было добавить в код z-index: 1;. А то .wrap налаживался с верху.

[southklad]

Сделал, только отображаются не верно, как опустить чуть ниже? А так же почему то половина главной страницы белая.

[romaamor]

А так же почему то половина главной страницы белая.

Если речь о https://southklad.ru/test3.0/ то у меня всё нормально смотрится.

Сделал, только отображаются не верно, как опустить чуть ниже?

Изменить top: 60px; в

Код: Выделить всё

@media (min-width: 768px)
#callDark, #callLight {
    position: fixed;
    right: 10px;
    bottom: 0;
    top: 60px;
    z-index: 1;
}

[southklad]

всё нормально смотрится.

А у меня так

[CabinetAdmin]

почему то половина главной страницы белая

Потому что цвет в стиле применён к html, а класс добавляется к body. Можно сделать так, в colours.css в самом начале:

Код: Выделить всё

html, body {
	color: #4C5D77;
	background-color: #f4f4f4;
}

body {
	background-color: transparent; /* Required for parallax */
}

поменять на:

Код: Выделить всё

html, body {
	color: #4C5D77;
}

body {
	background-color: #f4f4f4;
}

Только ещё надо было добавить в код

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

[romaamor]

А у меня так

Аааа, у меня мониторы 19". Если уменьшить масштаб, то да, видно белую полосу.