登录 注册

小白求教，dark+ 主题自定义背景图片的代码片段为什么不起作用？

本贴最后更新于 673 天前，其中的信息可能已经时异事殊

作者在“readme”里给出了代码片段

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

/* 浅色主题默认背景图片 | default background image for light color theme */

--custom-background-image: url("/widgets/background-light.png");

/* 浅色主题默认对话框背景图片 | default dialog background image for light color theme */

--custom-background-image-dialog: url("/widgets/background-light-dialog.png");

}

我就直接复制的，widgets 文件夹也创建了相应名字的图片，可是无效。

  • 思源笔记

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

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

    23020 引用 • 92599 回帖
  • Q&A

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

    8449 引用 • 38491 回帖 • 155 关注
30 悬赏
1 收藏
1 回帖
156 63 22 12 2 4 53

相关帖子

被采纳的回答
  • FlyerBit •
    订阅者 捐赠者 恶龙

    看了下仓库里的最新代码，应该这样写

    参考：siyuan-theme-dark-plus/config.css at main · Zuoqiu-Yingyi/siyuan-theme-dark-plus (github.com)

    /*
* @file <工作空间>/data/widgets/custom.css
*/

/* Light */
:root[data-theme-mode="light"] {
  /* 背景图片 */
  --custom-background-image-landscape: url(/appearance/themes/Dark+/image/light/background-main.jpg);
  --custom-background-image-portrait: url(/appearance/themes/Dark+/image/light/background-main-portrait.jpg);
  /* 对话框背景图片 */
  --custom-background-image-dialog: url(/appearance/themes/Dark+/image/light/background-dialog.jpg);
}

/* Dark */
:root[data-theme-mode="dark"] {
  /* 背景图片 */
  --custom-background-image-landscape: url(/appearance/themes/Dark+/image/dark/background-main.jpg);
  --custom-background-image-portrait: url(/appearance/themes/Dark+/image/dark/background-main-portrait.jpg);
  /* 对话框背景图片 */
  --custom-background-image-dialog: url(/appearance/themes/Dark+/image/dark/background-dialog.jpg);
}
1 回帖
小白求教，dark+ 主题自定义背景图片的代码片段为什么不起作用？

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • FlyerBit • • 3 评论
    订阅者 捐赠者 恶龙

    看了下仓库里的最新代码，应该这样写

    参考：siyuan-theme-dark-plus/config.css at main · Zuoqiu-Yingyi/siyuan-theme-dark-plus (github.com)

    /*
* @file <工作空间>/data/widgets/custom.css
*/

/* Light */
:root[data-theme-mode="light"] {
  /* 背景图片 */
  --custom-background-image-landscape: url(/appearance/themes/Dark+/image/light/background-main.jpg);
  --custom-background-image-portrait: url(/appearance/themes/Dark+/image/light/background-main-portrait.jpg);
  /* 对话框背景图片 */
  --custom-background-image-dialog: url(/appearance/themes/Dark+/image/light/background-dialog.jpg);
}

/* Dark */
:root[data-theme-mode="dark"] {
  /* 背景图片 */
  --custom-background-image-landscape: url(/appearance/themes/Dark+/image/dark/background-main.jpg);
  --custom-background-image-portrait: url(/appearance/themes/Dark+/image/dark/background-main-portrait.jpg);
  /* 对话框背景图片 */
  --custom-background-image-dialog: url(/appearance/themes/Dark+/image/dark/background-dialog.jpg);
}
    谢谢你！搞定了——不过，路径还要加引号才行。真搞不懂，明明原配置文件里也没加引号啊
    suiji •
    @suiji 在 CSS 中，url() 函数的引号是可选的，但如果路径中包含空格或特殊字符，则需要用引号括起来
    FlyerBit •
    @FlyerBit 确有空格，谢谢！
    suiji •
suiji
回帖
116
 帖子
40
 积分
16474

近期热议

推荐标签 标签

  • 工具

    子曰：“工欲善其事，必先利其器。”

    288 引用 • 734 回帖 • 1 关注
  • 游戏

    沉迷游戏伤身，强撸灰飞烟灭。

    177 引用 • 816 回帖
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 440 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 604 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    223 引用 • 474 回帖
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • Solo

    Solo 是一款小而美的开源博客系统，专为程序员设计。Solo 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    1435 引用 • 10056 回帖 • 489 关注
  • 链滴

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

    记录生活，连接点滴

    156 引用 • 3792 回帖 • 1 关注
  • 锤子科技

    锤子科技（Smartisan）成立于 2012 年 5 月，是一家制造移动互联网终端设备的公司，公司的使命是用完美主义的工匠精神，打造用户体验一流的数码消费类产品（智能手机为主），改善人们的生活质量。

    4 引用 • 31 回帖
  • Electron

    Electron 基于 Chromium 和 Node.js，让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目，兼容 Mac、Windows 和 Linux，它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 536 关注
  • BookxNote

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

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

    1 引用 • 1 回帖 • 1 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • wolai

    我来 wolai：不仅仅是未来的云端笔记！

    2 引用 • 14 回帖 • 1 关注
  • IBM

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

    17 引用 • 53 回帖 • 139 关注
  • 旅游

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

    93 引用 • 899 回帖 • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖
  • OpenStack

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

    10 引用 • 1 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    78 引用 • 391 回帖
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案，后端采用 Go 编写，采用 MIT 许可证。

    4 引用 • 16 回帖
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    30 引用 • 96 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业，2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月，京东在美国纳斯达克证券交易所正式挂牌上市（股票代码：JD），是中国第一个成功赴美上市的大型综合型电商平台，与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 354 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 667 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    51 引用 • 25 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”，在线用户由 1999 年的 2 人（马化腾和张志东）到现在已经发展到上亿用户了，在线人数超过一亿，是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 44 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • PHP

    PHP（Hypertext Preprocessor）是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点，主要适用于 Web 开发领域，据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 491 关注

最新标签