点燃 Angular 的浅色/深色主题的设置方法

2 年 ago
宇, 华
1 minute
    • 2018/12/23(Sun) 時点の情報に基づいています

 

    igniteui-angular@7.1.1

在Angular中，Ignite UI有一个非常灵活的主题机制。它尽可能地遵循Material Design。详细信息在这里列出，但很多内容需要阅读和理解。

我想向大家介绍一种更简单的主题设置方法。

前提

要使用 Ignite UI for Angular 的主题机制，需要设置 Sass (SCSS) 可用。

我找到了一篇非常有参考价值的文章。请参考“在Angular6中启用scss的方法”，并启用SCSS。

主题和调色板的概述

在Angular的Ignite UI中，有两个主要概念，即Palette（调色板）和Theme（主题）（虽然还有一个Schema（架构）的概念，但我将不考虑它）。了解这两个概念可以使实现变得更加容易。

パレット: 絵の具のパレットのことだと考えてください。こちらにあるように、基本カラー、サポートカラー、を含む色の Sass(SCSS) の map として提供されています。

テーマ: 絵の具を塗るためのキャンバスだと考えてください。Sass(SCSS) の mixin として提供されています。

换句话说，只需要选择一些颜料（调色盘），把它们涂在画布上（主题），就能绘画出作品（组装成绩）。

内置的主题和调色板

パレット

$default-palette: アクセントカラーがピンクのパレット

$green-palette: アクセントカラーがグリーンのパレット(それ以外は $default-palette と変わりなし)

テーマ

igx-light-theme(): ライトテーマ（ホワイトボードのようなもの）

igx-dark-theme(): ダークテーマ（黒板のようなもの）

使用上述的2个托盘 x 2个主题，可以制作出4个变化款式。

浅粉色

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

@include igx-core();
@include igx-light-theme($default-palette);
image.png

浅绿色

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

@include igx-core();
@include igx-light-theme($green-palette);
image.png

深粉色 sè)

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

@include igx-core();
@include igx-dark-theme($default-palette);
image.png

深绿色 lǜ sè)

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

@include igx-core();
@include igx-dark-theme($green-palette);
image.png

个性化调色盘

使用Sass函数igx-palette，您可以创建自定义的调色板。参数如下所示。您至少需要指定$primary和$secondary这两个参数。换句话说，只要确定了两种颜色，它会帮您处理剩下的事情。

変数デフォルト値$primaryなし。指定必須。$secondaryなし。指定必須。$info#1377d5$success#4eb862$warn#fbb13c$error#ff134a$grays#000

如果想要将网站的颜色设定与 Material Design 网站中的The color system相同，可以按照以下方式进行实施。

@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);
image.png

总结

    • ビルトインパレットが用意されているので、ひとまずはそちらを使ってもよいです。

 

    • 自分の好きな色合いを指定したい場合は igx-palette を使ってカスタムパレットを作ることができます。

$primary、 $secondaryを決めるだけでもそれっぽくなります。

テーマは、ライトテーマ、ダークテーマから選ぶことができます。

最近，macOS Mojave 推出了暗色模式，引起了很大的话题讨论。而在有机EL时代，例如在 Google 呼吁开发者积极采用“暗色模式” 的文章中，也有介绍暗色模式，可以说暗色模式越来越受到关注和关注。

我认为像macOS的Excel实施了深色模式等，这些只是趋势，而不仅仅结束于此的可能性是相当高的。

在网络应用中，切换亮色主题/暗色主题的功能可能会被视为理所当然的要求。

请务必利用Ignite UI for Angular提供的主题功能，如前所述，您可以轻松地创建亮色主题或暗色主题。

这次只能在确定了亮色主题/暗色主题的情况下才能运行该应用程序。下次我想介绍一种动态切换主题的方法。敬请期待。

如果您对Angular的Ignite UI感兴趣，请点击此处。

请在演示网站上尝试多种样本，并多做尝试！
https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid_virtualization.html

✖
广告
将在 10 秒后关闭
bannerAds