איך לשנות ערכת נושא (Theme) – dark/light mode

ניצור מנגנון מעבר בין צבעים בהירים וכהים, ניתן להכין ערכות נושא ללא הגבלה. את הקוד נבצע באנגולר אבל ניתן לעשות אותו כמעט אותו דבר גם ב-JS נקי ללא קשר לאנגולר.

נכיר את הרעיון של css variables ואיך להשתמש בהם.

משתנים ב-CSS נרשמים בצורה הבאה:

• יצירה של משתנה – מינוס מינוס מלל כלשהו ללא רווחים –my-color.
• קריאה של משתנה – הכרזה על משתנה ובסוגריים שם המשתנה var(–my-color).

נראה דוגמה כולל שירות שיבצע את המעבר בין ערכות הנושא.

השירות (service)

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  themeArr: ITheme[] = [light, dark];
  constructor() { }
  onChangeTheme(themeName: string) {
    const theme = this.themeArr.find(item => item.name === themeName);
    if (theme) {
      Object.keys(theme.props).forEach(prop => {
        document.documentElement.style.setProperty(prop, theme.props[prop]);
      });
    }
  }
}
interface ITheme {
  name: string,
  props: any
}
const light: ITheme = {
  name: 'light',
  props: {
    '--color': '#000000',
    '--bg': '#ededed',
    '--border-color': '#00dd00',
    '--shadow': '2px 2px 3px #d39320'
  }
}
const dark: ITheme = {
  name: 'dark',
  props: {
    '--color': '#ededed',
    '--bg': '#464646',
    '--border-color': '#dddd00',
    '--shadow': '2px 2px 3px #b948e9'
  }
}

רצוי וכדאי לבצע הפרדה לקבצים שונים את השירות, ערכת נושא בהירה וכהה למען הסדר, אבל כאן בדוגמה הכל ביחד כדי שהיה לנו יותר ברור.

שורה 18-21:

האינטרפייס שלנו, מאלץ שניתן שם לערכת נושא ואת המאפיינים שלה.

שורה 22-30:

ערכת נושא light עם הגדרות, שימו לב שההגדרות לא חייבות להיות צבעים אלא כל דבר שמקובל על CSS.

שורה 31-39:

ערכת נושא עבור dark, ניתן להכין כמה ערכות נושא שרוצים ולעבור בינהם.

שורה 7:

מערך שמאוכלס בערכות הנושא שיצרנו.

שורה 9:

פונקציה להחלפה בין ערכות נושא, שמקבלת את שם הערכת נושא שרוצים לעבור אליה.

שורה 10:

חיפוש של ערכת הנושא על פי השם שלה.

11-14:

אם נמצאה ערכת הנושא, עוברים בלולאה מבוססת על מפתחות ומעדכנים את ה-root (HTML) ב-inline style במפתחות (prop) ובערך של כל מפתח (theme.props[prop]).

כך שכל פעם שערכת הנושא תשתנה, הערכים האלו ישוכתבו שוב ושוב.

זה בגדול כל מה שצריך כדי לעבור בין ערכות הנושא. נמשיך קצת ונפתח כדי שנראה את זה בפעולה.

נקים רכיב חדש בשם theme-page ונראה איך משתמשים בערכת נושא.

<div class="theme">
    <h1>HI, Change the theme by clicking on the buttons</h1>
    <button type="button" (click)="onThemeChange('light')">light</button>
    <button type="button" (click)="onThemeChange('dark')">dark</button>
</div>

import { Component, OnInit } from '@angular/core';
import { ThemeService } from 'src/app/services/theme.service';

@Component({
  selector: 'app-theme-page',
  templateUrl: './theme-page.component.html',
  styleUrls: ['./theme-page.component.scss']
})
export class ThemePageComponent implements OnInit {

  constructor(private themeService: ThemeService) { }

  ngOnInit(): void {
    this.themeService.onChangeTheme('light');
  }
  onThemeChange(themeName: string) {
    this.themeService.onChangeTheme(themeName);
  }
}

.theme {
    background-color: var(--bg);
    padding: 40px;
    h1 {
        color: var(--color);
        padding: 10px;
        margin-bottom: 20px;
    }
    button {
        background-color: transparent;
        box-shadow: var(--shadow);
        border: 1px groove var(--border-color);
        color: var(--color);
        padding: 5px 10px;
        margin: 10px 20px;
    }
}

כמו שניתן לראות, מדובר על רכיב מאוד פשוט, נעבור עליו בקצרה:

HTML:

כותרת (H1), 2 כפתורים – אחד לערכת נושא בהירה וכפתור שני לערכת נושא כהה.

TS:

משיכה של השירות לרכיב, ואתחול שלו לערכה בהירה כשהרכיב עולה (שורה 14).

פונקציה להחלפה בין ערכות הנושא (שורה 16-18).

SCSS:

כאן אנחנו יכולים לראות איך משתמשים במשתנים שיצרנו.

בשורה 2:

השתמשנו לקבוע את הרקע בצבע על פי משתנה BG

בשורה 5:

קבענו את צבע הטקסט על פי משתנה COLOR.

בשורה 11:

משכנו מספר ערכים כדי ליצור צל- צבע, התפשטות, מיקום על פי צור X ועל פי Y.

בשורה 12:

משכנו חלקית, קבענו שהגבול יהיה 1PX , מסוג GROOVE ורק את הצבע משכנו ממשתנה.

יכולנו להקים משתנה שיכלול את כל הערכים של הגבול וכך לא היינו צריכים לספק חלק מהערכים אלא יכלנו למשוך את כולם מהמשתנה.

זהו זה, פוסט קצר, קליל ופשוט 😁, זה הזמן לתת לאומנות להשטלת על האתר שלכם 🎨

פוסטים קשורים:

Angular Microfrontend Module Federation Tutorial – Part 5 Angular Microfrontend Module Federation Tutorial – Part 4 convert array of objects to formArray in angular reactive form מדריך הטמעה של SVG כחלק מקוד פרויקט באנגולר