March 25, 2025

Продолжение работы с оптимизацией и стилями

Всем привет ^^
Я снова сбил график сна и работал ночью.

Продолжая работать над системой оформления сайта, я ввел систему палитр.

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

Сегодня я добавил новый цвет Цинк, это серый, но немного более синий.

Теперь код блоков выглядит примерно так:

/**
 * Пример, демонстрирующий установку
 * фона блоку новостей для светлой и
 * темной темы
 */
.news {
  /**
   * useColor — выбор цвета из палитры
   * Число — уровень затемнения
   */
  background: useColor('zinc', 0);

  @include dark {
    /**
     * Поддержка прозрачности
     * (третьим параметром)
     */
    background: useColor('zinc', 800, 0.75);
  }
}

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

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

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

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

Сейчас я иду спать (уже 3 часа ночи), а после работы завтра продолжу.

Всем хороших снов >^^<

  • #optimization
  • #performance
  • #styles
  • #update