Рубрики
Без рубрики

Как создавать темы для ваших угловых 7 приложений с использованием переменных CSS

В этом посте мы создадим супер простое приложение для списка криптовалютов, используя угловые 7 и CSS переменные. Таблица содержимогоDesignProject SetupCodeconClusion, Repo и дальнейшее чтение Что Мы стремимся Fordesignfeel Free, чтобы пропустить этот раздел, если вы здесь только для кода. Я разработал это простое приложение, используя figma.

В этом посте мы создадим супер простое приложение для списка криптовалютов, используя угловые 7 и CSS переменные.

Оглавление

  • Дизайн
  • Настройка проекта
  • Код
  • ЗАКЛЮЧЕНИЕ, РЕПО И Дальнейшее чтение

Дизайн

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

Я разработал это простое приложение, используя Figma Отказ

Цветовая схема

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

Для наших световых/темных тем переднего плана и фона цвета просто поменяют.

Компоненты

Далее – создать компоненты. Поскольку наше приложение довольно мало, у нас есть только пара компонентов.

NAV Компонент, который позволит нашему пользователю переключить тему.

плитка Компонент, который будет отображать информацию о монете.

Сделайте все это вместе, мы получаем наши целевые проекты.

Настройка проекта

Мы собираемся подкрепить наше приложение, используя угловые CLI. Во-первых, нам нужно установить его.

npm install -g @angular/cli

Затем создайте наше приложение.

ng new project-crypto

И, наконец, генерируют модуль для удержания нашей тематической логики.

cd project-crypto 
ng generate module theme

Код

Хорошо, время для хороших вещей.

Определите переменные CSS

Давайте начнем с определения исходных переменных CSS. Мы можем изначально установить их, чтобы отразить нашу световую тему. Поскольку мы хотим, чтобы наша тема была глобальной, я определил его, используя : root селектор, который будет соответствовать HTML элемент. Вы могли бы использовать Тело Или какой-то другой высокоуровневый элемент здесь, если вы хотите.

@import url("https://fonts.googleapis.com/css?family=PT+Sans:400,700");
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");

:root {
  /* Colors */
  --foreground-default: #08090a;
  --foreground-secondary: #41474d;
  --foreground-tertiary: #797c80;
  --foreground-quaternary: #f4faff;
  --foreground-light: #41474d;

  --background-default: #f4faff;
  --background-secondary: #a3b9cc;
  --background-tertiary: #5c7d99;
  --background-light: #ffffff;

  --primary-default: #5dfdcb;
  --primary-dark: #24b286;
  --primary-light: #b2ffe7;

  --error-default: #ef3e36;
  --error-dark: #800600;
  --error-light: #ffcecc;

  /* Shadows */
  --background-tertiary-shadow: 0 1px 3px 0 rgba(92, 125, 153, 0.5);
}

body {
  background: var(--background-default);
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "PT Sans", sans-serif;
}

Определите темы

Далее давайте определим наши темы в Typescript. Позже они будут использоваться для переключения темы угловой службой.

Под нашими недавно созданными Тема Модуль, создать новый файл: тема

export interface Theme {
  name: string;
  properties: any;
}

export const light: Theme = {
  name: "light",
  properties: {
    "--foreground-default": "#08090A",
    "--foreground-secondary": "#41474D",
    "--foreground-tertiary": "#797C80",
    "--foreground-quaternary": "#F4FAFF",
    "--foreground-light": "#41474D",

    "--background-default": "#F4FAFF",
    "--background-secondary": "#A3B9CC",
    "--background-tertiary": "#5C7D99",
    "--background-light": "#FFFFFF",

    "--primary-default": "#5DFDCB",
    "--primary-dark": "#24B286",
    "--primary-light": "#B2FFE7",

    "--error-default": "#EF3E36",
    "--error-dark": "#800600",
    "--error-light": "#FFCECC",

    "--background-tertiary-shadow": "0 1px 3px 0 rgba(92, 125, 153, 0.5)"
  }
};

export const dark: Theme = {
  name: "dark",
  properties: {
    "--foreground-default": "#5C7D99",
    "--foreground-secondary": "#A3B9CC",
    "--foreground-tertiary": "#F4FAFF",
    "--foreground-quaternary": "#E5E5E5",
    "--foreground-light": "#FFFFFF",

    "--background-default": "#797C80",
    "--background-secondary": "#41474D",
    "--background-tertiary": "#08090A",
    "--background-light": "#41474D",

    "--primary-default": "#5DFDCB",
    "--primary-dark": "#24B286",
    "--primary-light": "#B2FFE7",

    "--error-default": "#EF3E36",
    "--error-dark": "#800600",
    "--error-light": "#FFCECC",

    "--background-tertiary-shadow": "0 1px 3px 0 rgba(8, 9, 10, 0.5)"
  }
};

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

Создать тему службы

Наш сервис будет отвечать за: Отслеживание активной темы и Обновление переменных CSS на основе активной темы.

