{"id":13740831,"url":"https://github.com/radekkozak/discordian","last_synced_at":"2025-05-08T20:32:52.784Z","repository":{"id":45396206,"uuid":"314210690","full_name":"radekkozak/discordian","owner":"radekkozak","description":"Obsidian dark theme inspired by Discord","archived":false,"fork":false,"pushed_at":"2021-12-15T23:41:24.000Z","size":8719,"stargazers_count":107,"open_issues_count":15,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-15T10:43:26.142Z","etag":null,"topics":["css","discordian","obsidian","obsidian-md","obsidian-theme","theme"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/radekkozak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-19T10:19:09.000Z","updated_at":"2024-11-05T13:31:19.000Z","dependencies_parsed_at":"2022-09-10T16:52:21.677Z","dependency_job_id":null,"html_url":"https://github.com/radekkozak/discordian","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radekkozak%2Fdiscordian","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radekkozak%2Fdiscordian/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radekkozak%2Fdiscordian/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/radekkozak%2Fdiscordian/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/radekkozak","download_url":"https://codeload.github.com/radekkozak/discordian/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253145097,"owners_count":21861185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","discordian","obsidian","obsidian-md","obsidian-theme","theme"],"created_at":"2024-08-03T04:00:52.659Z","updated_at":"2025-05-08T20:32:49.677Z","avatar_url":"https://github.com/radekkozak.png","language":"CSS","funding_links":[],"categories":["[Custom-folder-files-tree](code/css-snippets/custom-folder-files-tree.css)","CSS","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"![](media/discordian-logo.png)\n\n![GitHub release (latest)](https://img.shields.io/badge/dynamic/json?style=for-the-badge\u0026color=6f5dc8\u0026label=Release\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Fradekkozak%2Fdiscordian%2Fmaster%2Fpackage.json)\n\n## beautiful Obsidian dark theme inspired by Discord\n\nDiscordian is a dark theme designed to give all [Obsidian](https://obsidian.md) power users visuals they recognize\nand appreciate when gathering on Discord servers to discuss all things Obsidian. **Seamless Discord experience right\nback in Obsidian** is the keyword here. We, Obsidianites, PKM \u0026 Zettelkasten lovers, spend there so much time it's\nalmost logical to have the same visual experience extended to our beloved app ([see screenshots](#screenshots))\n\nTheme, apart from deriving its visuals from Discord app, strives to serve as solid dark theme. An honest default\n. This means it offers an unobtrusive, minimal and easy-on-the-eyes experience with a hint of subtle changes in\n Discord's color palette.\n\nDiscordian, of course, fully supports [popular Obsidian's community plugins](#plugin-support) but also has its own\n[Discordian Plugin](https://github.com/radekkozak/discordian-plugin) going on which is very much recommended. If you\nlike to have more fine-grained control over some aspects of the theme go ahead and download it. You will be so much\nhappier with the **additions of Writer Mode, Paragraph Focus, Flat Andy's Mode**, controllable line length, fonts and\nother things.\n\n**IMPORTANT**: For best experience possible, **please** [download the fonts](https://github.com/radekkozak/discordian/raw/master/media/fonts.zip)\n**and install them in your system before using the theme.** Provided fonts closely resemble those in Discord app and\nare sort of required here.\n\n## Disclaimer\n\nDiscordian theme is provided *as is*, meaning it is a product of my own personal experience, and shows the theme as I\nuse it in Obsidian app on daily basis within macOS environment. Please bear in mind that even though I did my best to\npolish it enough to be used with the latest version of Obsidian some quirks and visual discrepancies may (or not\n) occur as I had no means of testing it on other platforms.\n\nAs this theme modifies many parts of Obsidian UI it's given that it might break some things with future app updates\nor with your own css snippets. However, I do plan to earnestly support it so as Obsidian app will progress so it will\nDiscordian theme. I am also open to any [contributions](#contribute) : be it a simple suggestion, bug report or your\nfix via PR.\n\n## Features and goals\n\n- Easy on the eyes, lean design with focus on clean visuals (see [screenshots](#screenshots))\n- Promotes writing experience first (Writer Mode, Paragraph Focus Mode).\n- *Keyboard as Obsidianite's best friend* (as power users we love us some keyboard shortcuts)\n- **Settings panel as seen in Discord** (along with fancy toggle switches)\n- [Pretty Task lists](#task-lists) - **also in Editor mode** !\n- **Beautiful graph view**\n- **Seamless transclusions**\n- Snappy performance (stripped out many animations)\n- [**Images enhancements**](#images-enhancements) : **image grids, zooms, floating images with captions !!**\n- Bullet points relationship lines extravaganza as default\n- Graceful dark theme audio in place of ugly default\n- New and improved **codeblocks with delightful aesthetics**\n\n## Plugin support\n\n- [Sliding Panes](https://github.com/deathau/sliding-panes-obsidian) (aka Andy Mode)\n- [Calendar Plugin](https://github.com/liamcain/obsidian-calendar-plugin)\n- [Hider Plugin](https://github.com/kepano/obsidian-hider)\n- [Advanced Tables](https://github.com/tgrosinger/advanced-tables-obsidian)\n- [Emoji Toolbar](https://github.com/oliveryh/obsidian-emoji-toolbar)\n\n## Some additional remarks\n\n### Hidden things\n\nTo provide simple and clean UI that mimics Discord app Discordian theme hides top title bar and status bar as default\n. **You can however enable them and bring them back via accompanying** [Discordian plugin](https://github.com/radekkozak/discordian-plugin) (this is preferred way) or, if you decide to go solo, by commenting appropriate parts of CSS.\n\nI could provide more user-controllable elements for hiding if requested but to not reinvent the wheel i sincerely\nrecommend excellent [Hider Plugin](https://github.com/kepano/obsidian-hider) by @kepano - I use it myself for\nsimplifying UI even more. Discordian of course, as mentioned before, is fully compatible with it.\n\n### Task lists\n\nThe way the fancy task lists works in editor mode is via quite **hackish** means. Therefore, it's mandatory to have\n`Smart indent list` option enabled in Obsidian. From my own experience I would also recommend having `Toggle\nchecklist status` under some hotkey. This would definitely make working with tasks / checklist list a blaze. I know I\n love it that way!\n\n### Images enhancements\n\n**NOTICE: as of version 0.11.3 Obsidian changed the way images are grouped which made the flexbox approach provided\nby Discordian's image grids no longer possible**.\n\nNot wanting to deprecate this feature which everyone seems to really like i decided to use @Lithou idea and hackishly\n  make it work again with the theme - **some restrictions apply**. Unfortunately with new version of Obsidian there is\n   no way to make the grid images on the same line of same height (like before). **Although current solution may look\n   similar or even the same depending on images, it will now look and behave more like masonry-ish grid**.\n\n#### Image grids\n\nUsing Obsidian's new `cssclass` directive in YAML you can achieve image grids like below with\n\n```md\n---\ncssclass: img-grid\n---\n```\n\n![](media/screenshots/discordian-img-grid.gif)\n\n**RESTRICTIONS**: This works with images if\n\n1. no pipe is used when calling an image i.e. `![[example.jpg]]` - **recommended default and simplest way**\n2. or if your alt text in pipe contains a period `.` i.e `![[example.jpg|Figure 1. Some caption]]` (it will not\ndisplay the caption though if using `cssclass: img-grid` alone)\n\n**EXPLANATION:** when no pipe is used (meaning no custom alt attribute is added by the user, Obsidian will made the\nalt attribute equal to the `filename.ext`. **Image grids feature targets exactly those image embeds with an alt\nattribute that has a period in it - ANY SUCH IMAGE**. This is the only possible solution for now after Obsidian 0.11.3 changes.\n\n#### Floating images - with captions !! (work as before)\n\nHave your images the way you want: full in center (*default*) or floating left or right with your text wrapped around\n them. **No messing around with HTML markups**, no polluting your markdown. **Fully using current Obsidian image\n embeds syntax** along with image resizing.\n\nUsing Obsidian's new cssclass directive in YAML you can have properly looking captions\n\n```md\n---\ncssclass: img-captions\n---\n```\n\nand then in your note you can do\n\n`![[filename.png#position|caption|size]]`\n\n_options_\n- **position**: `left` or `right` (omitting assumes default which is center)\n- **caption**: simply your caption (**note**: no markdown within caption and **no period**)\n- **size**: `width x height` as explained in [Obsidian Help](https://publish.obsidian.md/help/How+to/Embed+files#Resize+images)\n\n_NOTE_: **positioning** `left` or `right` **and resizing** is working _EVEN WITHOUT YAML_ directive. `cssclass` is\n only for still allowing simple embeds without polluted captions (Obsidian fills image `alt` with filename by default)\n\n![](media/screenshots/discordian-floating-imgs.jpg)\n\n![](media/screenshots/discordian-floating-imgs-same-paragraph.jpg)\n\n#### Image grids AND image captions IN ONE NOTE (Discordian v0.8.6+)\n\n![](media/screenshots/discordian-img-grid-captions.jpg)\n\nBefore version 0.8.6 (and prior to Obsidian 0.11.3 changes) i advised everyone to use `img-grid` or `img-captions`\nseparately as CSS in those features is applied globally to all images in the note.\n\n**From version 0.8.6 of Discordian theme** - with some restrictions - **you can have both image grids and image\ncaptions in one note** - BUT please consider this feature more or less experimental.\n\n```md\n---\ncssclass: img-grid, img-captions\n---\n```\n\n**RESTRICTIONS** (only for both features together):\n\n1. Images with image captions in the same note cannot have period in it (see how [**Image grids**](#image-grids) work\n now)\n2. Images within image grids with no piped caption text from user will display `filename.ext` per Obsidian's default\nbehaviour).\n3. If you want your images within image grids with your custom captions then use your piped caption WITH period `.`\nin it. You can simply make it the end of your sentence or sth like this\n\n```md\n![[example.jpg|Figure 1. Example caption]]\n```\n\n**NOTE**: I still advise using these image features in your notes separately. It will make your life easier and save\nyour from headache of remembering the inner workings.\n\n---\n\n#### Image zooms\n\n![](media/screenshots/discordian-img-grid-zoom.gif)\n\n## Screenshots\n\n![](media/screenshots/discordian-graph-view.png)\n\n### Discord experience\n\n![](media/screenshots/discordian-settings.png)\n\n![](media/screenshots/discordian-commands.png)\n\n![](media/screenshots/discordian-tables.png)\n\n![](media/screenshots/discordian-tasks.png)\n\n![](media/screenshots/discordian-codeblocks.png)\n\n### Discordian in Andy Mode (fullscreen)\n\n![](media/screenshots/discordian-andy-mode-fullscreen.png)\n\n### Discordian in Writer Mode\n\n![](media/screenshots/discordian-editor-mode.png)\n\n### Discordian in Fullscreen\n\n![](media/screenshots/discordian-full-mode.png)\n\n## Contribute\n\nFound some quirks? Want to propose some new functionality?\nYou can easily follow these simple steps:\n\n1. [File an issue](https://github.com/radekkozak/discordian/issues/new) discussing proposed changes or found bug\n2. If you want to contribute solution on your own please\n    - clone this repo\n    - `npm i` to install dependencies\n    - create `config.json` from `config.json.example` and set it accordingly\n    - `npm run dev` to start compilation and development in watch mode\n    - do your magic (all relevant css files are in `.theme` directory )\n3. Commit your work\n    - please run `npm run lint` before to spot any CSS issues\n    - use commit message that best describes changes you've just made. If possible, *link it to relevant issue*\n    - **DO NOT build or commit `obsidian.css` directly** ! It will be autogenerated and handled by CI server.\n\nNow sip your coffee and wait for my swift response or PR merge. Thanks !\n\n## Credits\n\nMany ideas and css solutions are inspired by or come from an amazing Obsidianites both on\n[Obsidian's Forum](http://forum.obsidian.md/) and Discord channel: @kepano @death_au @nickmilo @tallguyjenks\nto name a few. Thanks to all of you for shared knowledge and being part of Obsidian community.\n\n## License\n\n[MIT License](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradekkozak%2Fdiscordian","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fradekkozak%2Fdiscordian","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fradekkozak%2Fdiscordian/lists"}