Discordian Theme

Hello everyone! Radek from Poland here, author of Discordian - dark theme inspired by Discord which from now on you can find listed under community themes in Obsidian. https://github.com/radekkozak/discordian

First of all, as this is my first post i wanted to say: Happy New Year everyone ! Hope this one will be less pandemic and will find each of you in better place than the previous one.

Anyway, to quickly introduce myself: i am photog, writer and Android dev by profession. I’ve been managing my personal notes for years, historically with pen and notebook, then slowly with NV, NValt, with few hiccups of Bear and the Archive app. Needless to say i am avid Zettelkastener and now - which is kind of obvious - big Obsidian fan. I moved all of my notes to Obsidian somewhere in the midst of 2020 and i’ve been following this amazing forum and Discord channel for some time (mostly reading and sitting quiet as i am rather introvert guy who ditched social media eight years ago;)

Here i want to thank you all for the knowledge you give out on these forums. PKM and Zettelkasten realms are not so known in the place where i live - or developed as an idea and practice i should say - so i am even more grateful i found this helpful community. Not to make this longer than it has to be: since i’ve made Obsidian my default / to-go app for personal Zettelkasten and learn a ton from this place i decided to give something back to the community.

Hope you will enjoy this theme. Please consider it beta as it is product of my personal experience that i use on my daily basis. I did my best though to polish it enough to be used with the latest version of Obsidian and listed plugins. Wanted it to be simple, flat and unobtrusive but still with a flair and of course idea was to have a Discord look.

If you find a bug or ways to improve it - please let me know or better still file and issue or even PR on Github. There is also Discussions panel on Github if you prefer it that way Discussions · radekkozak/discordian · GitHub

You can also observe status of your issues by checking what i’m currently working on here: https://github.com/radekkozak/discordian/projects/2

Happy to accommodate and receive contributions from all of you !


Usage

  1. 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.

  2. Install the Discordian Theme Plugin (listed in community plugins) This plugin is not required to use Discordian Theme, but highly recommended. It gives you more fine-grained control over some aspects of the theme along with Writer Mode, Flat Andy Mode, Paragraph Focus with customizable fade out, Readable line length and so on

Plugin support

Screenshots

Credits

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 you once again for shared knowledge and being part of Obsidian community.

17 Likes

Nice work here, very impressive. Can’t wait to try it out!

1 Like

Thanks for the kind word Nick - appreciated !

1 Like

Discordian Theme - new 0.3.0 version

https://github.com/radekkozak/discordian/releases/tag/0.3.0

Notice: for everyone who had an issue on Windows machines with provided fonts - this now has been fixed. I am no font magician but with the help of my good designer friend we were able to fix it. Issue was because of some WinAscent and fractionals things i do not pretend to fully understand. Important thing is that it all should behave correctly now.

On OSX those issue were not apparent but it is possible above fix helps there too

Important: Catamaran SSm fonts provided in 0.3.0 release needs to be re-installed in the system to take effect

https://github.com/radekkozak/discordian/releases/download/0.3.0/fonts.zip

Features:

  • adds styling and support for new internal queries block
  • add styling and support for nested tags

Fixes:

  • Fonts in Windows OS being weirdly cut-off (Catamaran SSm fonts needs to be re-installed from the provided fonts.zip package)
  • Discord-like toggles rendering incorrectly - now fixed
  • Active file bullet not showing anymore
  • Folding visuals in Obsidian 0.10.6
  • Tags in Editor and Preview mode
  • Count boxes in sidebar panes alignments
  • Visual discrepancies in File Explorer

1 Like

Discordian Theme & Discordian Plugin - new 0.5.0 versions

With this release 0.5.0 of both theme & plugin many bugs were squashed and bunch of fixes were added. Especially for Windows OS users so if you were one of them this update is very much recommended

https://github.com/radekkozak/discordian/releases/tag/0.5.0

https://github.com/radekkozak/discordian-plugin/releases/tag/0.5.0

Along with fixes new user-controllable option was added into Plugin as per many requests: ability to switch to original Discord’s markings / see below

Features:

  • Original Discord markings option via plugin (bold, italics, quotes, inline code as seen in Discord app) -

Fixes:

  • Pretty Tasks in Editor mode are now behaving correctly on every level #12
  • Long Note Names in Quick Switch selection all working now #13
  • For all Windows OS users bunch of fixes in UI and bugs squashed
  • Monospace fonts now more aligned with those seen in Discord
  • Tags shifts in Editor and Preview
  • Clusters of buttons are now look as they should #7
  • Tables when bigger font size in plugin chosen
  • Metadata block visuals
  • More workspace via nav action buttons
  • Search input container margin shift
  • Active file visuals are now independent from HTML entities

