搜索
首页web前端css教程Cyber​​dev 黑曜石主题

介绍

我设计了一个特殊的黑曜石主题,专为深夜在电脑前工作、编写代码或记笔记的开发人员量身定制。开发此主题是为了最大程度地减少长时间坐在屏幕前的用户的眼睛疲劳。通过在黑色背景上使用对比色来实现高对比度,增强可读性并提供舒适的用户体验。

在开发这个主题时,遇到的主要挑战如下:

  • 屏幕亮度:打造长时间使用时不会使眼睛疲劳的设计。

  • 可读性:确保文本和代码易于区分和理解。

  • 简单和极简主义:避免不必要的视觉混乱,以提供专注的用户体验。

  • 代码可读性:设计一种配色方案,使代码易于区分和分析。

考虑到这些标准,我的目标是创建一个优先考虑用户体验的主题。

开发笔记

Cyberdev Obsidian Theme

主题模板文件已从 Obsidian 模板文件复制到新创建的 ObsidianVault 文件中。

模板文件移至 .obsidian/themes 文件夹后,manifest.json 文件已编辑。

这里最需要注意的一点是,manifest.json 文件中 name 字段的值必须与文件夹名称匹配。例如,如果值为“name”:“cyberdev”,则模板文件夹名称也必须更新为“cyberdev”。

从现在开始,所有调整都将在 theme.css 文件中进行。现阶段有两个要点需要理解:

  1. Obsidian API 中的默认 CSS 变量:
    Obsidian 提供默认的 CSS 变量,允许您直接修改颜色、字体大小、字体系列和边框粗细等值。这些变量可以在 Obsidian 文档的 CSS 变量部分下找到。

  2. 使用开发者工具:
    打开 Obsidian 界面后,您可以通过按 CTRL SHIFT I 访问开发人员工具。然后,通过使用 CTRL SHIFT C 快捷键,您可以启用检查模式。这允许您使用鼠标选择屏幕上的特定元素。将显示与所选元素相关的 CSS 变量。对于这些类,例如 .cm-em{},您应该使用点符号编写它们,并在大括号内定义变量。

许可证信息

与其他黑曜石主题代码一样,主题是根据 MIT 许可证开源的。将其下载到您的计算机或通过存储库中的分支创建分支后,您可以根据需要对其进行自定义并添加功能。您还可以克隆存储库并根据需要在计算机上对其进行编辑。

访问项目文件

Cyberdev Obsidian Theme

您可以在以下 GitHub 地址查看该项目:

gokayburuc/cyberdev-obsidian-theme

下载主题的说明可以在指定的存储库中找到。

接触

您可以通过以下渠道联系我了解项目

电报:@gokayburuc
邮件:gokayburuc@yandex.com
LinkTree : https://linktr.ee/gokayburuc

如果您喜欢这篇文章,请订阅我的频道并分享这篇文章。

以上是Cyber​​dev 黑曜石主题的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
@KeyFrames CSS:最常用的技巧@KeyFrames CSS:最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcssanimations.keytricksinclude:1)definingsmoothtransitionsbetnestates,2)使用AnimatingmatematingmultationmatingMultationPropertiessimultane,3)使用使用4)使用BombingeNtibalibility,4)使用BombingingWithjavofofofofofoffo

CSS计数器:自动编号的综合指南CSS计数器:自动编号的综合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1)他们可以使用forterablesofcontents,ListItems,and customnumbering.2)AdvancedsincludenestednumberingSystems.3)挑战挑战InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4)创造性

使用卷轴驱动动画的现代滚动阴影使用卷轴驱动动画的现代滚动阴影May 07, 2025 am 10:34 AM

使用滚动阴影,尤其是对于移动设备,是克里斯以前涵盖的一个微妙的UX。杰夫(Geoff)涵盖了一种使用动画限制属性的新方法。这是另一种方式。

重新访问图像图重新访问图像图May 07, 2025 am 09:40 AM

让我们快速进修。图像地图一直返回到HTML 3.2,首先是服务器端地图,然后使用映射和区域元素通过图像上的单击区域定义了可单击区域。

DEV状态:每个开发人员的调查DEV状态:每个开发人员的调查May 07, 2025 am 09:30 AM

开发委员会调查现已开始参与,并且与以前的调查不同,它涵盖了除法:职业,工作场所,以及健康,爱好等。 

什么是CSS网格?什么是CSS网格?Apr 30, 2025 pm 03:21 PM

CSS网格是创建复杂,响应式Web布局的强大工具。它简化了设计,提高可访问性并提供了比旧方法更多的控制权。

什么是CSS Flexbox?什么是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章讨论了CSS FlexBox,这是一种布局方法,用于有效地对齐和分布响应设计中的空间。它说明了FlexBox用法,将其与CSS网格进行了比较,并详细浏览了浏览器支持。

我们如何使用CSS使网站迅速响应?我们如何使用CSS使网站迅速响应?Apr 30, 2025 pm 03:19 PM

本文讨论了使用CSS创建响应网站的技术,包括视口元标签,灵活的网格,流体媒体,媒体查询和相对单元。它还涵盖了使用CSS网格和Flexbox一起使用,并推荐CSS框架

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器