Awesome
<p align="center"> <a href="https://horizontheme.com/"> <img alt="horizon banner" src="https://i.imgur.com/pwBUCSe.png"> </a> </p> <p align="center"> <a href="https://obsidian.md"> <img src= "https://img.shields.io/badge/Obsidian-0.13.17-%237E6AD7"> <a href="https://github.com/tylernguyen/obsidian-horizon/issues"> <img src="https://img.shields.io/github/issues/tylernguyen/obsidian-horizon"/> </a> <a href="https://github.com/tylernguyen/obsidian-horizon/commits/master"> <img src="https://img.shields.io/github/last-commit/tylernguyen/obsidian-horizon"/> </a> <a href="https://github.com/tylernguyen/obsidian-horizon/blob/main/LICENSE"> <img src="https://img.shields.io/badge/License-The%20Unlicense-informational.svg"> </a> </p> <p align="center"> <a href="https://damnthattelevision.com/Contact"> <img src="https://img.shields.io/badge/%40-Contact-FFF27D"> </a> <a href="https://damnthattelevision.com/Support"> <img src="https://img.shields.io/badge/%24-Support-E95678.svg"> </a> <a href=""> <img src="https://img.shields.io/badge/Contributions-Welcome-orange.svg"> </a> </p> <p align="center"> <a href="https://github.com/tylernguyen/obsidian-horizon/blob/main/assets/preview.png"> <img alt="Horizon for Obsidian Preview" src="https://github.com/tylernguyen/obsidian-horizon/blob/main/assets/preview.png"> </a> </p> <p align="center"> <a href="https://fonts.google.com/specimen/Roboto+Condensed"> <img src="https://img.shields.io/badge/Font-Roboto%20Condensed-E95678?style=for-the-badge"> </a> <a href="https://damnthattelevision.com"> <img src="https://img.shields.io/badge/-Theme%20Demo-%237E6AD7?style=for-the-badge"> </a> <a href="https://damnthattelevision.com/Projects/Preview+Horizon+Theme+for+Obsidian"> <img src="https://img.shields.io/badge/-Stylesheet-FFF27D?style=for-the-badge"> </a> </p>Design Philosophy
- Vanilla and stable
- Lightweight, Obsidian Publish friendly
- Minimal in snippets and tweaks
- High compatibility
- Readable and easy-to-understand CSS, even for beginners
Horizon then, unlike other available themes for Obsidian, do not:
- Change behaviors of Obsidian
- Support 3rd party plugins by default
FAQ
"What is Horizon?"
Horizon is a dark theme for Obsidian. It is inspired (a color fork) by but not a direct port of the similarly named theme for VSCode. Compatible with Obsidian Desktop, Mobile, and Publish.
"How do I keep my theme updated?"
Currently, there is no automatic solution available. For now, I recommend you create a GitHub watch alert for releases. Then, when the theme is updated, you can install the new version.
"Why Roboto Condensed?"
I had previous used Fira Code as the theme's chosen font, mostly because I use Horizon in VSCode in conjuction with Fira Code. As I began to use Obsidian more intensely, however, these things became clear:
- Coding ligatures were rarely used in Obsidian.
- I needed support for Vietnamese, which Fira Code lacked.
- Fira Code, while great on the destop, does not display well on compact mobile displays.
Roboto Condensed was then chosen for the reasons above. In addition, it's free to use.
You may wish to add/switch to a different font for some reasons such as:
- You code/display code often in Obsidian and need ligatures.
- You want to use different fonts for header, body, graph. Keep in mind that this will likely increase loading time on Obsidian Publish.
"Is there a light color scheme?"
No currently and is not planned. The existing Horizon light palette does not suit Obsidian. An alternative light color palette can be suggested by creating a pull request/ issue. Though the dark mode is the primary focus of this theme.
"Can you port this for X app?"
No.
Update
Recent | Changelog Archive
[v0.13.18] - 2022-01-01
Added
- Design Philosophy
- More documenting comments for easier source reading.
Changed
- Deprecate
@import
in favor@use
and@forward
- GitHub Workflow: upgrade gha-utilities/sass-build@0.4.0 to gha-utilities/sass-build@0.4.8
- Color: Marked text are now black with yellow highlight.
Spec-Sheet
- Font: Roboto Condensed
- Background: Purple-Black
- Accent: Pink-Red
- Headings: Yellow
- Links: Green (including internal, external links, and tags)
Install
- For the best experience and performance, install Roboto Condensed font locally on your computer.
- Navgiate to the Releases page.
- Obsidian Desktop/ Mobile:
- Download
obsidian.css
and move it into.obsidian/themes/
. (You may wish to rename it asHorizon
to differentiate from other themes). - Obsidian ->
Appearance
->Theme
->Horizon
(be sure thatBase Theme
->Dark
).
- Download
- Obsidian Publish:
- Download
publish.css
and move it into./
, the root of your Obsidian vault. - Publish
publish.css
file onto your site.
- Download