Мы можем использовать CLI для создания нашей новой услуги. Под /src/app/theme запустить

ng generate service theme
import { Injectable } from "@angular/core";
import { Theme, light, dark } from "./theme";

@Injectable({
  providedIn: "root"
})
export class ThemeService {
  private active: Theme = light;
  private availableThemes: Theme[] = [light, dark];

  getAvailableThemes(): Theme[] {
    return this.availableThemes;
  }

  getActiveTheme(): Theme {
    return this.active;
  }

  isDarkTheme(): boolean {
    return this.active.name === dark.name;
  }

  setDarkTheme(): void {
    this.setActiveTheme(dark);
  }

  setLightTheme(): void {
    this.setActiveTheme(light);
  }

  setActiveTheme(theme: Theme): void {
    this.active = theme;

    Object.keys(this.active.properties).forEach(property => {
      document.documentElement.style.setProperty(
        property,
        this.active.properties[property]
      );
    });
  }
}

Некоторые вещи, чтобы отметить здесь:

  1. Мы импортируем наши определения темы, которые мы только что создали, на линии 2.
  2. Линии 34-39 Обновить наши переменные CSS, определенные в теме. Это, по сути, где происходит магия.
  3. Поскольку в этом примере приложение у нас есть только две темы, я добавил некоторые удобные функции для установки темы на свет и темному напрямую. Вы можете использовать getavailablethemes. а также Setactiveheme Функции, чтобы изменить тему динамически на основе ввода пользователя.

Компоненты

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

Начнем с NAV составная часть. Опять же, мы можем использовать угловую CLI, чтобы дать нам начало головы.

ng generate component nav
import { Component, OnInit } from "@angular/core";
import {
  faLightbulb as faSolidLightbulb,
  faDollarSign,
  IconDefinition
} from "@fortawesome/free-solid-svg-icons";
import { faLightbulb as faRegularLightbulb } from "@fortawesome/free-regular-svg-icons";
import { ThemeService } from "src/app/theme/theme.service";

@Component({
  selector: "app-nav",
  templateUrl: "./nav.component.html",
  styleUrls: ["./nav.component.css"]
})
export class NavComponent implements OnInit {
  faLightbulb: IconDefinition;
  faDollarSign = faDollarSign;

  constructor(
    private themeService: ThemeService
  ) {}

  ngOnInit() {
    this.setLightbulb();
  }

  setLightbulb() {
    if (this.themeService.isDarkTheme()) {
      this.faLightbulb = faRegularLightbulb;
    } else {
      this.faLightbulb = faSolidLightbulb;
    }
  }

  toggleTheme() {
    if (this.themeService.isDarkTheme()) {
      this.themeService.setLightTheme();
    } else {
      this.themeService.setDarkTheme();
    }

    this.setLightbulb();
  }
}

Примечание: Я использовал шрифт потрясающий для значков на панели NAV. Если вы хотите сделать то же самое, вам нужно Установить шрифт потрясающий для угловых Отказ

Логика для нашего NAV компонента довольно прямая. Мы установили нашу икону в зависимости от темы по инициализации (линия 22). Затем мы настроили обработчик событий, чтобы переключить тему. Вы можете увидеть его использование в HTML ниже.

nav {
  height: 4rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--background-tertiary);
  color: var(--foreground-quaternary);
  font-size: 1rem;
}

nav .title {
  margin-left: auto;
  margin-right: auto;
}

Примечания на NAV Component CSS:

  1. Строка 7, а 8 здесь важные. Это две строки, которые используют наши ранее определенные переменные CSS и составляют этот компонент.

Далее плитка составная часть.


  
{{ name }}

  

    
    {{ price | number }}
  

  

.container {
  display: grid;
  grid-template-columns: 0.5fr 1fr 0.5fr;
  align-items: center;
  border-radius: 0.5rem;
  background: var(--background-light);
  color: var(--foreground-tertiary);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-bottom: 1rem;
  min-height: 8rem;
  box-shadow: var(--background-tertiary-shadow);
}

.container .name {
  justify-self: start;
}

.container .price {
  justify-self: center;
}

.container .icon {
  justify-self: end;
}

.favouriteIcon {
  font-size: 1.5rem;
}

.isFavourite {
  color: var(--primary-default);
}

Примечания:

  1. TypeScript для нашего плитка не имеет никакой тематической логики, поэтому я его опустил здесь.
  2. Линии 6, 7, 12 и 32 – это то, что позволяет наш компонент плитки быть тематическим.

ЗАКЛЮЧЕНИЕ, РЕПО И Дальнейшее чтение

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

Вы можете найти репо здесь Отказ

Узнайте больше о переменных CSS здесь Отказ

Спасибо за прочтение!

Оригинал: “https://www.freecodecamp.org/news/how-to-create-themes-for-your-angular-7-apps-using-css-variables-69251690e9c5/”

Читайте ещё по теме: