新的暗色主题制作记录

自己本人晚上用思源也不少,而晚上用自己的 pink-room 又太刺眼,所以我打算将最开始做的夜晚主题拿出来整理一下代码好好写一写,写完后上集市

名字暂时还不想定下来,先把 CSS 写好再说吧

在这个帖子里记录一下我在原版基础上做的一些改动,以及那些想改动的地方

目前外观:

image.png

对比 pink-room

image.png

pink-room 等待新主题制作完成后统一一些样式然后再更新,两个主题都不修改思源默认的自定义字色和背景色,如果有其他主题用户已经习惯了其他主题的自定义字色底色方案,可以提出来我单独发代码片段以兼容在我的主题中的使用。

  • 思源笔记开发者

    思源笔记开发相关讨论区,主要面向思源笔记社区开发者。

    194 引用 • 796 回帖 • 9 关注
1 操作
StarDustSheep 在 2023-02-03 02:44:36 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • StarDustSheep
    作者

    标题样式,为标题添加了前面的图标,通过这种方式来更方便地区分标题层级。如果直接将图标放在标题元素内部,文字左边的话,可能因为图标大小不一导致的对齐问题而不美观。但放在外边的话又会在横排时影响。

    最后采取什么方案还没决定,还需要更多使用测试。

    image.pngimage.png

    由于伪元素在标题元素前,所以在将标题嵌套进超级块进行横排时会可能影响美观性。

    image.png

  • StarDustSheep
    作者

    文档的大纲,前面加了图标以方便区分层级,这个颜色排序是天文爱好者肯定熟悉的,但普通用户估计觉得不太自然。之后改成大众能容易接受的颜色。

    image.png

  • StarDustSheep
    作者

    默认状态的文档树是这样的

    image.png

    我还做了一种层次感强点的文档树,不过可能没多少人喜欢。而我自己现在也不用文档树了。所以就不把这个作为默认文档树样式了。

    image.png

  • ebird98

    好像不错呀,看起来白天用也不太暗。

  • StarDustSheep
    作者

    按键和行内代码样式,在默认行距下可能有些挤

    image.png

  • StarDustSheep
    作者

    页签关闭按钮修改,这是我自己最喜欢的改动,因为原版思源那个关闭按钮的小叉定位起来是需要仔细看一下的。视觉定位越轻松,消耗的大脑视觉处理单元的资源(脑神经中肯定有部分是负责处理视觉的)就越低。使用起来也就更加轻松。

    关闭按钮样式.gif

    默认的关闭按钮样式,当你想要关闭一个特定的页签的时候,你首先得鼠标悬浮到它上面,然后再跳出来一个小叉,然后你需要用视觉定位它,将鼠标指针移动上去直到显示了圆形阴影才能确定自己移动到了按钮生效的热区,可以点击关闭了。为了用鼠标定位这个小叉实在有些费劲,简直能比得上我在 FPS 游戏中去瞄人头了的困难度了。

    视觉定位困难.gif

    1 回复
  • StarDustSheep
    作者

    多开页面时,“正在显示的文档”和“编辑光标所在的文档”做了区分
    当我点击了哪个文档,插入光标(就是你打字的时候在打字的位置一闪一闪那玩意)就会到哪个文档,这时候打字输入啥的都添加进这个文档里。我用了双亮色边线来提示用户到底哪个才是你现在编辑中的文档,(图中左边的)而且如果处在编辑状态,它的标题文字也会发光以好让人区分。

    图中右侧的则是显示出来但现在不是编辑状态的文档。只有上部边线提示。

    image.png

  • smolc
    订阅者

    支持支持,期待上架,很想体验 🎉 🎉 🎉

  • StarDustSheep
    作者

    在不怎么改变默认主题的字色、底色样式的色相的情况下,对字色和底色样式进行了优化,以更好地与暗蓝色背景相衬,也加强了各个样式之间的区分度。

    QQ 图片 20230203170341.png
    QQ 图片 20230203170329.png

  • StarDustSheep
    作者

    QQ 图片 20230203200108.png
    QQ 图片 20230203200129.png

  • fgdl30458df

    你可以鼠标中键关闭

    1 回复
  • z1501129084

    期待期待 🎉

  • StarDustSheep
    作者

    我两个鼠标的中键的压力克数都比左键大不少,按着实在是不得劲 😂

  • JINSILI
    订阅者

    文档树的渐变划分也很好,建议保留

    这个天文样式的标题划分很有特点,建议保留。

    期待早一点发布!!!

  • StarDustSheep
    作者

    image.png

    image.png

请输入回帖内容 ...

推荐标签 标签

  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 531 关注
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    37 引用 • 40 回帖
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    167 引用 • 1408 回帖 • 1 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    273 引用 • 245 回帖 • 414 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    83 引用 • 1749 回帖
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    22 引用 • 7 回帖 • 325 关注
  • Wide

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

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

    28 引用 • 209 回帖 • 562 关注
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    145 引用 • 458 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    102 引用 • 151 回帖 • 149 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    176 引用 • 432 回帖
  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    888 引用 • 922 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 154 关注
  • 导航

    各种网址链接、内容导航。

    27 引用 • 163 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    23 引用 • 187 回帖 • 22 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    84 引用 • 1161 回帖 • 491 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 473 关注
  • 架构

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

    135 引用 • 441 回帖
  • Chrome

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

    59 引用 • 284 回帖 • 1 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    15 引用 • 66 回帖 • 1 关注
  • Dubbo

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

    60 引用 • 82 回帖 • 576 关注
  • 安装

    你若安好,便是晴天。

    120 引用 • 1181 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 59 关注
  • 服务器

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

    123 引用 • 579 回帖
  • Scala

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

    13 引用 • 11 回帖 • 58 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    241 引用 • 224 回帖 • 166 关注