1 Like

Hello, i’m having a trouble with table. It is off to the right and horizontal scrollbar does not appear.

hello! i really enjoyed this theme, it’s so easy on the eyes ^^
i find the underline instead of highlight interesting, how can i recreate it in my other vaults that i have different themes on?

@porings: see @Steve_yang’s code.

yeah i asked both on this thread and on discord, thanks though!

@porings: so, on Discord your pseudonym is “ro;ro”?

yep!!

@porings

If you want toggle highlight symbols , remove or comment this code:

 .cm-formatting-highlight {
      display:none
 }

then, add this code:

   /* Toggle highlight,strong,italic symbols */
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-strong,
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-em,
    div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight
    {
        display: none !important;
        position: relative;
    }

Of course , if you’ll not remove highlight symbols anymore, keep original.

BTW.
You can use 3px replace thick.

in border-bottom:3px solid #ff6a00;

1 Like

Discordian Theme & Discordian Plugin - new 0.6.0 versions

With this release 0.6.0 of both theme & plugin many bugs were squashed and bunch of fixes were added. Especially for lists

https://github.com/radekkozak/discordian/releases/tag/0.6.0

https://github.com/radekkozak/discordian-plugin/releases/tag/0.6.0

Along with fixes new user-controllable option was added into Plugin as per many requests: ability to toggle Relationship Preview Lines

Features:

  • Make switching between Editor and Preview as seamless as possible (#15 and #16)
  • Add toggleable Relationship Lines option (please update Discordian Plugin to 0.6.0)
  • Hovers in File Explorer as in Discord app ( #17 )
  • more style for Metadata block

Fixes:

  • Ordered lists not rendering correctly #14
  • Popover shifts after WYSIWYG
  • More concise community plugins panel
  • Seamless notes transclusion
  • Font alignment in tasks when bold and italic

Hi mate, sorry for the long delay - somehow i was logged out of forum and haven’t seen any notifications about the question. Please let me know if you managed to recreate the highlights idea. If not i’m happy to help

/cc thank you @Steve_yang and @Klaas for intervening on my behalf

Oh, and thank you for your kind words. Happy you like the theme !

Hi Guillaume, sorry for the delay as well, if you’re on Discord it’s easier for my to spot the questions there, the forum likes to log me out and somehow i don’t see any new posts to the thread.

Anyway, i’m eager to solve the problem for you. It would be helpful if you could send me over (here / discord or at github) the whole note - or at least the table alone so i could try to recreate the problem in Obsidian. Also, do you have Readable Line option enabled & in Discordian Theme settings any particular value for it ? (like 40rem or sth)? This would all help

Also, please check out 0.6.0 version of plugin & theme - maybe the problem is solved there

As to horizontal bars - they are designed by me like for the sake of cleaner visuals - BUT they DO work inspite of this. Just scroll with Shift and you should be good (it is also the case for the codeblocks that are longer than actual Readable line length settings.

/cc @Gadwood

Hey, this is a really mature theme, I’m having a lot of fun using it! This and Obuntu have become favorites for different moods.

One question, is there a way to preserve the bold text weight in preview mode, similar to how you see bold text in editor mode? I haven’t much experience with .css, and the few tricks I know aren’t helpful here!

All the best

Edit: After a little more use, I was curious if you know how to add a little space between the gutter and the text. There’s some crowding between line numbers with the fold arrows, hashes, etc.

Hi @captaincaed, thank you for the good word, glad you like the theme mate and sorry for a slight delay

Answering your question: i think the bolds in text were overwritten somehow in latest Obsidian version - i’m going to make them behave consistently in the next release of the theme which will fix few other issues. Meanwhile you can use the snippet i have attached here - you can put in the .obsidian/snippets folder and activate in Options->Appearance->CSS Snippets section. All should be A-OK after that in terms of bolds

As to the spacing you mentioned - can you attach some screenshots ? or tell me what options you’ve activated in Obsidian’s menu causing this. I assume “Line numbering” + “Folding” (both ?) but just want to make sure.

Thanks for the feedback, very much appreciated
R

discordian-bold-text-snippet.css (154 Bytes)

Wow, thank you for the patch, that’s really nice!

As far as the spacing goes, I’ve attached a couple screenshots that will hopefully tell the story. It seems less pronounced today, the recent Obsidian update may have helped out a bit. Still having fold arrows overlap with bullets. No longer seeing overlap with the row numbers.

edit: current version v0.10.13

image



One final shot of the row numbers overlapping with the main text
image