updated at 2018-12-23



WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior JavaScript developers.

theme angular Infragistics igniteUI dark-mode

Based on the information as of December 23, 2018 (Sun)
igniteui-angular@7.1.1

Ignite UI for Angular has a very flexible theme mechanism. I try to conform to Material Design as much as possible. Details are listed here, but it is quite difficult to read and read.

Here, I would like to introduce a method of setting a theme more easily.

Precondition

In order to use the mechanism of Ignite UI for Angular's theme, Sass(SCSS)it is necessary to be set up so that it can be used.

I found a very helpful article. Activate SCSS with reference to the method of enabling scss in Angular 6 .

Overview of themes and palettes

Ignite UI for Angular has two main concepts of palette and theme (actually there is another schema, but we omit it), understanding this makes implementation easier.

Palette : Think of it as a palette of paint. As here, it is Sass(SCSS) の mapprovided as a color including basic color, support color .
Theme : Please think that it is a canvas for painting paint. Sass(SCSS) の mixinIt is provided as.

In other words, you can select a few paints (palettes) and put them on a canvas (theme), so you can draw a picture (taping the components).

Built-in theme and palette

palette

$ default-palette : palette with accent color pink
$ green-palette : A palette with a green accent color (otherwise the same as $ default-palette)

theme

igx-light-theme () : Light theme (like a whiteboard)
igx-dark-theme () : Dark theme (like a blackboard)

Using the 2 palette x 2 theme above, you can create 4 variations.

light-pink

styles.scss

@import "~ igniteui-angular / lib / core / styles / themes / index" ;

@include igx-core ();

@include igx-light-theme ( $ default-palette );

demo

light-green

styles.scss

@import "~ igniteui-angular / lib / core / styles / themes / index" ;

@include igx-core ();

@include igx-light-theme ( $ green-palette );

demo

dark-pink

styles.scss

@import "~ igniteui-angular / lib / core / styles / themes / index" ;

@include igx-core ();

@include igx-dark-theme ( $ default-palette );

demo

dark-green

styles.scss

@import "~ igniteui-angular / lib / core / styles / themes / index" ;

@include igx-core ();

@include igx-dark-theme ( $ green-palette );

demo

Custom palette

You can create your own palette using the Sass function called igx - palette . The arguments are as follows. At minimum $primary, $secondaryyou need to specify two. Conversely, if you decide only two colors, the rest will do the rest.

variable	Default value
$ primary	None. Designation required.
$ secondary	None. Designation required.
$ info	# 1377 d 5
$ success	# 4eb 862
$ warn	# fbb13c
$ error	# ff 134a
$ grays	# 000

For example, if you want to have the same color as The color system on the Material Design site , implement as follows.

style.scss

@import "~ igniteui-angular / lib / core / styles / themes / index" ;

Custom-Palette $ : Igx-Palette (

$ Primary : # 6002Ee ,

$ Secondary : # 03Dac6

// $ Info :

// $ Success :

// $ Warn :

// $ Error :

// $ Grays :

);

@include igx-core ();

@include igx-light-theme ( $ custom-palette );

demo

Summary

As built-in pallets are prepared, you can use that for the moment.
If you want to specify your favorite hue, you igx-palettecan create custom palette using.

$primary, $secondaryIt Ppoku will just decide.

The theme can be selected from light theme, dark theme.

Somewhat ago, it became a topic that the dark mode was adopted by macOS Mojave . Also in the organic EL era, "dark mode" should be adopted aggressively - dark mode has been introduced in articles such as calling developers to Google , I think that dark mode has come into the spotlight.

I am thinking that there is a high possibility that mere trend alone will not end, such as dark mode being implemented in Excel of macOS.

Even with the Web application, the light theme / dark theme switching function may be required as usual.

As we have seen, using the theme mechanism of Ignite UI for Angular makes it very easy to create light theme / dark theme, so please take advantage!

In this time I was able to run the application only in the fixed state of either light theme / dark theme. Next time I would like to introduce a method of dynamically switching themes. Please do not hesitate to ask.