Переключатель между css

Bruno_Creed · March 23, 2018

Здравствуйте,

есть 2 css-файла: style.css, stylenight.css. Как вы поняли, второй из них - это ночная тема.

Нужно сделать переключатель на сайте между css, например, "Перейти на ночную версию сайта", где будет выполнен переход со style.css на stylenight.css.

Как это сделать? :rolleyes:

klierik · March 23, 2018

Добавить класс для <body>, на пример, ".theme-dark" и во втором файле внести изменения в общие стили ипользуя глобальный модификатор (класс).

Переключатель реализуем на JS (с последующим созранением настроек в LocalStorage, естестенно).

Bruno_Creed · March 24, 2018

11 часов назад, klierik сказал:

Добавить класс для <body>, на пример, ".theme-dark" и во втором файле внести изменения в общие стили ипользуя глобальный модификатор (класс).

Переключатель реализуем на JS (с последующим созранением настроек в LocalStorage, естестенно).

А как для тупого можете объяснить?

С подробностями, я новичок в этом.

klierik · March 26, 2018

В 3/24/2018 в 09:01, Bruno_Creed сказал:

А как для тупого можете объяснить?

Объяснить что именно?

mrnobody · March 26, 2018

Наверное так

Основной стиль

Скрытый текст


body {
  font-family: 'Fira Sans', sans-serif;
  color: #212121;
  background-color: #E0E0E0;
}

a {
  color: #039BE5;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a:hover, a:focus {
  color: #01579B;
  text-decoration: underline;
}

.article {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

.article__title {
  font-size: 34px;
  font-weight: 700;
}

.article__lead {
  font-size: 22px;
  margin-bottom: 2rem;
}

.article__image-wrapper {
  margin-bottom: 2rem;
}

.article__image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.article__content {
  font-size: 18px;
  line-height: 1.4;
}

.button-to-change-theme {
  position: fixed;
  top: 30%;
  left: 0;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  padding: 10px 20px;
  text-transform: uppercase;
  color: #EEEEEE;
  background-color: #455A64;
  border: none;
  border-radius: 2px;
  opacity: 0.7;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.button-to-change-theme:hover {
  opacity: 1;
}

Стиль темы:

Скрытый текст


.t-dark {
  color: #FAFAFA;
  background-color: #455A64;
}
.t-dark a {
  color: #FFE0B2;
}
.t-dark a:hover, .t-dark a:focus {
  color: #FFE082;
}
.t-dark .article__image-wrapper {
  -webkit-filter: grayscale(50%) brightness(60%);
          filter: grayscale(50%) brightness(60%);
  -webkit-transition: -webkit-filter 0.5s;
  transition: -webkit-filter 0.5s;
  transition: filter 0.5s;
  transition: filter 0.5s, -webkit-filter 0.5s;
}
.t-dark .article__image-wrapper:hover {
  -webkit-filter: none;
          filter: none;
}
.t-dark .button-to-change-theme {
  background-color: #E0E0E0;
  color: #212121;
}

Andrey 123 · July 20, 2018

Просто меняйте значение атрибута src в link. Или добавляйте новый link после текущего и при нажатие кнопки меняйте их местами

Edited July 20, 2018 by Andrey 123

Sign In

Переключатель между css

Recommended Posts

Bruno_Creed

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Bruno_Creed

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

mrnobody

Link to comment

Share on other sites

Andrey 123

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information