【element-tiptap】如何修改选中内容时的背景颜色?

前言:element-tiptap 用鼠标选中内容的时候,背景颜色跟系统设置的主题有关,比如的我的就是卡哇伊的pink,默认是淡蓝色
在这里插入图片描述
但是我们观察一下语雀,背景颜色是它规定好的颜色
在这里插入图片描述
这篇文章来探索一下,怎么自己规定选中的内容的背景颜色。
好吧,没想到这么简单哈哈哈

*::selection {
  background-color: red;
}

在这里插入图片描述

水一篇水一篇~~~~
但是这个颜色的定义咱们可以深究一下
毕竟每次修改往样式文件里找定义是不方便的,最好将颜色定义为常量。那么我们找一下颜色的定义文件
src/styles/variables.scss 就是这个
发现一个优雅的淡蓝色:
$lighter-primary-color: #d9ecff;
在这里插入图片描述

那就用这个吧
src/styles/editor.scss

@import './variables.scss';

*::selection {
  background-color: $lighter-primary-color;
}

在这里插入图片描述
~~优雅

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/896218.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

教学平台的智能化升级:Spring Boot应用

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式,是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示: 图4-1系统工作原理…

除GOF23种设计模式之简单工厂模式

文章目录 1. 简介2. 代码2.1 抽象类:Course.java2.2 产品A:JavaCourse.java2.3 产品B:PythonCourse.java2.4 工厂:CourseFactory.java2.5 测试:Test.java 3. 心得参考链接(无) 1. 简介 简单工厂模式(Simple Factory Patern):又称…

数据结构4——栈

1. 栈的概念及结构 栈的概念: 栈是一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶,另一端称为栈底。栈中的数据元素遵守后进先出LIFO(Last In First Out)的原则…

【SuperHotSwap】IDEA零配置热更新插件升级

往期往期插件v1.0.0发布的时候我发表了一篇文章,如下: 支持功能 如今插件迭代了数个版本,现在迎来了v1.9.0版本的重大升级。如下是支持功能。 支持功能是否支持说明MybatisXML热更新√Class热更新√增强功能需安装dcevm补丁。支持动态新增类…

git rebase的常用场景: 交互式变基, 变基和本地分支基于远端分支的变基

文章目录 作用应用场景场景一:交互式变基(合并同一条线上的提交记录) —— git rebase -i HEAD~2场景二:变基(合并分支) —— git rebase [其他分支名称]场景三:本地分支与远端分支的变基 作用 使git的提交记录变得更加简洁 应用场景 场景…

Java爬虫:获取数据的入门详解

在数字化时代,数据已成为最宝贵的资产之一。无论是市场研究、客户洞察还是产品开发,获取大量数据并从中提取有价值的信息变得至关重要。Java,作为一种成熟且功能强大的编程语言,为编写爬虫提供了强大的支持。Java爬虫可以帮助我们…

如何提高外贸网站在谷歌的收录速度?

外贸企业在进行网络推广时,经常遇到网站页面无法被谷歌快速收录的问题。即使你的网站内容优质、设计精美,如果没有被谷歌收录,就等于失去了被客户发现的机会,GSI谷歌快速收录服务就是为了解决这一问题而诞生的。它不仅能够帮助网站…

5G智慧医疗的实践先锋:SR830-E工业路由器的理性应用

在医疗科技日新月异的今天,5G技术无疑为智慧医疗注入了新的活力。然而,技术的进步不应仅停留在理论层面,更应该在实践中发挥其真正价值。今天,我们就来探讨SR830-E工业路由器如何在实际医疗场景中扮演关键角色,推动5G智…

vscode 远程linux服务器 连接git

vscode 远程linux服务器 连接git 1. git 下载2. git 配置1)github 设置2)与github建立连接linux端:创建密钥github端:创建ssh key 3. 使用1)初始化repository2)commit 输入本次提交信息,提交到本…

UE5 圆周运动、贝塞尔曲线运动、贝塞尔曲线点

圆周运动 贝塞尔曲线路径运动 蓝图函数库创建贝塞尔曲线点 // Fill out your copyright notice in the Description page of Project Settings.#pragma once#include "CoreMinimal.h" #include "Kismet/BlueprintFunctionLibrary.h" #include "MyBlu…

从MySQL到OceanBase离线数据迁移的实践

本文作者:玉璁,OceanBase 生态产品技术专家。工作十余年,一直在基础架构与中间件领域从事研发工作。现负责OceanBase离线导数产品工具的研发工作,致力于为 OceanBase 建设一套完善的生态工具体系。 背景介绍 在互联网与云数据库技…

【码农必备】CasaOS香橙派安装Code server+cpolar让远程开发更轻松

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

基于Spring Boot、Vue和MyBatis的前后端分离座位管理系统:增删改查功能入门指南

在项目开发和工作实践中,创作灵感往往来自于对日常经验的总结与反思。通过记录技术难点和解决方案,不仅可以加深对问题的理解,还能为后续项目的优化提供参考。与此同时,撰写技术笔记、分享职场心得,不仅是对自己成长的…

一款基于 Vue 3 的现代化数据可视化组件库,功能强大,颜值爆表,开发者必备!(带私活源码)

Vue Data UI 是一款基于 Vue 3 的现代化数据可视化组件库,专为开发者提供强大的数据展示功能,旨在帮助用户通过图形化手段生动地讲述数据故事。该库由开源开发者 Graphieros 创建和维护,专注于提升图形渲染性能与交互体验,并致力于…

基于SSM汽车零部件加工系统的设计

管理员账户功能包括:系统首页,个人中心,员工管理,经理管理,零件材料管理,产品类型管理,产品信息管理,产品出库管理,产品入库管理 员工账号功能包括:系统首页…

linuxdeployqt打包发布软件

文章目录 参考一、安装linuxdeployqt二、配置Qt的环境变量三、打包应用程序四、打包成deb包配置*.desktop桌面快捷方式文件五、创建deb包之control文件六、创建deb包之postrm文件(可以不创建)七、使用dpkg命令构建deb包八、deb包的安装与卸载参考 使用linuxdeployqt在linux下…

电影评论网站开发:Spring Boot技术指南

3系统分析 3.1可行性分析 通过对本电影评论网站实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本电影评论网站采用SSM框架,JAVA作为开发语言&#…

深入解析缓存与数据库数据不一致问题

缓存层是提高系统响应速度和扩展性的关键组件。然而,缓存层的引入也带来了数据一致性的挑战。 当数据库中的数据发生变化时,如何确保这些变化能够及时且准确地反映到缓存中,是确保用户体验和系统可靠性的重要问题。 1. 数据一致性 首先&am…

排序算法详解

稳定性 在排序算法中,稳定性是一个重要的概念,指的是在排序过程中,如果两个元素的值相等,它们在排序后的相对位置与排序前的相对位置保持不变的特性。 稳定排序与不稳定排序 稳定排序:在排序时,相等的元素…

【智能大数据分析 | 实验三】Storm实验:实时WordCountTopology

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘,以提取有价值的信息和洞察。它结合了大数据技术、人工智能(AI)、机器学习(ML&a…