登录 注册

请问有办法让数据库表格不被编辑区背景色覆盖吗？

想要让打字的环境更舒适一点，前几天找 AI 要了一段代码，修改编辑区的背景颜色，但是我发现他覆盖了普通表格的配色，于是，我又让 AI 修改了代码，让表格有自己的配色。

但是我发现数据库表格的配色也被覆盖了，而 AI 这次修改不了了，所以我来论坛问一下有 css 代码可以阻止编辑区的背景色覆盖它吗？或者有什么代码可以使他有自己的配色？

还有这是我用的 css 代码。感兴趣的看看。编辑区背景色修改.7z

20250127094514.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    26111 引用 • 108396 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    10035 引用 • 45600 回帖 • 70 关注
赤峰 位置 2 回帖
210 68 1 51 90

相关帖子

被采纳的回答
  • JeffreyChen • • 1
    付费者 支持者 捐赠者

    帮你改了一下：

    /* 修改编辑区到题头图区域的背景颜色 */
.protyle {
  --b3-theme-background: #EEE6DD !important; /* 统一浅米色背景 */
  --b3-parent-background: var(--b3-theme-background) !important; /* 数据库背景 */
}

/* 编辑区文本颜色 */
.protyle-wysiwyg {
  color: #575279 !important; /* 深蓝紫色文本 */
}

/* 标题区域背景颜色 */
.protyle-title {
  /*background: transparent !important; /* 透明背景，与背景保持一致 */
  color: #575279 !important; /* 深蓝紫色文本 */
}

/* 面包屑区域背景颜色（与编辑器一致） */
.protyle .protyle-breadcrumb {
  background: #EEE6DD !important; /* 统一浅米色背景 */
}

/* 表格默认样式 */
table {
  background-color: #FFFFFF !important; /* 表格白色背景 */
  border-collapse: collapse; /* 合并边框间隙 */
  width: 100%; /* 表格宽度自适应 */
}

/* 表格标题行样式 */
table thead tr {
  background-color: #F5F3FA !important; /* 标题行淡紫背景 */
  color: #575279 !important; /* 深蓝紫色文本 */
  font-weight: bold;
  text-align: left; /* 标题左对齐 */
}

/* 表格单元格样式 */
table th, table td {
  border: 1px solid #E0E0E0 !important; /* 浅灰色边框 */
  padding: 8px; /* 单元格内边距 */
  color: #575279 !important; /* 深蓝紫色文本 */
}

/* 表格内容行的交替背景色 */
table tbody tr:nth-child(even) {
  background-color: #F9F9F9; /* 偶数行浅灰背景 */
}
table tbody tr:nth-child(odd) {
  background-color: #FFFFFF; /* 奇数行白色背景 */
}

/* 选中状态背景颜色 */
.protyle-wysiwyg ::selection {
  background-color: #CC66FF !important; /* 浅紫色选中背景 */
  color: #333333 !important; /* 深色选中文本 */
}
​
2 回帖
请问有办法让数据库表格不被编辑区背景色覆盖吗？

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • EmptyLight • • 1 • 2 评论
    付费者

    可以通过CTRL+Shift+I打开控制台，之后选择控制台左上角的检查元素(CTRL+Shift+C)，选中数据库里面的背景，之后在右方的样式面板中查看需要修改部分的样式选择器，可以参考表格的写法用数据库的选择器设置背景颜色。

    翻看了我之前主题写的代码，可供参考（注意这里用到的颜色可能已被修改，需要替换，并且是好几个版本之前写的，需要注意检查可用性）：

    .protyle .av[data-av-type=table] .av__header,
.protyle .av[data-av-type=table] .av__scroll {
    /* 数据库背景修复 */
    background: var(--b3-theme-background);
}
​

    https://github.com/emptylight370/siyuan-vscodelite-edit/blob/70a032b13c48dd0cacdebde2f47e0ceab295cef6/src/plugin/backgroundPlugin.scss#L72-L76

    这个方法有问题的，如果父块有背景色的话颜色会不一致。应该改 --b3-parent-background
    JeffreyChen •
    @JeffreyChen 能正常显示就行了，我当时没在意这个
    EmptyLight •
  • JeffreyChen • • 1
    付费者 支持者 捐赠者

    帮你改了一下：

    /* 修改编辑区到题头图区域的背景颜色 */
