Element-Plus——暗黑主题设置

已于 2023-06-15 11:18:31 修改
阅读量2.7k 收藏 3
点赞数 2
分类专栏： Vue3 element-ui 文章标签： vue.js elementui javascript
于 2023-06-15 10:55:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nanchen_J/article/details/131223306
版权
文章介绍了如何在Vue项目中引入并应用暗黑主题。通过在main.js中导入css样式，自定义dark/css-vars.css文件配置主题颜色，然后使用vueuse库的useDark和useToggle功能，实现页面中切换按钮控制暗黑模式，并将用户选择存储在浏览器中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在main.js中引入暗黑主题样式

import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/styles/dark/css-vars.css'

在src路径下新建style/dark/css-vars.css文件
这里的样式可自定义配置主题颜色

html.dark {
    /* 自定义深色背景颜色 */
    /* --el-bg-color: #fff; */
    /* --el-color-primary: #fff */
    --el-menu-active-color:#fff
}

.el-pagination.is-background .btn-next.is-active,
.el-pagination.is-background .btn-prev.is-active,
.el-pagination.is-background .el-pager li.is-active {
    --el-color-primary: #000
    --el-color-white:white
}

在页面中通过按钮进行切换

<el-text :style="{marginRight:'10px'}">主题颜色</el-text>
<el-switch inline-prompt :style="{marginRight:'10px'}" active-color="#000" active-text="暗黑主题" inactive-text="默认" v-model="theme" @click="toggle()"></el-switch>

将切换暗黑模式按钮的状态存储在浏览器中
引入包

import { useToggle } from "@vueuse/shared";
import { useDark } from "@vueuse/core";

