element深色系资源_elementui深色主题,element深色主题资源-CSDN文库

共4个文件

ttf：1个

css：1个

woff：1个

5星 · 超过95%的资源需积分: 5 44 浏览量 2022-08-01 17:34:20 上传评论 1 收藏 124KB ZIP 举报

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 项目中实现动态换肤功能。这不仅丰富了应用的视觉表现，也满足了不同用户的个性化需求。

资源详情

资源评论

资源推荐

收起资源包目录

dark.zip （4个子文件）

dark

fonts

element-icons.ttf 55KB

element-icons.woff 28KB

config.json 506B

index.css 652KB

@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