Obsidian dark theme inspired by Discord

  • By Radek Kozak
  • Last update: Nov 21, 2022
  • Comments: 15

GitHub release (latest)

beautiful Obsidian dark theme inspired by Discord

Discordian is a dark theme designed to give all Obsidian power users visuals they recognize and appreciate when gathering on Discord servers to discuss all things Obsidian. Seamless Discord experience right back in Obsidian is the keyword here. We, Obsidianites, PKM & Zettelkasten lovers, spend there so much time it's almost logical to have the same visual experience extended to our beloved app (see screenshots)

Theme, apart from deriving its visuals from Discord app, strives to serve as solid dark theme. An honest default . This means it offers an unobtrusive, minimal and easy-on-the-eyes experience with a hint of subtle changes in Discord's color palette.

Discordian, of course, fully supports popular Obsidian's community plugins but also has its own Discordian Plugin going on which is very much recommended. If you like to have more fine-grained control over some aspects of the theme go ahead and download it. You will be so much happier with the additions of Writer Mode, Paragraph Focus, Flat Andy's Mode, controllable line length, fonts and other things.

IMPORTANT: For best experience possible, please download the fonts and install them in your system before using the theme. Provided fonts closely resemble those in Discord app and are sort of required here.


Discordian theme is provided as is, meaning it is a product of my own personal experience, and shows the theme as I use it in Obsidian app on daily basis within macOS environment. Please bear in mind that even though I did my best to polish it enough to be used with the latest version of Obsidian some quirks and visual discrepancies may (or not ) occur as I had no means of testing it on other platforms.

As this theme modifies many parts of Obsidian UI it's given that it might break some things with future app updates or with your own css snippets. However, I do plan to earnestly support it so as Obsidian app will progress so it will Discordian theme. I am also open to any contributions : be it a simple suggestion, bug report or your fix via PR.

Features and goals

  • Easy on the eyes, lean design with focus on clean visuals (see screenshots)
  • Promotes writing experience first (Writer Mode, Paragraph Focus Mode).
  • Keyboard as Obsidianite's best friend (as power users we love us some keyboard shortcuts)
  • Settings panel as seen in Discord (along with fancy toggle switches)
  • Pretty Task lists - also in Editor mode !
  • Beautiful graph view
  • Seamless transclusions
  • Snappy performance (stripped out many animations)
  • Images enhancements : image grids, zooms, floating images with captions !!
  • Bullet points relationship lines extravaganza as default
  • Graceful dark theme audio in place of ugly default
  • New and improved codeblocks with delightful aesthetics

Plugin support

Some additional remarks

Hidden things

To provide simple and clean UI that mimics Discord app Discordian theme hides top title bar and status bar as default . You can however enable them and bring them back via accompanying Discordian plugin (this is preferred way) or, if you decide to go solo, by commenting appropriate parts of CSS.

I could provide more user-controllable elements for hiding if requested but to not reinvent the wheel i sincerely recommend excellent Hider Plugin by @kepano - I use it myself for simplifying UI even more. Discordian of course, as mentioned before, is fully compatible with it.

Task lists

The way the fancy task lists works in editor mode is via quite hackish means. Therefore, it's mandatory to have Smart indent list option enabled in Obsidian. From my own experience I would also recommend having Toggle checklist status under some hotkey. This would definitely make working with tasks / checklist list a blaze. I know I love it that way!

Images enhancements

NOTICE: as of version 0.11.3 Obsidian changed the way images are grouped which made the flexbox approach provided by Discordian's image grids no longer possible.

Not wanting to deprecate this feature which everyone seems to really like i decided to use @Lithou idea and hackishly make it work again with the theme - some restrictions apply. Unfortunately with new version of Obsidian there is no way to make the grid images on the same line of same height (like before). Although current solution may look similar or even the same depending on images, it will now look and behave more like masonry-ish grid.

Image grids

Using Obsidian's new cssclass directive in YAML you can achieve image grids like below with

cssclass: img-grid

RESTRICTIONS: This works with images if

  1. no pipe is used when calling an image i.e. ![[example.jpg]] - recommended default and simplest way
  2. or if your alt text in pipe contains a period . i.e ![[example.jpg|Figure 1. Some caption]] (it will not display the caption though if using cssclass: img-grid alone)