/* start——暗黑模式 */
const theme = ref<boolean>(false);
const isDark = useDark({
  // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
  storageKey: "useDarkKEY",
  // 暗黑class名字
  valueDark: "dark",
  // 高亮class名字
  valueLight: "light",
});
console.log(isDark.value);
if (isDark.value == false) {
  theme.value = false;
} else {
  theme.value = true;
}
const toggle = useToggle(isDark);
/* End——暗黑模式 */
解读 DeepSeek 关键 RL 算法 GRPO
进一步有进一步的欢喜~
01-31 3803
在当下人工智能蓬勃发展的浪潮里，DeepSeek 无疑是一颗耀眼的明星，频繁出现在各类科技前沿讨论中，热度持续攀升。从惊艳的模型表现，到不断拓展的应用场景，DeepSeek 正以强劲之势重塑着行业格局。大家不难发现，无论是复杂的自然语言处理任务，还是充满挑战的智能推理难题，DeepSeek 都能展现出卓越的性能。而这斐然成绩的背后，其核心的 RL 算法 GRPO 功不可没
FlowReasoner：强化查询级元智能体
栖客
04-26 931
本文提出了一种名为FlowReasoner的查询级元智能体，用于自动化设计针对每个用户查询的多智能体系统。我们的核心思想是通过外部执行反馈激励基于推理的元智能体。具体来说，通过提炼DeepSeek R1，我们首先赋予FlowReasoner生成多智能体系统的初步推理能力。然后，我们进一步通过带有外部执行反馈的强化学习（RL）增强其能力。设计了一个多功能奖励函数，从性能、复杂性和效率等方面指导RL训练。通过这种方式，FLOWREASONER能够通过深思熟虑的推理为每个用户查询生成个性化的多智能体系统。
tensorflow 十四 强化学习Q-learning
lijil168的专栏
09-30 1989
一个最简单的例子： https://blog.youkuaiyun.com/u012465304/article/details/80905202 深度强化学习入门：用TensorFlow构建你的第一个游戏AI： https://blog.youkuaiyun.com/Uwr44UOuQcNsUQb60zk2/article/details/78556998 最简单例子代码： import numpy as ...
51c大模型~合集127
whaosoft~aiotの开发板商城
05-12 1251
在实际使用场景中，可能需要传输的数据量本身就不大，只是会偶发出现一些【大数据】传输的情况，因此我们没必要预留更大的shm空间，来应对这些只是偶发情况，这样会造成内存的浪费。（3）对于小数据(<=10MB)，vllm使用rpc_broadcast_mq和worker_response_mq来做数据传输，这两个队列的本质是ShmRingBuffer(环形共享缓存)，其中Shm即我们熟知的shared_memory，而ring是使用环形的方式往shm中读写数据（看不懂也没关系，我们马上来说细节）。
51c大模型~合集9
whaosoft~aiotの开发板商城
11-01 1498
在训练过程中，我们随机提取语义标记序列的前缀部分作为提示，以利用语言模型的上下文学习能力。接着，根据 “圆的周长” 知识点，通过圆心角的大小为 90 度和 Mary 走过的路径长度的条件，计算出圆形花坛的周长，并求得圆形花坛的半径。最后，根据 “圆的面积” 知识点，通过求得的半径的条件，计算出圆形花坛的面积，至此完成题目的求解。并且如下图所示，为了缓解模型在解决问题过程中固有的问题，我们参考教材与维基百科，启发式的引入了 67 个知识点的描述，从而为 LMMs 的推理过程提供必要的知识提示。
51c大模型~合集118
whaosoft~aiotの开发板商城
04-17 1044
我自己的原文哦~ https://blog.51cto.com/whaosoft/133613452W6000字综述大模型核心技术：本文2W6000字，10篇参考文献，内容涵盖了语言建模、预训练面临的挑战、量化技术、分布式训练方法，以及大语言模型的微调。此外，还讨论了参数高效微调（PEFT）技术，包括适配器、LoRA和QLoRA；介绍了提示策略、模型压缩方法（如剪枝和量化），以及各种量化技术（GPTQ、NF4、GGML）。最后，对用于减小模型大小的蒸馏和剪枝技术进行了讲解。有些内容是翻译自Huggin
51c大模型~合集121
whaosoft~aiotの开发板商城
04-25 976
以上结果说明 ICL 模型能够学习到预训练任务集上最优的学习算法，并且与传统的元学习器相比 ICL 模型具有更强的表达能力，因为它们不仅能够学习到已知的最优学习算法，还能够根据数据的分布特性表达出传统视野之外的学习算法，这使得 ICL 模型在处理多样化任务时具有显著优势。借助元学习领域成熟的理论基础与方法经验，理论证明了作为实现学习算法的模型，基于 transformer 的 ICL 模型与传统的元学习器相比具有更强的表达能力（图 1 右）。我们还对 ICL 模型学习到的算法的泛化性进行了实验研究。
51c大模型~合集102
whaosoft~aiotの开发板商城
01-07 822
最近，来自多伦多大学、Snap Inc. 和 UCLA 的研究团队推出了全新的模型 ——Wonderland，它能够从单张图像生成高质量、广范围的 3D 场景，在单视图 3D 场景生成领域取得了突破性进展。Wonderland 的主要特点在于其精确的视角控制、卓越的场景生成质量、生成的高效性和广泛的适用性。Camera-guided 视频生成模型可以精确地遵循轨迹的条件，生成 3D-geometry 一致的高质量视频，并具有很强的泛化性，可以遵循各种复杂的轨迹，并适用于各种风格的输入图片。
51c多模态~合集4
whaosoft~aiotの开发板商城
01-17 1218
在选购家具时，我们常常会试图回忆起自己的客厅，以想象某个心仪的柜子是否合适。然而，估算距离并不容易，但即便仅仅观察一次，人类也能在脑海中重构空间，回忆房间中的物体、它们的位置及尺寸。我们生活在一个感官丰富的三维世界中，周围充满视觉信号，这些信号为我们的感知、理解和互动提供了基础。视觉-空间智能包括感知和在脑海中操控空间关系，这需要多种能力的支持，例如关系推理以及在自我中心（egocentric）和他人中心（allocentric）视角之间的转换能力。
LSTM三个门控机制详解
最新发布
感谢所有乐于奉献的人，在此不一一具名
05-26 637
LSTM三个门控机制详解
Python----循环神经网络（LSTM：长短期记忆网络）
weixin_64110589的博客
05-23 1016
RNN在处理长序列时存在长期依赖问题，即随着序列增长，模型难以记住较早时刻的信息，导致梯度消失或爆炸。为解决这一问题，LSTM（长短期记忆网络）被提出，它通过引入门控机制（输入门、遗忘门、输出门）来选择性保留或丢弃信息，从而更好地捕捉长期依赖关系。LSTM的输入门决定新信息的保留程度，遗忘门控制旧信息的遗忘程度，细胞状态则通过选择性更新来存储记忆。虽然LSTM不能完全避免梯度消失或爆炸，但它通过门控机制显著改善了这一问题，使其在处理长序列时表现更优。
CNN手写数字识别/全套源码+注释可直接运行
2401_87092242的博客
05-21 842
可直接运行的cnn识别手写数字项目
深度学习之-目标检测算法汇总(超全面)
一个不怎么正经的算法工程师的博客~不定期更新一些我所覆盖领域的干货~~~包你满意噢~~
05-22 1838
概括了目前YOLO目标检测模型从YOLOv1到YOLOv12的演进，并介绍了多种改进方法。这些改进包括引入注意力机制、多尺度特征融合、模型轻量化、与其他新技术结合（如Mamba模型、扩散模型等），以及优化损失函数和训练策略。文章还探讨了YOLO在农业、医疗、交通等领域的应用，并展示了其在复杂场景中的检测性能提升。此外，文章介绍了基于Transformer和MLP的目标检测改进方法，以及如何将大模型（如SAM）应用于目标检测任务。这些改进不仅提高了检测精度，还增强了模型的实时性和适应性。
【深度学习】4. 参数初始化详解与数学推导: Xavier, He
weixin_48846514的博客
05-26 705
深度学习中的参数初始化详解与数学推导
学习深度学习是否要先学习机器学习？
2501_91695603的博客
05-17 1834
不管你后面是不是真的想要从事机器学习或者深度学习这方面，我都希望你能有时间去学习的时候，多多的了解一下 AI 技术 ，还是那句话，时间紧的情况下，怎么快速的为目标服务是最重要的，先学对自己有用自己需要的内容。就比如我给计算机一些动物的图片，然后告诉计算机哪个是老虎，哪个是狮子，计算机根据我给出的“图片和答案的特征”去学习“老虎为什么是老虎，狮子为什么是狮子”。这三部分看着挺唬人，其实只需要学习需要的内容，如果你的时间稍微宽裕一点，可以花一个半月左右的时间，如果时间紧，那就压在一个月以内一鼓作气的搞定。
深度学习中的卷积和反卷积
qq_32205577的博客
05-26 1728
f∗gn∑k−∞∞fkgn−kf∗gnk−∞∑∞​fkgn−k翻转平移：卷积核先水平/垂直翻转再进行滑动计算积分变换本质：表征函数f与g重叠部分的乘积积分滑动平均推广：当g为区间指示函数时，卷积即滑动平均数学理论深化：从离散卷积到群上卷积的泛化硬件协同优化：TensorCore对3×3卷积的特殊加速跨领域融合：在药物动力学IVIVC模型中的应用创新“卷积是特征提取的基石，反卷积是想象力的翅膀” —— 计算机视觉领域谚语。
计算机视觉与深度学习 ｜ Python实现CEEMDAN-ABC-VMD-DBO-CNN-LSTM时间序列预测（完整源码和数据)
尘世冰封的专栏
05-21 658
以下是一个结合CEEMDAN、ABC优化VMD、DBO优化CNN-LSTM的完整时间序列预测实现方案。该方案包含完整的数据生成、算法实现和模型构建代码。
卷积神经网络基础（十一）
qq_52889317的博客
05-22 1102
本文探讨了神经网络中权重初始值的重要性及其设定方法。首先，文章指出权重初始值不能设为0，因为这会导致权重更新对称，影响网络学习效果。接着，通过实验观察隐藏层激活值的分布，发现使用标准差为1的高斯分布会导致梯度消失问题，而标准差为0.01则可能导致表现力受限。最后，文章推荐使用Xavier初始值，即根据前一层节点数调整权重尺度，以保持激活值的广度分布，从而提高学习效率和表现力。
SPringBoot整合Kafka
01-22
### 关于 Spring Boot 中集成 Kafka 并处理 `null` 值 在 Spring Boot 项目中集成了 Apache Kafka 后，在消息传递过程中可能会遇到发送或接收 `null` 值的情况。对于 Java 编程语言而言，`null` 表示对象引用为空的状态[^1]。 #### 处理生产者端的 `null` 当作为生产者向 Kafka 主题发布消息时，可以设置序列化器来决定如何处理 `null` 值： ```java props.put(ProducerConfig.KEY_SERIALIZER_CLASS_CONFIG, StringSerializer.class); props.put(ProducerConfig.VALUE_SERIALIZER_CLASS_CONFIG, JsonSerializer.class); // 自定义序列化逻辑以应对 null 场景 public class NullSafeJsonSerializer<T> implements Serializer<T> { @Override public byte[] serialize(String topic, T data) { if (data == null) { return "null".getBytes(); } try { return new ObjectMapper().writeValueAsBytes(data); } catch (Exception e) { throw new SerializationException("Error serializing JSON message", e); } } } ``` #### 消费者端对 `null` 的处理 消费者接收到消息后，反序列化过程同样需要注意可能出现的 `null` 或特殊字符串 `"null"`: ```java props.put(ConsumerConfig.KEY_DESERIALIZER_CLASS_CONFIG, StringDeserializer.class); props.put(ConsumerConfig.VALUE_DESERIALIZER_CLASS_CONFIG, JsonNullAwareDeserializer.class); // 定制化的反序列化类用于识别特定形式的 null 字符串 public class JsonNullAwareDeserializer<T> extends JsonDeserializer<T> { private final Class<T> targetType; public JsonNullAwareDeserializer(Class<T> type) { super(type); this.targetType = type; } @Override protected T deserialize(JsonParser p, DeserializationContext ctxt) throws IOException { String valueAsString = p.getValueAsString(); if ("null".equals(valueAsString)) { return null; // 显式返回 null 而不是尝试实例化目标类型 } return super.deserialize(p, ctxt); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Southern Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值