@charset "UTF-8";
.dark .fade-in-linear-enter-active,
.dark .fade-in-linear-leave-active {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.dark .fade-in-linear-enter,
.dark .fade-in-linear-leave,
.dark .fade-in-linear-leave-active {
opacity: 0;
}
.dark .el-fade-in-linear-enter-active,
.dark .el-fade-in-linear-leave-active {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.dark .el-fade-in-linear-enter,
.dark .el-fade-in-linear-leave,
.dark .el-fade-in-linear-leave-active {
opacity: 0;
}
.dark .el-fade-in-enter-active,
.dark .el-fade-in-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.dark .el-fade-in-enter,
.dark .el-fade-in-leave-active {
opacity: 0;
}
.dark .el-zoom-in-center-enter-active,
.dark .el-zoom-in-center-leave-active {
-webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.dark .el-zoom-in-center-enter,
.dark .el-zoom-in-center-leave-active {
opacity: 0;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.dark .el-zoom-in-top-enter-active,
.dark .el-zoom-in-top-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center top;
transform-origin: center top;
}
.dark .el-zoom-in-top-enter,
.dark .el-zoom-in-top-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.dark .el-zoom-in-bottom-enter-active,
.dark .el-zoom-in-bottom-leave-active {
opacity: 1;
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.dark .el-zoom-in-bottom-enter,
.dark .el-zoom-in-bottom-leave-active {
opacity: 0;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.dark .el-zoom-in-left-enter-active,
.dark .el-zoom-in-left-leave-active {
opacity: 1;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-transform-origin: top left;
transform-origin: top left;
}
.dark .el-zoom-in-left-enter,
.dark .el-zoom-in-left-leave-active {
opacity: 0;
-webkit-transform: scale(0.45, 0.45);
transform: scale(0.45, 0.45);
}
.dark .collapse-transition {
-webkit-transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}
.dark .horizontal-collapse-transition {
-webkit-transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}
.dark .el-list-enter-active,
.dark .el-list-leave-active {
-webkit-transition: all 1s;
transition: all 1s;
}
.dark .el-list-enter,
.dark .el-list-leave-active {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
.dark .el-opacity-transition {
-webkit-transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
@font-face {
font-family: element-icons;
src: url(fonts/element-icons.woff) format("woff"), url(fonts/element-icons.ttf) format("truetype");
font-weight: 400;
font-display: auto;
font-style: normal;
}
.dark [class*=" el-icon-"],
.dark [class^="el-icon-"] {
font-family: element-icons !important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.dark .el-icon-ice-cream-round:before {
content: "\e6a0";
}
.dark .el-icon-ice-cream-square:before {
content: "\e6a3";
}
.dark .el-icon-lollipop:before {
content: "\e6a4";
}
.dark .el-icon-potato-strips:before {
content: "\e6a5";
}
.dark .el-icon-milk-tea:before {
content: "\e6a6";
}
.dark .el-icon-ice-drink:before {
content: "\e6a7";
}
.dark .el-icon-ice-tea:before {
content: "\e6a9";
}
.dark .el-icon-coffee:before {
content: "\e6aa";
}
.dark .el-icon-orange:before {
content: "\e6ab";
}
.dark .el-icon-pear:before {
content: "\e6ac";
}
.dark .el-icon-apple:before {
content: "\e6ad";
}
.dark .el-icon-cherry:before {
content: "\e6ae";
}
.dark .el-icon-watermelon:before {
content: "\e6af";
}
.dark .el-icon-grape:before {
content: "\e6b0";
}
.dark .el-icon-refrigerator:before {
content: "\e6b1";
}
.dark .el-icon-goblet-square-full:before {
content: "\e6b2";
}
.dark .el-icon-goblet-square:before {
content: "\e6b3";
}
.dark .el-icon-goblet-full:before {
content: "\e6b4";
}
.dark .el-icon-goblet:before {
content: "\e6b5";
}
.dark .el-icon-cold-drink:before {
content: "\e6b6";
}
.dark .el-icon-coffee-cup:before {
content: "\e6b8";
}
.dark .el-icon-water-cup:before {
content: "\e6b9";
}
.dark .el-icon-hot-water:before {
content: "\e6ba";
}
.dark .el-icon-ice-cream:before {
content: "\e6bb";
}
.dark .el-icon-dessert:before {
content: "\e6bc";
}
.dark .el-icon-sugar:before {
content: "\e6bd";
}
.dark .el-icon-tableware:before {
content: "\e6be";
}
.dark .el-icon-burger:before {
content: "\e6bf";
}
.dark .el-icon-knife-fork:before {
content: "\e6c1";
}
.dark .el-icon-fork-spoon:before {
content: "\e6c2";
}
.dark .el-icon-chicken:before {
content: "\e6c3";
}
.dark .el-icon-food:before {
content: "\e6c4";
}
.dark .el-icon-dish-1:before {
content: "\e6c5";
}
.dark .el-icon-dish:before {
content: "\e6c6";
}
.dark .el-icon-moon-night:before {
content: "\e6ee";
}
.dark .el-icon-moon:before {
content: "\e6f0";
}
.dark .el-icon-cloudy-and-sunny:before {
content: "\e6f1";
}
.dark .el-icon-partly-cloudy:before {
content: "\e6f2";
}
.dark .el-icon-cloudy:before {
content: "\e6f3";
}
.dark .el-icon-sunny:before {
content: "\e6f6";
}
.dark .el-icon-sunset:before {
content: "\e6f7";
}
.dark .el-icon-sunrise-1:before {
content: "\e6f8";
}
.dark .el-icon-sunrise:before {
content: "\e6f9";
}
.dark .el-icon-heavy-rain:before {
content: "\e6fa";
}
.dark .el-icon-lightning:befo
element深色系资源



Element UI 是一款基于 Vue.js 的开源 UI 组件库,它提供了丰富的界面元素和设计模式,用于构建美观且响应式的 Web 应用。深色系主题是 Element UI 提供的一种视觉风格,适合在低光照环境下或者对视力保护有需求的场景下使用。本资源集包含了配置和实现 Element 深色系主题的相关文件。 在 Element 官网上,你可以找到一个名为“主题定制”的功能。通过这个功能,你可以上传一个配置文件 `config.json`,该文件定义了颜色、字体等视觉元素的自定义设置。在提供的 `dark` 文件中,可能就包含了一个预设的深色系配置示例,例如: ```json { "var": { "--color-primary": "#3399ff", "-- ``` 此处的 `--color-primary` 变量就是 Element UI 中主要颜色的自定义变量,你可以将其设置为深色调,如深蓝色或深紫色,以达到深色主题的效果。 将 `config.json` 文件上传到主题定制工具后,系统会自动生成对应的 CSS 样式文件,你可以下载这些样式文件并将其引入到你的 Vue 项目中。这样,Element UI 的所有组件都将应用新的深色主题。 在实际项目中实现动态换肤,你可以采取以下步骤: 1. **创建主题配置文件**:根据需求创建不同主题的 `config.json` 文件,如 `dark-config.json` 和 `light-config.json`。 2. **生成主题样式**:使用 Element UI 的主题定制工具,上传配置文件生成相应的 CSS 样式文件。 3. **引入主题样式**:将生成的 CSS 文件引入到项目中,并在 Vue 的全局设置或单个组件中使用 `require.context` 或 `import` 动态加载。 4. **实现切换功能**:在 Vue 中添加一个切换主题的按钮,监听其点击事件,根据用户选择动态切换 CSS 文件。 例如,在 Vue 中你可以这样实现: ```javascript <template> <button @click="toggleTheme">切换主题</button> </template> <script> export default { data() { return { currentTheme: 'dark', }; }, methods: { toggleTheme() { this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark'; // 根据当前主题动态改变 CSS 的引入 const themeLink = document.getElementById('theme-link'); if (themeLink) { themeLink.href = `./themes/${this.currentTheme}.css`; } }, }, mounted() { // 初始加载对应主题的 CSS const themeLink = document.createElement('link'); themeLink.id = 'theme-link'; themeLink.href = `./themes/${this.currentTheme}.css`; themeLink.rel = 'stylesheet'; document.head.appendChild(themeLink); }, }; </script> ``` 通过这种方式,用户可以根据自己的喜好在深色和浅色主题之间自由切换,提升用户体验。 Element UI 的深色系资源提供了方便的方式来定制和应用深色主题。通过配置 `config.json` 文件,你可以轻松地创建出符合项目需求的深色风格,并在 Vue 项目中实现动态换肤功能。这不仅丰富了应用的视觉表现,也满足了不同用户的个性化需求。







- 1



















- 粉丝: 7363
- 资源: 2
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助



最新资源
- my_notepad-电子硬件课程设计资源
- Computer System Class Project 2024-计算机课程设计资源
- 2025年c语言代码-蓝桥杯资源
- L2_ebook-CCF-GESP资源
- soui3-github使用教程
- Visualization-of-student-performance-data-python数据分析与可视化
- resnet152.tv_in1k-resnet
- 软件测试2102班-软件测试资源
- ChatGPT-MP-deepseek
- CANNDY-numpy
- Unet_ModelBuild-unet
- Unity学习-unity
- nginxWebUI-docker
- jenkins-jenkins
- deepseek4j-deepseek
- cnetwork-qt



评论10