标签：src 开发工具 主题 应用程序 themes DevExtreme base metadata
配置主题
切换主题
DevExtreme Angular模板为视图内容使用一个主主题，为导航菜单使用一个附加主题（色板）。 要切换到另一个主题，请打开 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 文件并为 baseTheme 字段指定一个主题名称：
metadata.base.json
{
// ...
"baseTheme": "material.blue.light",
// ...
}
运行以下命令来重建主题：
npm run build-themes
创建自定义主题
您可以使用DevExtreme ThemeBuilder 基于预定义的主题创建自定义主题，请按照以下步骤操作：
1. 将 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 导入到 ThemeBuilder。
2. 自定义主题。
3. 将主题元数据导出到初始文件。
运行以下命令来重建主题：
npm run build-themes
应用一个颜色色板
颜色色板是与主要配色方案一起使用的辅助配色方案。
在 DevExtreme Angular 模板中，颜色样本应用于导航菜单并在 src\themes\metadata.additional.json 文件中配置。 要将这个颜色样本应用到一个元素，添加 dx-swatch-additional 类到这个元素：
HTML
<div class="dx-swatch-additional"> <!-- Your content here --> </div>
主题变量在 src\themes\generated\variables.base.scss 和 src\themes\generated\variables.additional.scss 文件中定义，将它们应用于自定义元素，以便元素与应用程序的其余部分具有统一的外观。
以下代码应用$base-accent变量作为my-element的背景颜色：
SCSS
// Your SCSS file
@import "../../../themes/generated/variables.base.scss";
#my-element {
background-color: $base-accent;
}
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress技术交流群4：715863792 欢迎一起进群讨论
更多DevExpress线上公开课、中文教程资讯请上中文网获取
标签：src,开发工具,主题,应用程序,themes,DevExtreme,base,metadata 来源： https://www.cnblogs.com/AABBbaby/p/15236843.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。