.protyle {
  --b3-theme-background: #EEE6DD !important; /* 统一浅米色背景 */
  --b3-parent-background: var(--b3-theme-background) !important; /* 数据库背景 */
}

/* 编辑区文本颜色 */
.protyle-wysiwyg {
  color: #575279 !important; /* 深蓝紫色文本 */
}

/* 标题区域背景颜色 */
.protyle-title {
  /*background: transparent !important; /* 透明背景，与背景保持一致 */
  color: #575279 !important; /* 深蓝紫色文本 */
}

/* 面包屑区域背景颜色（与编辑器一致） */
.protyle .protyle-breadcrumb {
  background: #EEE6DD !important; /* 统一浅米色背景 */
}

/* 表格默认样式 */
table {
  background-color: #FFFFFF !important; /* 表格白色背景 */
  border-collapse: collapse; /* 合并边框间隙 */
  width: 100%; /* 表格宽度自适应 */
}

/* 表格标题行样式 */
table thead tr {
  background-color: #F5F3FA !important; /* 标题行淡紫背景 */
  color: #575279 !important; /* 深蓝紫色文本 */
  font-weight: bold;
  text-align: left; /* 标题左对齐 */
}

/* 表格单元格样式 */
table th, table td {
  border: 1px solid #E0E0E0 !important; /* 浅灰色边框 */
  padding: 8px; /* 单元格内边距 */
  color: #575279 !important; /* 深蓝紫色文本 */
}

/* 表格内容行的交替背景色 */
table tbody tr:nth-child(even) {
  background-color: #F9F9F9; /* 偶数行浅灰背景 */
}
table tbody tr:nth-child(odd) {
  background-color: #FFFFFF; /* 奇数行白色背景 */
}

/* 选中状态背景颜色 */
.protyle-wysiwyg ::selection {
  background-color: #CC66FF !important; /* 浅紫色选中背景 */
  color: #333333 !important; /* 深色选中文本 */
}
​
nightstars
赤峰
回帖
257
 帖子
45
 积分
100

近期热议

推荐标签 标签

  • 旅游

    希望你我能在旅途中找到人生的下一站。

    98 引用 • 903 回帖
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 241 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 644 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    500 引用 • 1396 回帖 • 245 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 61 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 80 关注
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 126 关注
  • 反馈

    Communication channel for makers and users.

    120 引用 • 906 回帖 • 279 关注
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 26 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 5 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 33 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台，同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2389 回帖 • 2 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    730 引用 • 1282 回帖 • 1 关注
  • 域名

    域名（Domain Name），简称域名、网域，是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。

    44 引用 • 208 回帖
  • 分享

    有什么新发现就分享给大家吧！

    248 引用 • 1794 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码，添加在 [设置 - 外观 - 代码片段] 中，这些代码会在思源笔记加载时自动执行，用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] 或 [js] 用于区分代码片段类型。

    192 引用 • 1360 回帖
  • RemNote
    2 引用 • 16 回帖 • 25 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 765 关注
  • Word
    13 引用 • 41 回帖
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis，2010 年这个项目由 Apache 软件基金会迁移到了 google code，并且改名为 MyBatis ，2013 年 11 月再次迁移到了 GitHub。

    173 引用 • 414 回帖 • 365 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具，主要功能包括：位置相关的内容递送；用户认证和授权；集中式网络监控。

    1 引用 • 7 回帖 • 612 关注
  • IBM

    IBM（国际商业机器公司）或万国商业机器公司，简称 IBM（International Business Machines Corporation），总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国，是全球最大的信息技术和业务解决方案公司，拥有全球雇员 30 多万人，业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 143 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    98 引用 • 367 回帖
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题，项目仓库：https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖

最新标签