![](media/banner.png)

<div align="center">

A curated list of awesome themes and plugins for [Obsidian](https://obsidian.md/).

</div>

---

# Table of contents

- [Handy tools](#handy-tools)
- [Themes](#themes)
- [CSS Snippets](#css-snippets)

# Handy tools

| Name | Description | Credits |
| :--: | :---------- | ------: |
| [Markdownload](https://github.com/deathau/markdown-clipper) | A Firefox and Google Chrome extension to clip websites and download them into a readable markdown file. | [deathau](https://github.com/deathau) |
| [Copy Selection as Markdown](https://github.com/0x6b/copy-selection-as-markdown) | Firefox add-on to copy a selection or link as formatted Markdown | [0x6b](https://github.com/0x6b) |
| [Notion to Obsidian converter](https://github.com/connertennery/Notion-to-Obsidian-Converter) | Simple script to convert exported Notion notes to Obsidian | [connertennery](https://github.com/connertennery) |
| [Yarle - Yet Another Rope Ladder from Evernote](https://github.com/akosbalasko/yarle) | Node.js app to convert exported Evernote notes to Markdown (Obsidian) | [akosbalasko](https://github.com/akosbalasko) |
| [Oboe - Obsidian to HTML converter](https://github.com/kmaasrud/oboe) | Command line tool that converts an Obsidian vault into a vault of HTML files. Useful for publishing a vault as a static website. | [kmaasrud](https://github.com/kmaasrud) |
| [Obsidian Clipper](https://github.com/jplattel/obsidian-clipper) | An unofficial Obsidian clipper for Chrome, that allows you to easily clip a selection to a note in Obsidian | [jplattel](https://github.com/jplattel) |
| [Obsidian Starter Templates](https://github.com/masonlr/obsidian-starter-templates) | A set of Markdown templates for common Obsidian use cases | [masonlr](https://github.com/masonlr), [sharpevo](https://github.com/sharpevo) and [mtomas7](https://github.com/mtomas7) |
| [Obsidian Day Planner](https://github.com/lynchjames/obsidian-day-planner) | Plugin for day planning and managing pomodoro timers from a task list | [lynchjames](https://github.com/lynchjames) |
| [Flashcards](https://github.com/reuseman/flashcards-obsidian) | Simple and intuitive integration for Anki | [reuseman](https://github.com/reuseman) |


# Themes

Most themes should be available through the Community Themes pane in Obsidian's settings. If not, enable Custom CSS under Plugins, download `obsidian.css` from the desired repository and place it in the vault root.

| Name | Description | Image | Credits |
| :--: | :---------- | ----- | ------: |
[Official Dracula theme](https://draculatheme.com/obsidian) | A dark theme hosted by the official Dracula guys | ![](https://draculatheme.com/static/img/screenshots/obsidian.png) | [dracula](https://github.com/dracula), [andybyers21](https://github.com/andybyers21) and [zenorocha](https://github.com/zenorocha)
[80s Neon](https://github.com/deathau/80s-Neon-for-Obsidian.md) | A retro-future 80s inspired theme for Obsidian.  | ![](https://raw.githubusercontent.com/deathau/80s-Neon-for-Obsidian.md/master/screenshot.jpg) | [deathau](https://github.com/deathau)
[Base2Tone](https://github.com/deathau/Base2Tone-For-Obsidian.md) | A theme for Obsidian based on http://base2t.one/ with default hues from http://simurai.com/duotone-dark-sky-syntax/. | ![](https://raw.githubusercontent.com/deathau/Base2Tone-For-Obsidian.md/master/colours.gif) | [deathau](https://github.com/deathau)
[OneDark Theme](https://github.com/pionxzh/OneDark-obsidian) | This theme is based on One Dark Pro and One Dark Pro is based on Atom's default One Dark theme. Currently only supports Dark mode. | ![](https://raw.githubusercontent.com/pionxzh/OneDark-obsidian/master/img/sample_1.png) | [pionxzh](https://github.com/pionxzh)
[Dracula](https://github.com/jarodise/Dracula-for-Obsidian.md) | A dark theme for Obsidian. | ![](https://raw.githubusercontent.com/jarodise/Dracula-for-Obsidian.md/master/screencap.jpg) | [jarodise](https://github.com/jarodise)
[Comfort Color Dark Theme](https://github.com/obsidian-ezs/obsidian-comfort-color-dark) | A dark theme for Obsidian. | ![](https://raw.githubusercontent.com/obsidian-ezs/obsidian-comfort-color-dark/master/screencap.png) | [obsidian-ezs](https://github.com/obsidian-ezs)
[Gruvbox Theme](https://github.com/insanum/obsidian_gruvbox) | This is a gruvbox theme for Obsidian. It supports both light and dark modes. | ![](https://raw.githubusercontent.com/insanum/obsidian_gruvbox/master/dark.png) | [insanum](https://github.com/insanum)
[Gastown](https://github.com/dogwaddle/obsidian-gastown-theme.md) | A light theme for Obsidian. | ![](https://raw.githubusercontent.com/dogwaddle/obsidian-gastown-theme.md/master/ObsidianOne.png) | [dogwaddle](https://github.com/dogwaddle)
[Ursa](https://github.com/obsidian-ezs/obsidian-ursa) | A light and dark theme for Obsidian featuring "zen mode" with collapsing side panels and improved single pane viewing. | ![](https://raw.githubusercontent.com/obsidian-ezs/obsidian-ursa/master/light-theme_full.png) | [obsidian-ezs](https://github.com/obsidian-ezs)
[Obsidian Solarized](https://github.com/Slowbad/obsidian-solarized) | This is just a recolor based on the solarized color scheme. | ![](https://raw.githubusercontent.com/Slowbad/obsidian-solarized/master/screenshot.png) | [Slowbad](https://github.com/Slowbad)
[Red Graphite](https://github.com/seanwcom/Red-Graphite-for-Obsidian) | A light theme for Obsidian, based on Bear.app's Red Graphite theme. | ![](https://raw.githubusercontent.com/seanwcom/Red-Graphite-for-Obsidian/master/screenshot01.png) | [seanwcom](https://github.com/seanwcom) |
[Obsidian + Nord](https://github.com/insanum/obsidian_nord) | A Nord-based theme for Obsidian, only supporting dark mode | ![](https://raw.githubusercontent.com/insanum/obsidian_nord/master/screen.png) | [insanum](https://github.com/insanum) |
[Illusion Theme](https://github.com/ZaherAlMajed/Illusion-Theme.md) | A light theme for Obsidian. The theme is comfortable to the eye everything is a bit bigger and contrasted, combining dark & light themes gave it a unique touch. | ![](https://user-images.githubusercontent.com/54148795/125782571-78762279-c644-477a-9cdb-0666603190b9.png) | [Zaher Al Majed](https://github.com/ZaherAlMajed)|
[Horizon](https://github.com/tylernguyen/obsidian-horizon) | Dark theme for Obsidian, inspired by the similarly named theme for VSCode. Compatible with Obsidian Desktop, Mobile, and Publish.  | ![Horizon Preview](https://raw.githubusercontent.com/tylernguyen/obsidian-horizon/main/assets/preview.png) | [Tyler Nguyen](https://github.com/tylernguyen)|
[Behave dark](https://gitlab.com/chrismettal/obsidian-behave-dark) | A port of the eye friendly `Behave` theme by Christian Petersen, available for `VSCode`, `FreeCAD`, `KiCAD`, and now `Obsidian`! | ![BehaveDark](https://raw.githubusercontent.com/Chrismettal/Obsidian-Behave-dark/main/Screenshot.png) | [Chrismettal](https://gitlab.com/chrismettal)|


# CSS Snippets

Small tweaks to add to your `vault/.obsidian/snippets` folder.

- [Andy Matuschak mode](#andy-matuschak-mode)
- [Collapsing sidebar](#collapsing-sidebar)
- [Bullet point relationship lines](#bullet-point-relationship-lines)
- [Task List Preview relationship line Correction](#task-list-preview-relationship-line-correction)
- [Auto-fading UI](#auto-fading-ui)
- [Hyphenation and Justification](#hyphenation-and-justification)
- [Enlarge Image on Hover](#enlarge-image-on-hover)
- [Nicer Check Boxes](#nicer-check-boxes)
- [Stylish Block Quotes](#stylish-block-quotes)
- [Bigger Link Popup Preview](#bigger-link-popup-preview)
- [Custom icons differing files and folders](#custom-icons-differing-files-and-folders)
- [Tag Pills](#tag-pills)
- [Outliner For The Outline and File Explorer](#outliner-for-the-outline-and-file-explorer)
- [Make subtler folding gutter arrows](#Make-subtler-folding-gutter-arrows)
- [Better bullet points in edit mode](#better-bullet-points-in-edit-mode)
- [Bigger popup windows](#Bigger-popup-windows)
- [Image cards](#Image-cards)

Not enough? There are many other places related to snippets:
- [#custom-css at Obsidian Forum](https://forum.obsidian.md/tag/custom-css/l/top)
- [CSS snippets in Obsidian Help](https://help.obsidian.md/How+to/Add+custom+styles#Use+Themes+and+or+CSS+snippets)
- [Other GitHub repositories](https://github.com/search?q=obsidian-snippets)
### Andy Matuschak mode

<details>
<summary>CSS</summary>
<pre lang="css"><code>
/* everything under .mod-root now. Don't want Andy messing with sidebars */
/* also, Andy only makes sense for vertical splits, at the root level, right? */
.mod-root.workspace-split.mod-vertical {
  overflow-x:auto;
  --header-width: 36px; /* <- 36px is the header height in the default theme */
}
.mod-root.workspace-split.mod-vertical > div {
  min-width: calc(700px + var(--header-width)); /* <-- 700px is the default theme's "readable" max-width */
  box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25);
  position:sticky;
  left:0;
}

/* shift sticky position, so titles will stack up to the left */
/* This will currently stack to a maximum of 10 before resetting */
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--header-width) * 0); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--header-width) * 1); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--header-width) * 2); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--header-width) * 3); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--header-width) * 4); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--header-width) * 5); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--header-width) * 6); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--header-width) * 7); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+0) { left: calc(var(--header-width) * 8); }
.mod-root.workspace-split.mod-vertical > div:nth-child(10n+1) { left: calc(var(--header-width) * 9); }

/* now it's time for the fancy vertical titles */

/* first we'll add a bit of gap for the title to sit inside of */
.workspace-leaf-content {
  padding-left: var(--header-width);
  position: relative;
}

/* this is where the magic happens */
.view-header {
  writing-mode: vertical-lr;
  border-right: 1px solid var(--background-secondary-alt);
  border-left: 2px solid var(--background-secondary-alt);
  border-top: none;
  border-bottom: none;
  height: auto;
  width: var(--header-width);
  position: absolute;
  left:0;
  top:0;
  bottom:0;
}

/* active titles have different border colours */
.workspace-leaf.mod-active .view-header {
  border-right: 2px solid var(--interactive-accent);
  border-bottom: none;
}

/* unset the title container height and swap padding */
.view-header-title-container {
  height: unset;
  padding-left: unset;
  padding-top: 5px;
}

/* fix the long-title-obscuring shadows */
.view-header-title-container:after {
  width: 100%;
  height: 30px;
  top:unset;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, var(--background-secondary));
}
.workspace-leaf.mod-active .view-header-title-container:after {
  background: linear-gradient(to bottom, transparent, var(--background-primary-alt));
}

/* swap the padding/margin around for the header and actions icons */
.view-header-icon, .view-actions {
  padding: 10px 5px;
}
.view-action {
  margin: 8px 0;
}

/* get rid of the gap left by the now-missing horizontal title */
.view-content {
  height: 100%;
}

/* make the fake drop target overlay have a background so you can see it. */
/* TODO: figure out how the fake target overlay works so we can put the title back, too */
.workspace-fake-target-overlay {
  background-color: var(--background-primary);
}
</code></pre>
</details>

Credits to [deathau](https://github.com/deathau)

---

### Collapsing sidebar

<details>
<summary>CSS</summary>
<pre lang="css"><code>
.side-dock-ribbon.mod-left.is-collapsed:not(:hover), .side-dock-ribbon.mod-right.is-collapsed:not(:hover) {
  width: 15px !important;
  opacity: 0;
}
.side-dock-ribbon {
  transition-property: width, opacity;
}
</code></pre>
</details>

Credits to [kmaasrud](https://github.com/kmaasrud)

---

### Bullet point relationship lines

<details>
<summary>CSS</summary>
<pre lang="css"><code>
.cm-hmd-list-indent .cm-tab, ul ul { position: relative; }
.cm-hmd-list-indent .cm-tab::before, ul ul::before {
 content:'';
 border-left: 1px solid rgba(0, 122, 255, 0.25);
 position: absolute;
}
.cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px;
}
ul ul::before { left: -11px; top: 0; bottom: 0;
}
</code></pre>
</details>

Credits to [deathau](https://github.com/deathau)

---

### Task List Preview relationship line Correction

<details>
<summary>CSS</summary>
<pre lang="css"><code>
.contains-task-list::before {
  left: 10px ;
}
</code></pre>
</details>

Credits to [d00b](https://forum.obsidian.md/u/d00b/summary)

---

### Auto-fading UI

<details>
<summary>Auto-fading note controls</summary>
<pre lang="css"><code>
.view-header:not(:hover) .view-actions {
  opacity: 0.1;
  transition: opacity .25s ease-in-out;
}
</code></pre>
</details>

<details>
<summary>Auto-fading status bar</summary>
<pre lang="css"><code>
.status-bar:not(:hover) .status-bar-item {
  opacity: 0.25;
  transition: opacity .25s ease-in-out;
}
</code></pre>
</details>

<details>
<summary>Subtler folding gutter arrows</summary>
<pre lang="css"><code>
.CodeMirror-foldgutter-folded:after,
.CodeMirror-foldgutter-open:after {
  opacity: 0.5;
  font-size: 60%;
}

.CodeMirror-foldgutter-folded:hover:after,
.CodeMirror-foldgutter-open:hover:after {
  opacity: 1;
}

.CodeMirror-foldgutter-folded:after {
  content: "\25BA";
}

.CodeMirror-foldgutter-open:after {
  content: "\25BC";
}
</code></pre>
</details>

Credits to Rumen Dimitrov

---

### Hyphenation and Justification

<!-- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>
.cm-s-obsidian,
.markdown-preview-view {
  text-align: justify;
  hyphens: auto;
}
</code></pre>
</details>


Credits to Boyd

---

### Enlarge Image on Hover

<!-- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>
.markdown-preview-view img {
  display: block;
  margin-top: 20pt;
  margin-bottom: 20pt;
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* experiment with values */
  transition: transform 0.25s ease;
}

.markdown-preview-view img:hover {
  -webkit-transform: scale(1.8); /* experiment with values */
  transform: scale(2);
}
</code></pre>
</details>


Credits to Den

---

### Nicer Check Boxes

<!-- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>
/* Round checkbxes in preview and editor */
input[type=checkbox], .cm-formatting-task {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    border: 1px solid var(--text-faint);
    padding: 0;
    vertical-align: middle;
}

.cm-s-obsidian span.cm-formatting-task {
    color: transparent;
    width: 1.25em !important;
    height: 1.25em;
    display: inline-block;
}

input[type=checkbox]:focus{
  outline:0;
}
input[type=checkbox]:checked, .cm-formatting-task.cm-property {
    background-color: var(--text-accent-hover);
    border: 1px solid var(--text-accent-hover);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}
</code></pre>
</details>


Credits to Kepano

---

### Stylish Block Quotes

<!-- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>
blockquote:before {
  font: 14px/20px italic Times, serif;
  content: "“";
  font-size: 3em;
  line-height: 0.1em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}
/* Remove blockquote left margin */
blockquote {
  margin-inline-start: 0;
}
</code></pre>
</details>

Credits to Théry Fouchter

---

### Bigger Link Popup Preview

<!-- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/82 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>
/*============ bigger link popup preview ================*/
.popover.hover-popover {
    transform: scale(0.8); /* makes the content smaller */
    max-height: 800px;    /* was 300 */
    min-height: 100px;
    width: 500px;     /* was 400 */
}
</code></pre>
</details>


Credits to [Cannibalox](https://github.com/cannibalox)

---

### Custom icons differing files and folders

<!-- https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>
/* Emoji */
/*.nav-file-title-content::before { content: '🗒 '; }
.nav-folder-title-content::before { content: '📂 '; }*/

/* Flat font */
/* Requires: https://icomoon.io/#icons-icomoon/liga-font */
.nav-folder-children .nav-file-title-content:first-child::before {
  content: "\e924  ";
  font-family: "IcoMoon-Free";
}
.nav-folder-children .nav-folder-title-content::before {
  content: "\e930  ";
  font-family: "IcoMoon-Free";
}
</code></pre>
</details>


Credits to [deathau](https://github.com/deathau)

---

### Tag Pills

<!-- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>
/* ====== Tag Pills ======== */
.tag:not(.token) {
	background-color: var(--text-accent);
	border: none;
	color: white;
	font-size: 11px;
	padding: 1px 8px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 0px 0px;
	cursor: pointer;
	border-radius: 14px;
}
.tag:not(.token):hover {
	color: white;
	background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
	background-color: #4d3ca6;
}
.tag[href^="#important"] {
	background-color: red;
}
.tag[href^="#complete"] {
	background-color: green;
}
.tag[href^="#inprogress"] {
	background-color: orange;
}
</code></pre>
</details>


Credits to uzerper

---

### Outliner For The Outline and File Explorer

<!-- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>
.outline .collapsible-item-children {
  margin-left: 20px;
  border-left: 1px solid var(--faded-aqua);
  border-radius: 4px;
  transition:all 0.5s ease-in-out;
}
.outline .collapsible-item-children:hover {
  border-left-color: var(--faded-aqua);
}
.nav-folder-children .nav-folder-children {
  margin-left: 20px;
  padding-left: 0;
  border-left: 1px solid var(--faded-aqua);
  border-radius: 4px;
  transition:all 0.5s ease-in-out;
}
.nav-folder-children .nav-folder-children:hover {
  border-left-color: var(--faded-aqua);
}
</code></pre>
</details>

Credits to Shamama and Wonton

---

### Make subtler folding gutter arrows

<!-- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>
.CodeMirror-foldgutter-folded:after,
.CodeMirror-foldgutter-open:after {
  opacity: 0.5;
  font-size: 60%;
}

.CodeMirror-foldgutter-folded:hover:after,
.CodeMirror-foldgutter-open:hover:after {
  opacity: 1;
}

.CodeMirror-foldgutter-folded:after {
  content: "\25BA";
}

.CodeMirror-foldgutter-open:after {
  content: "\25BC";
}
</code></pre>
</details>

Credits to rsdimitrov

---

### Better bullet points in edit mode

<!-- https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul {
  color: transparent;
  position: relative;
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after {
  content: "•";
  position: absolute;
  top: -6px;
  left: 4px;
  color: var(--bright-aqua);
  font-family: sans-serif;
  font-size: 20px;
}
</code></pre>
</details>

Credits to Piotr

---

### Bigger popup windows

<!-- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 -->

<details>
<summary>CSS</summary>
<pre lang="css"><code>

.popover.hover-popover {
  transform: scale(0.8); /* makes the content smaller */
  max-height: 800px;
  min-height: 50px;
  width: 500px;
  overflow: overlay; /* new added */
}

.popover.hover-popover .markdown-embed  {
  height: 100%;
}

.popover.hover-popover.is-loaded .markdown-embed .markdown-embed-content .markdown-preview-view{
padding: 10px 10px 10px 16px; /*16px  two pop magin */
}
</code></pre>
</details>

Credits to Echo

---

### Image cards

<details>
<summary>CSS</summary>
<pre lang="css"><code>

img {
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
background-color: var(--background-secondary); /* Background color so PNGs with transparent backgrounds don't look weird */
}

</code></pre>

</details>

Credits to [TClark1011](https://github.com/TClark1011)

---
