Cyberdev Obsidian Theme – DEV Community
Introduction
I have designed a special Obsidian theme tailored for developers who work at their computers late at night, writing code or taking notes. This theme is developed to minimize eye strain for users who spend long hours in front of the screen. High contrast is achieved by using contrasting colors on a black background, enhancing readability and providing a comfortable user experience.
While developing this theme, the main challenges encountered were as follows:
-
Screen Brightness: Creating a design that does not strain the eyes during prolonged use.
-
Readability: Ensuring that text and code are easily distinguishable and understandable.
-
Simplicity and Minimalism: Avoiding unnecessary visual clutter to deliver a focused user experience.
-
Code Readability: Designing a color scheme that makes code easily distinguishable and analyzable.
With these criteria in mind, I aimed to create a theme that prioritizes user experience.
Development Notes
The theme template files were copied from the Obsidian template file into a newly created Obsidian vault file.
After the template files were moved to the .obsidian/themes folder, the manifest.json file was edited.
The most important point to note here is that the value assigned to the name field in the manifest.json file must match the folder name. For example, if the value is “name”: “cyberdev”, the template folder name must also be updated to “cyberdev”.
From this point forward, all adjustments will be made in the theme.css file. At this stage, there are two key points to understand:
-
Default CSS Variables in Obsidian API:
Obsidian provides default CSS variables, which allow you to directly modify values such as color, font size, font family, and border thickness. These variables can be found under the CSS Variables section in the Obsidian Docs. -
Using Developer Tools:
After opening the Obsidian interface, you can access developer tools by pressing CTRL + SHIFT + I. Then, by using the CTRL + SHIFT + C shortcut, you can enable the inspect mode. This allows you to select specific elements on the screen using the mouse. The CSS variables related to the selected element will be displayed. For these classes, such as .cm-em{}, you should write them with a dot notation and define the variables within curly brackets.
License Information
Like other Obsidian theme codes, the theme is open-source under the MIT License. After downloading it to your computer or creating a branch via a fork from the repository, you can customize it and add features as you wish. You can also clone the repository and edit it on your computer as desired.
Accessing the Project Files
You can review the project at the following GitHub address:
gokayburuc/cyberdev-obsidian-theme
Instructions for downloading the theme can be found within the specified repository.
Contact
You can reach out to me regarding the project through the following channels
Telegram : @gokayburuc
Mail : gokayburuc@yandex.com
LinkTree : https://linktr.ee/gokayburuc
If you liked this article, please subscribe to my channel and share this article.
