bencodezen/obsidian-night-owl-theme

An Obsidian theme inspired by the original Night Owl VS Code Theme by Sarah Drasner!

Minimal Night Owl Obsidian Theme

⚡ Inspired by the original Night Owl theme by Sarah Drasner.

🛠️ Setup

Step #1. Install Minimal Theme

1. Open Settings in Obsidian
2. Navigate to Appearances tab under Options
3. Under the Themes section, click on the Manage button
4. Search for Minimal in the Filter text input in the upper left corner
5. Click Install and use and you should now see your theme automatically switch!

Step #2. Install Plugins for Minimal Theme Extension

1. Open Settings in Obsidian (if you closed it)
2. Navigate to Community plugins under Options
3. If needed, click on Turn on community plugins
4. Under the section Community plugins, click Browse
5. Search for Minimal Theme Settings and install it
6. Enable Minimal Theme Settings plugin
7. Search for Style Settings and install it
8. Enable Style Settings plugin

Step #3. Import Night Owl Configuration File

1. Copy the contents of [obsidian-night-owl-theme.json]
2. Open Settings in Obsidian
3. Navigate to Style Settings under Community plugins
4. You should see four sections for Minimal, Minimal Cards, Minimal Mobile, and Minimal Advanced Settings
5. Click on Import in the upper right
6. Paste content from [obsidian-night-owl-theme.json]
7. Click Save

Step #4. Match typography

If you want to match the typography in the theme, you'll need the following fonts on your machine:

• Headings: Rubik
• Interface: Inter
• Text (Body): Karla
• Monospace: IBM Plex Mono

Except for Headings (which is managed by Style Settings), you'll need to update the font for Interface, Text, and Monospace in your Obsidian settings:

1. Open Settings
2. Click on Appearance under Options
3. Click on Manage for each respective section to add the desired font you want to use.

Step #5. Enjoy your Night Owl theme

🎉 Celebrate! 🎊 You're all set to go! 🎉

FAQs

How do I customize this theme?

Easy: Use Obsidian Style Settings Plugin

This allows you to configure the theme directly in Obsidian without any CSS knowledge required!

More settings to come, but if you have specific requests, please open an issue here!

Intermediate: Add CSS snippets

Check out CSS snippets as a way to progressively enhance the theme.

Here's a useful forum post to help get you started.

🎩 Thanks to the suggestion by @DutchPete!

🎩 Credit

Huge thanks to the @kepano for creating the Minimal Obsidian Theme and maintaining an incredible base theme that makes keeping this theme up to date possible!

obsidian-night-owl-theme's Issues

Line numbers are obscured by title panels in multi-pane view

When line numbers are enabled, they are hidden by the vertical title bar - only when there are multiple panes.

It doesn't happen with he default theme.

Comments in bash code blocks have the same color as the code

In the edit mode, when writing a bash code block, it is possible to see that the comments are shown in different colors than the bash code, as can be seen in the image below.

However, if we change to read mode, we can see that the comment is shown in the same color as the bash code, which is confusing.

I noticed that this doesn't happen in other languages (the comments are always shown in a different color).

How can that issue be corrected?

Fix Mermaid note text contrast

```mermaid
stateDiagram-v2
    inProgress : In Progress
    [*] --> Backlog
    Backlog --> Queue
    note left of Queue : Books that are prioritized to be read from soon
    Queue --> inProgress
```

Add option to use standard title tabs

Love this theme.
Looks like you replicated the Sliding Panes vertical title bars.
Thought about an option to use the standard horizontal tabs?
Thanks.

Fix escaped characters color

Currently it's appearing as grey which is not working accessibility wise and looks weird in text.

Reproduction example: \#1

Style Settings support?

I love this theme! May I know if there are any plans to add Style Settings support? Thanks!

Suggestion

In the ReadME you state that customization can be done by modifying the Night Owl.css file. I think that is a "bad" suggestion because, as you state, update will override the customizations. So it is better not to mention this possibility.

A better alternative is to make use of snippets, which are in a separate folder and never get overridden by a theme update.
You have not mentioned the possibility of snippets.

BTW, thanks for a very nice theme!

"Legacy" flag?

Love this theme. Nice and clear. I notice that the version I have is "legacy." Will that flag be removed at some point?

Thomas

Hidden Toolbar Toggle

Hello, I would really love the ability to toggle the behavior of the toolbar on the left side of Obsidian (the one with help/settings/etc). I might be in the minority but I would like to have the option to have it visible at all times to more easily utilize the space/buttons. Thanks!

Network usage is prohibited for themes

It appears that your theme uses network connections to load assets (e.g. fonts, icons, or images). This is prohibited by the official Obsidian developer policies because themes should function completely locally.

You can bundle an asset for local use by using data URLs. See this guide.

Please let us know if you have any questions. Any themes that use network connections will be removed from the official directory in the first week of January 2024.

• the Obsidian team

Ctrl + Scroll does not change font size

Credit to @mauro Publicos for the discoery.