dojo 龙形主标识

使用主题

可以通过包含主题的 JavaScript 和 CSS 文件，在自定义元素中使用主题。

<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
	<meta charset="utf-8">
    <title>Using Custom Elements</title>
    <link rel="stylesheet" href="./output/dist/hero-1.0.0.css">
    <link rel="stylesheet" href"./output/theme/my-theme.css">
</head>
<body>
    <ref-hero image="hero.jpg" title="Make Custom Elements the Easy Way!"></ref-hero>
    <script async src="./output/dist/hero-1.0.0.js"></script>
    <script async src="./output/theme/my-theme.js"></script>
</body>
</html>

切换变体

单个主题可以有多个变体。例如，Dojo 主题有“浅色”和“深色”变体。全局 dojoce 变量允许您在运行时更改主题。

dojoce.variant = 'dark';

自定义元素将重新渲染并立即反映新选择的变体。

切换主题

应用程序可以同时加载多个主题，并在运行时在它们之间切换。要加载多个主题，请加载每个主题的样式表和脚本。

	<link rel="stylesheet" href="./output/theme/dojo/dojo-7.0.0-pre.css" />
	<link rel="stylesheet" href="./output/theme/material/material-7.0.0-pre.css" />
	<script src="./output/theme/dojo/dojo-7.0.0-pre.js"></script>
	<script src="./output/theme/material/material-7.0.0-pre.js"></script>

请注意，最后加载的主题将是“当前”主题。

在运行时，可以通过设置全局 dojoce 变量的 theme 属性来切换主题。

dojoce.theme = 'material';

自定义元素将重新渲染并立即反映新选择的主题。