Firefly Theme

Firefly Theme

Firefly is a clean, elegant theme for Obsidian, with over 18,000 downloads ♥️ - It brings subtile color accents, supports both light and dark mode, and offers a distinct feel for editing and reading.

19 Stars
GitHub
CSSAny theme
# ✨ Firefly Obsidian Theme (>18,500 Downloads ♥️)

## 📦 About this Version 
![Release Badge](https://img.shields.io/github/v/release/lazercaveman/firefly-obsidian-theme)
**If you're missing something, feel free to [open an issue](https://github.com/lazercaveman/firefly-obsidian-theme/issues)** to discuss ideas or request features or just participate by forking the repo and adding your desired changes.

---

## 📥 How to Install Firefly in Obsidian

### 🔁 Recommended: Through the Obsidian Marketplace
1. Open **Settings** in Obsidian
2. Go to **Appearance**
3. Under **Themes**, click **Browse**
4. Search for `Firefly`
5. Click **Use** and you're done! 🎉

### 🖐 Manual Installation
1. Download the `obsidian.css` file from this repository
2. Rename it to `Firefly.css` to ensure a unique name
3. Place it in your vault's `/.obsidian/themes/` directory
4. In Obsidian, go to **Settings → Appearance**
   - Set **Base mode** to `Dark mode`
   - Enable **Custom CSS**
5. Under **Themes**, select `Firefly` from the dropdown
6. Enjoy! 🎉

---

## ⚡ About Firefly
**Firefly** is a clean and minimal theme for Obsidian, designed to offer a focused writing environment with subtle color accents.  
It supports both **dark and light modes**, and provides slightly different styles for **edit** and **preview** modes to enhance readability and UX.

![Screenshot](./firefly-theme-screenshot.png)

The goal was to combine the feel of a code editor in editing mode with a more refined, blog-like feel in reading mode.

---

## 🤖 Special Theme Features

### 🏷 Code-Style Tags (CST)
Firefly introduces an experimental feature called **code-style tags** (CSTs), which allow you to style content blocks using custom labels.

**Usage:**  
Like code blocks, CSTs begin with triple backticks, but instead of a language, use a tag like `_note`.

#### Example: `_note` CST  
Wrap content like this:

    ```_note
    This is a note block.
    ```

In preview mode, this renders as a styled note box with a drop shadow and a red `#Note` label.

![Note CST](./assets/_note-cst.png)

This is still experimental — feedback welcome!

---

## 📓 Typography
This theme uses the beautiful [Inter](https://rsms.me/inter/) and [JetBrains Mono](https://jetbrains.com/mono) fonts.  
For best results, install them locally on your system.

---

## 👨‍💻 Contributing

Firefly is still evolving — and **you** can be part of shaping it!  
If you have ideas for new features, styling tweaks, or want to help implement missing parts: **pull requests are very welcome** 🙌

### Want to contribute?
- Fork the repository
- Create a feature branch
- Submit a PR with a short description

Let's build something awesome together!

---

## 🥳 Credits

Firefly was inspired by and blends elements of these amazing themes:

- 🎊 [Tokyo Night Theme – Ruslan Gagushin](https://github.com/RuslanGagushin/Tokyo-Night-Obsidian-Theme)
- 🎊 [Night Owl Theme – Ben Hong](https://github.com/bencodezen/obsidian-night-owl-theme)
- 🎊 [Clair de Lune – Jamie Brynes](https://github.com/jamiebrynes7/clair-de-lune-obsidian-theme)

---

## ✌️ License

This theme is released under the **CC0-1.0 License**, by [Ali Soueidan](https://alisoueidan.com) — feel free to use, change, remix, or share without restrictions.

---

How to Install

  1. Download the CSS file below
  2. Move it to your vault's .obsidian/snippets/ folder
  3. Open Obsidian → Settings → Appearance → CSS Snippets → Enable it
Download snippet.css

Stats

Stars

19

Forks

4

License

CC0-1.0

Last updated 4d ago

Tags

dark-themeobsidiantheme