philogicatician/obsidian-firefly-theme

Firefly is a theme for Obsidian.md. The template provides a clean UI and decent color accents (for dark and light theme setup) and slightly separated styles for editor and preview mode.

Firefly Obsidian Theme (slightly modified)

📦 About this Version

This is is slightly modified version of the Firefly Theme. Some things (heading colors, spacing, formatting on blockquotes) are slightly edited to fit my (Phil's) tastes. All credit should really go to lazercaveman. All the info below is from lazercaveman's ReadMe file and may be out of date since I don't plan to maintain these notes. Check his original version in case you're having trouble with stuff.

📥 How-To Install the Firefly Theme into Obsidian

Through Obsidian Marketplace (Recommended)

1. Open the Settings in Obsidian
2. Navigate to Appearances tab under Options
3. Under the Themes section, click on the Browse button next to Community Themes
4. Search for Firefly in the Filter text input in the upper left corner
5. Click Use and then you're done! 🎉

Manually

1. Download obsidian.css from the this repo.
2. Rename the file to Firefly.css, to make sure that it has a unique name (preventing duplicates).
3. Place the file into your vault's /.obsidian/themes directory.
4. Open the Settings in Obsidian.
5. Navigate to Appearances tab under Options, also Ensure that the 'Base mode' setting is set to Dark mode and that 'Custom CSS' is turned on.
6. Under the Themes section, click on the dropdown menu next to Theme heading.
7. Select for Firefly and then you're done! 🎉

⚡️ About Firefly Theme

Firefly is a theme for Obsidian. The template provides a clean UI and decent color accents (for dark and light theme setup).

Firefly was created to add an Obsidian theme, that has more of the look and feel of a code editor in editor mode, and relies on more extended text formatting in preview mode, to deliver more of a blog ux there.

🤖 Specific Theme Features

Code-Style-Tags

In the Firefly theme it is possible to highlight certain content using certain tags (I'll just call them code-style- tags (cst)). At the moment this is only an idea, which I have implemented rudimentary for now - the usage is of course absolutely optional.

cst are generated by double triple backticks (like code blocks), but instead of the programming language for syntax highlighting, a cst is written after the opening backticks. Cst's will always beginn with an underscore followed by a tag name such as e.g. _note, which will result in a specific style of the content written into the cst.

_notes cst

Using the _notes cst, the content inside the tag is highlighted in preview mode as a "note box", which has a drop shadow and additionally marks the text with a red #Note text.

📓 Typography

This theme uses the Inter and JetBrains Mono fonts. For the best experience, I recommend installing these fonts onto your local machine.

🥳 Credits

This theme is inspired and more or less a mix of

• 🎊 Tokyo Night Obsidian Theme, by Ruslan Gagushin
• 🎊 Night Owl Theme, by Ben Hong
• 🎊 Clair de Lune Obsidian Theme, by Jamie Brynes

✌️ License

This Theme is under CC0-1.0 License - so absolutely feel free to use, change, modify or share this theme! ✌️