southklad 30 мар 2021, 12:52

darkMode

Добрый день, пытаюсь подружить данное расширение https://github.com/Aurelienazerty/darkMode. с темой Милк, но не могу, заменяю в расширении стиль на свой и все, стиль становится полностью темный, переключатель не работает. ПОдскажите как подружить, а так же как сделать переключатель по типу как у вас на форуме. Спасибо
Комментарии: 18

CabinetAdmin 30 мар 2021, 18:35 Сообщение

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

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

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

<!-- EVENT overall_footer_after -->
которое стоит сразу за:

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

<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
Посмотрите, может быть это и мешает работе расширения.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 30 мар 2021, 18:53 Сообщение

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

CabinetAdmin 30 мар 2021, 20:34 Сообщение

Для этого расширения? Мне кажется не сложно наверно, завтра посмотрю как там кнопка устроена.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 30 мар 2021, 20:47 Сообщение

CabinetAdmin писал(а): 30 мар 2021, 20:34 Для этого расширения?
Да. А то родная кнопка мелко заметна.
  • 0

southklad 31 мар 2021, 08:33 Сообщение

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

southklad 31 мар 2021, 08:35 Сообщение

Вот тестовый https://southklad.ru/test3.0/
  • 0
Изображение

CabinetAdmin 31 мар 2021, 16:31 Сообщение

igorbond писал(а): 31 мар 2021, 08:35Вот тестовый
Ну правильно, стилевой файл добавляется ведь сразу в тело страницы, а в нём у вас сразу добавлены стили переопределения цветов, на вроде этого:

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

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;
}
и тд и тп.

зы. В стилевом файле в самом конце файла добавьте }.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

CabinetAdmin 31 мар 2021, 17:04 Сообщение

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

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

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

@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;
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 31 мар 2021, 17:58 Сообщение

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

southklad 31 мар 2021, 19:15 Сообщение

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

romaamor 31 мар 2021, 19:21 Сообщение

igorbond писал(а): 31 мар 2021, 19:15 А так же почему то половина главной страницы белая.
Если речь о https://southklad.ru/test3.0/ то у меня всё нормально смотрится.
igorbond писал(а): 31 мар 2021, 19:15 Сделал, только отображаются не верно, как опустить чуть ниже?
Изменить top: 60px; в

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

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

southklad 31 мар 2021, 19:24 Сообщение

romaamor писал(а): 31 мар 2021, 19:21 всё нормально смотрится.
А у меня так

Изображение
  • 0
Изображение

CabinetAdmin 31 мар 2021, 19:32 Сообщение

igorbond писал(а): 31 мар 2021, 19:15 почему то половина главной страницы белая
Потому что цвет в стиле применён к 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 писал(а): 31 мар 2021, 17:58 Только ещё надо было добавить в код
Ну это уже косметика, я на чистом просильвере пробовал, там вроде нормально было, по крайней мере не заметил косяков.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 31 мар 2021, 19:39 Сообщение

igorbond писал(а): 31 мар 2021, 19:24А у меня так
Аааа, у меня мониторы 19". Если уменьшить масштаб, то да, видно белую полосу.
  • 0

Похожие темы