导出 PDF 颜色和“配色方案”修改的颜色呈现不一致怎么办?

在使用“配色方案”之后,我修改的颜色设置如下:

image.png

但是在进行 PDF 导出的时候,我发现和我原本在思源页面所见的颜色设置又完全不一样了

想问问这个问题应该如何解决呢?

我大概知道可能要涉及到更改 css,但是我不知道应该是修改什么目录下的什么内容。如果是代码语法问题倒是可以问问 gpt。

image.png

可以看看,就是完全不一样了

2024-11-15 更新

通过追溯主题和默认主题的 css

发现要修改的就是叫做--b3-font-background 的代码

打开“开发者工具”也可以发现就是--b3-font-background 的问题

(不过这个还是很好发现的,因为就这个有 13 个哈哈哈哈哈!!)

解决方法如下:(直接自己使用代码片段)

参考链接:https://ld246.com/article/1682000853320

/* 修改字体标记背景颜色  */
/* 参考修改链接:https://ld246.com/article/1682000853320 */

:root[data-theme-mode="light"] {

/* 白天主题13种背景色 */
    --diy-bg-color1: rgb(250, 250, 0);
    --diy-bg-color2: rgb(253, 238, 214);
    --diy-bg-color3: rgb(243, 169, 47);
    --diy-bg-color4: rgb(253, 213, 231);
    --diy-bg-color5: #e2e3e4;
    --diy-bg-color6: rgb(232, 76, 34);
    --diy-bg-color7: rgb(222, 235, 246);
    --diy-bg-color8: rgb(201, 204, 63);
    --diy-bg-color9: rgb(146, 208, 80);
    --diy-bg-color10: #e6c7e6;
    --diy-bg-color11: #def0d9;
    --diy-bg-color12: rgb(138, 188, 209);
    --diy-bg-color13: rgb(204, 146, 19);
}

/* 针对不同底色,修改其底色  */
[style*="background-color: var(--b3-font-background1);"] {
background-color: var(--diy-bg-color1) !important;
}

[style*="background-color: var(--b3-font-background2);"] {
    background-color: var(--diy-bg-color2) !important;
}

[style*="background-color: var(--b3-font-background3);"] {
    background-color: var(--diy-bg-color3) !important;
}

[style*="background-color: var(--b3-font-background4);"] {
background-color: var(--diy-bg-color4) !important;
}

[style*="background-color: var(--b3-font-background5);"] {
background-color: var(--diy-bg-color5) !important;
}

[style*="background-color: var(--b3-font-background6);"] {
background-color: var(--diy-bg-color6) !important;
}

[style*="background-color: var(--b3-font-background7);"] {
background-color: var(--diy-bg-color7) !important;
}

[style*="background-color: var(--b3-font-background8);"] {
background-color: var(--diy-bg-color8) !important;
}

[style*="background-color: var(--b3-font-background9);"] {
background-color: var(--diy-bg-color9) !important;
}

[style*="background-color: var(--b3-font-background10);"] {
background-color: var(--diy-bg-color10) !important;
}

[style*="background-color: var(--b3-font-background11);"] {
background-color: var(--diy-bg-color11) !important;
}

[style*="background-color: var(--b3-font-background12);"] {
background-color: var(--diy-bg-color12) !important;
}

[style*="background-color: var(--b3-font-background13);"] {
background-color: var(--diy-bg-color13) !important;
}

现在我的下一步问题是,如何设置某个颜色下的字体加粗?因为完全没学过 css,所以基本 css 操作都是搬运、分析别人的,再加上 gpt 老师的辅助。

先码住这个问题。

如果有 uu 看到这里了,希望能推荐一些觉得很好的 css 教学、双链笔记、个人知识体系建立、思源内使用 SQL 语法等相关链接或者视频。

  • 思源笔记

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

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

    22762 引用 • 91389 回帖
1 操作
Anastasia 在 2024-11-15 16:00:27 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • paris1943

    设置 → 外观 → 代码片段 →CSS,添加改字色的代码并启用,这里修改的字色是可以在导出的 PDF 里显示的

    (我只试了默认主题,集市里的主题不清楚是否有效)

    具体代码你在链滴里搜一下,然后把 13 种字色换成你自己的字色,应该比改配色方案要容易些

    (“配色方案”里的颜色只是视觉渲染,并不是真的修改了颜色,所以会出现导出 PDF 和实际颜色不一致的情况)

    1 回复
  • 没做 pdf 导出适配,有人愿意加个 class 再说吧……

    1 回复
  • Anastasia
    作者

    我尝试了一下,搬运了大佬的 css 块,发现确实有用。就是下一步准备学习怎么设置字体加粗了

  • Anastasia
    作者

    pdf 导出适配是啥意思呀?class 是啥意思。是指“配色方案”这个插件吗?

    1 回复
  • pdf 导出默认可以使用代码片段和主题的内容,配色插件插入的 css 样式需要处理才能在 pdf 导出中可见。

请输入回帖内容 ...

推荐标签 标签

  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 161 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 443 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    27 引用 • 225 回帖 • 171 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    178 引用 • 997 回帖 • 1 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 2 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 157 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 174 关注
  • IBM

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

    17 引用 • 53 回帖 • 142 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖
  • Wide

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

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

    30 引用 • 218 回帖 • 624 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 5 关注
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    36 引用 • 37 回帖 • 533 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 138 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    408 引用 • 1246 回帖 • 586 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 1 关注
  • 持续集成

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

    15 引用 • 7 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    155 引用 • 3790 回帖