Темные темы сейчас очень популярны, и этому есть причины. Первая причина (может и не прийти по этому порядку) — эстетика: это красиво. Во-вторых, очень полезно ночью, ваши глаза могут очень легко фокусироваться, не прилагая особых усилий. В-третьих, батарея! Верно! Срок службы батареи сохраняется, если ваш экран (планшет, мобильный или настольный компьютер) светодиодный. Черный цвет означает отключенные пиксели, что означает экономию заряда батареи.

Что ж, есть масса причин, по которым вам следует использовать светлые/темные темы. Mac OS уже есть, Windows 10, iOS собирается в следующем большом выпуске, iOS 13, YouTube, Visual Studio, Twitter и даже Medium имеют ночной режим, реализованный в iOS и Android.

В этом уроке я собираюсь написать свой подход к простой реализации светлой/темной темы, используя:

  • Дотнет Ядро
  • Аспнет МВК
  • SASS
  • Начальная загрузка 4
  • Глоток

Вы можете использовать разные инструменты, цель точно такая же. Здесь нет ничего нового, просто пошаговое руководство.

В Rezult IO мы используем нашу структуру папок wwwroot следующим образом:

— wwwрут

— — — ссс

- - - картинки

— — — js

— — — библиотеки

— — — ссс

Как вы можете догадаться, папки scss содержат все файлы SASS, libsвсе внешние библиотеки, js мои файлы javascript, изображения ну, изображения и, наконец, css, скомпилированные файлы css.

Давайте пока сосредоточимся на папке scss. Начинаем создавать три файла:

  • _variables.scss
  • приложение-light.scss
  • приложение-dark.scss

В файле _variables.scss мы можем настроить все наши обычные переменные и импорт.

Убедитесь, что вы разархивировали bootstrap 4 с помощью sass в папку libs.

А вот и самое интересное. Создание как светлой, так и темной темы. Начнем с темной темы.

Как видите, файловая структура довольно проста. Изначально у нас есть общие переменные, импортированные и определенные. Затем мы настраиваем собственные цвета и, наконец, импортируем библиотеку начальной загрузки.

Давайте посмотрим на светлую тему:

Довольно просто, правда? Теперь давайте встроим SASS в CSS и скомпилируем его с помощью gulp. Для этого также воспользуемся BuildBundlerMinifier, пакетом nuget, который сэкономит нам время.

Начнем с добавления нашего файла package.json. Вы можете сделать это вручную или использовать npm.

После добавления этого файла не забудьте установить эти пакеты с помощью npm install.

А теперь наш gulpfile.js:

Наконец, просто отсутствует BuildBundlerMinifier. Когда вы установите этот пакет, в вашем решении появится новый файл: bundleconfig.json.

Для этого урока нам нужно только это. Посетите вики проекта, чтобы узнать больше о javascript minify и uglify, которые этот инструмент делает довольно легко.

Теперь, если все прошло хорошо, в командной строке вы сможете собрать и скомпилировать свой scss в css:

Вы также можете использовать gulp из обозревателя задач Visual Studio, который можно найти в меню «Вид» -> «Другие Windows» -> «Проводник запуска задач»:

Теперь мы видим, что в нашей папке css есть файлы app-light.css и app-dark.css. Помимо этих двух файлов у нас также есть уменьшенная версия.

Как реализовать это с ядром asp net? Ну, есть несколько способов. Вы можете сохранить это в профиле пользователя, в базе данных или вам все равно на пользователей, и у вас есть файлы cookie для этого. В этом уроке мы собираемся использовать файлы cookie.

Одна простая стратегия для реализации этого — дать пользователю возможность выбрать светлую или темную тему в верхнем меню навигации. Выбор пользователя сгенерирует запрос HTTP Post и добавит файл cookie с выбранным значением. Мы добавим BaseController, который установит переменную ViewData с этим значением.

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

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

Как видите, это довольно прямолинейно. Вы можете расширить свое решение, добавив больше тем в соответствии с цветами или идеями вашего проекта.