EXPLANATION: when no pipe is used (meaning no custom alt attribute is added by the user, Obsidian will made the alt attribute equal to the filename.ext. Image grids feature targets exactly those image embeds with an alt attribute that has a period in it - ANY SUCH IMAGE. This is the only possible solution for now after Obsidian 0.11.3 changes.

Floating images - with captions !! (work as before)

Have your images the way you want: full in center (default) or floating left or right with your text wrapped around them. No messing around with HTML markups, no polluting your markdown. Fully using current Obsidian image embeds syntax along with image resizing.

Using Obsidian's new cssclass directive in YAML you can have properly looking captions

cssclass: img-captions

and then in your note you can do



  • position: left or right (omitting assumes default which is center)
  • caption: simply your caption (note: no markdown within caption and no period)
  • size: width x height as explained in Obsidian Help

NOTE: positioning left or right and resizing is working EVEN WITHOUT YAML directive. cssclass is only for still allowing simple embeds without polluted captions (Obsidian fills image alt with filename by default)

Image grids AND image captions IN ONE NOTE (Discordian v0.8.6+)

Before version 0.8.6 (and prior to Obsidian 0.11.3 changes) i advised everyone to use img-grid or img-captions separately as CSS in those features is applied globally to all images in the note.

From version 0.8.6 of Discordian theme - with some restrictions - you can have both image grids and image captions in one note - BUT please consider this feature more or less experimental.

cssclass: img-grid, img-captions

RESTRICTIONS (only for both features together):

  1. Images with image captions in the same note cannot have period in it (see how Image grids work now)
  2. Images within image grids with no piped caption text from user will display filename.ext per Obsidian's default behaviour).
  3. If you want your images within image grids with your custom captions then use your piped caption WITH period . in it. You can simply make it the end of your sentence or sth like this
![[example.jpg|Figure 1. Example caption]]

NOTE: I still advise using these image features in your notes separately. It will make your life easier and save your from headache of remembering the inner workings.

Image zooms


Discord experience

Discordian in Andy Mode (fullscreen)

Discordian in Writer Mode

Discordian in Fullscreen


Found some quirks? Want to propose some new functionality? You can easily follow these simple steps:

  1. File an issue discussing proposed changes or found bug
  2. If you want to contribute solution on your own please
    • clone this repo
    • npm i to install dependencies
    • create config.json from config.json.example and set it accordingly
    • npm run dev to start compilation and development in watch mode
    • do your magic (all relevant css files are in .theme directory )
  3. Commit your work
    • please run npm run lint before to spot any CSS issues
    • use commit message that best describes changes you've just made. If possible, link it to relevant issue
    • DO NOT build or commit obsidian.css directly ! It will be autogenerated and handled by CI server.

Now sip your coffee and wait for my swift response or PR merge. Thanks !


Many ideas and css solutions are inspired by or come from an amazing Obsidianites both on Obsidian's Forum and Discord channel: @kepano @death_au @nickmilo @tallguyjenks to name a few. Thanks to all of you for shared knowledge and being part of Obsidian community.


MIT License




  • 1

    Cannot edit when using Discordian Theme

    After switching to Discordian Theme I cannot edit the note. It acts like it is in preview mode but it isn't. I can edit once I switch to another theme.

  • 2

    cssclass: img-captions, img-grid

    Hi @radekkozak

    Just wanted to report strange behavior of theme when using cssclass in YAML at top of a note -- preview formatting is all over the place and I can't figure out why.

    cssclass: img-captions, img-grid

    Please see attached

    screenshot 2021 04 19 00 07 14

    Images are working wonderfully, however certain markdown syntax line inline code, my table of contents (links to in note headers) and footnotes are doing weird and wonderful things.

    I'm not sure how to fix this myself and would be grateful if you could take a look.

    All the best!

  • 3

    fold gutter overlaps covers the writing area in editor mode

    OS: Windows Discordian version: 0.8.5 Obsidian: Version: 0.11.13

    When viewing text in editor mode there's something overlapping the the left-side of the writing area

    This is some example text:

    OS: Windows
    Discordian version: 0.8.5
    Obsidian: Version: 0.11.13

    This is what it looks like in preview mode: image

    Note: I was able to fix it with:

    .CodeMirror-foldgutter {
      width: 0px !important; /*<---- edited this line!*/
      display: none;

    Although I'm not sure if this affected this issue I posted a few minutes ago or and how the toggle icons are displayed.

  • 4

    Tab Sizes in Nested Lists is Off

    When making a nested list of things, with or without bullet points, I use tabs to indent nested elements. The first level of indented items move the cursor pretty far over, but the 2nd tab actually makes it move "backwards", and then keeps going. This only applies in Edit Mode, in Preview Mode, the different levels all work fine (with the lines connecting things as they should).

  • 5

    Long Note Names in Quick Switch Issue

    Some of my note names/paths to my notes are longer than the Quick Switch Modal that shows the potential matches to what you are looking for. The Default theme shows them properly, but Discordian has the titles word wrap to the next line, but the other items are "on top" or overlap on the words from the other elements, making it hard/impossible to see what those last words say.

  • 6

    Nested Checklists and Lists don't Align with non-nested ones

    OS: Windows Discordian version: 0.8.5 Obsidian: Version: 0.11.13

    When I want to see checklists and unordered lists in preview, the nested checklist icons and text is more indented than the non-nested checklist items. For ordered and unordered lists, the icon is aligned while the text is not.

    Here is an example of text in the markdown:

    - [ ] task 3
    	- [ ] task 2
    - [ ] task 2
    - [ ] task 1
    	- [ ] task 2
    	- [ ] task 3
    New List
    - line 1
    	- line 1.1
    - line 2
    - line 3
    1. Item 1
    	1. Item 1.1
    2. Item 2

    Here's what the Preview mode looks like: image

  • 7

    When toggling the preview the page sometimes backs to the first line

  • 8

    Windows OS system buttons not visible with Discordian Theme

    As issued by @evanAndez on Discord channel: "When i use Discordian theme, the status bar seems to be hidden. The 'close window' button is not visible too"



    This is probably due to default setting of top titlebar being hidden to imitate Discord app

  • 9

    Folding toggle aligns with center of multiline list item instead of first line

    As reported by @s-kyy here: https://forum.obsidian.md/t/discordian-theme/10880/45

    The list/ header folding toggle buttons are not aligned with the first line of the list item/header only in editor mode. I’d like to have it aligned like in preview mode even if it’s not right next to the bullet.

  • 10

    Images enhancements

    Add few enhancement for images

    • [x] Floating images (preferably with captions if possible in pure markdown + css combination)
    • [x] Image grids
    • [x] Image zooming (might be good idea for grids especially)
  • 11

    Move whole discordian-plugin CSS into theme

    Remove all styling from discordian-plugin styles.css file into the theme.

    This refactor is for ease of development and makes much more sense as the plugin relates only to Discordian theme so there is no need of keeping two separates CSS files

  • 12

    Preview/Edit button only seems to work on the right side

    See attached image - for some reason, when using this theme causes the preview/edit button to be nearly unclickable except from the bottom right corner. image

    Only when approached from the bottom right, does it work as expected.


  • 13

    ipad and mobile support

    Currently the theme has a bit of a scaling issue for ipad and android app. The main frame appears to be slightly off leading to this:


    Goal: Adjusting the main frame slightly in case of mobile version should fix the problem

  • 14

    Cannot Edit File in Editting Mode! This is fixed by Editor Setting, to choose not to show line number!

    2 or 3 month ago, suddenly I could not edit Md file with obsidian. However, I found what is the cause! When I tried other theme, the problem was fixed! So I report this issue! I cannot fully describe this issue only text! So I attach gif!

    When I use this theme in editting mode! https://i.gyazo.com/2a9b887c6c9fec54726282d51056b0d1.gif

    When I use this theme in view mode! https://i.gyazo.com/6734465ee217b2d7d5ae6a735cd31f06.gif

  • 15

    Unclear when headers are links

    There's no way to visually distinguish as to whether a header is also a link to another note. Would be nice if they were a different colour, italics, or had the link icon to distinguish them