Sanctum is now available in Community Themes!
In obsidian, go to Settings ➞ Appearance ➞ Manage, and look for Sanctum.
You can manually install the following theme by:
downloading the CSS file and moving it into the folder .obsidian/themes/ located in your vault folder
rename the css file to Sanctum.css
in Obsidian, go to Settings ➞ Appearance ➞ Themes ➞ Reload themes, and select Sanctum.
Design Principles
Intentional
This theme was made with the intent of clarifying Obsidian’s UI, reducing the unnecessary clutter and keeping what’s essential for an enjoyable and intuitive experience;
Greyscale palette is the same both for light as well as dark theme;
Colour is also used for contrast when hovering and activating elements.
Consistent
Every element is styled according to a predetermined grid, scale, animations (based on IBM’s Carbon Design System) and colours - this conveys consistency throughout the theme;
The theme was created with the intention of using only one workhorse font, used everywhere, but styled differently. Thus the theme comes with only 1 font family - iA Writer’s font family, specifically iA Writer Mono V and iA Writer Quattro V. This font family not only provides the user with an enjoyable experience, but it also comes in variable files, meaning they’re smaller in size, and shouldn’t affect the theme’s performance. It is expected that this font family will be compiled into a single file in the future, which will only make the theme lighter in size, as well as more versatile when it comes to text styling.
Offer a similar enjoyable experience, independently of screen size or device.
Clean
Use of calming colours, only used either to convey importance, or in the note file itself;
The background colour is the same in every element, to reduce visual noise and give a more calming atmosphere;
Elements are related to each other using the rules of visual gestalt. This means that they’re grouped by proximity, in a common region or as a focal point.
Showcase (the following screenshots may be outdated)
Custom Codeblock language - pure-text, that enables you to write text for easy copying;
Custom Link icons;
Image desaturation: better for consistency, they gain normal colour when hovered (credit @kepano);
WYSIWYG hr elements in Edit Mode, as a compliment to Smart Typography. If the plugin is enabled, add and extra dash for it to work;
Active line highlighting;
Folded heading/list indicator (in edit and preview mode).
Plugin Support
Advanced Tables
Breadcrumbs
Calendar
Changelogs
Charts
Checklist
Copy Code Button (it now supports Obsidian v0.12.17’s new code copy button!)
Excalidraw
Gallery
Kanban
Quick Explorer
Sliding Panes (Andy’s Mode)
Style Settings
Templater
(for plugin support requests & issues, refer to Feedback & Contributions)
Disclaimer
The following theme significantly alters Obsidian’s original css, and so is prone to breaking upon new Obsidian updates, as well as being incompatible with custom css snippets. It is also in a very early stage of development, and so quick and sometimes drastic changes may be expected in the near future. Having said that, any and every piece of feedback is appreciated! More customization options will be available in the future.
That is because this theme is in development and hasn’t yet been submitted. As part of the Obsidian October event, I still have some time, and would like to polish it a bit more before submitting.
Thank you for this theme! I love it!!
Unfortunately, it seems quite heavy on Obsidian. Scrolling down in the modal-menu is lacking quite a bit. Looking forward to future updates!
That might not have to do with the theme being heavy, but the blur effect on the background of modals. I’ll be sure to add a note to self, so I add a way to disable that when I add Style Settings support.
Added some mermaid formatting, so it fits the note’s width. Avoid making wide charts, as mermaid svg scales in order to fit, and so may become illegible;
Edited the new obsidian code copy button;
Changed pure-text so it has no left padding and actually has the regular font family instead of monospace like codeblocks;
Changed frontmatter tag hover behaviour;
Changed tooltips;
Made note’s scrollbar visible;
Fixed issue where the titles of opened notes but not being worked on were cropped and bigger. They should now match the active note’s;
Fixed issue where sometimes navigation folder and file names would appear invisible;
When adding a “- - -” (hr) right after a title, they’ll now be close to each other, while still respecting the title’s size (the smaller they are, the closer they are to the hr);
Note’s scrollbars are now visible, as they were a bit of a pain to locate when not at the top/bottom of the document. Same thing for Modal Settings and Global Search Results;
Changed Community Themes and Plugins Modal sizing, as well as their font scales;
Changed a few things in the hotkey menu;
New Dropdown elements;
New Buttons;
Toggles were rescaled;
New Text Inputs. They now have a blue outline when focused;
Simplified <progress> element;
collapse indicator in ordered lists now keeps distance when the number gets higher than 9;
Some adjustments to the sync menus;
This theme is now compatible with the new community themes menu (Obsidian v0.12.17);
YAML container can now be visible. It will probably change its appearance in the future, though;
There was an issue navigating the prompt with keyboard only. It should now be working as expected;
Fixed folded heading/list indicator in edit and preview mode, and added it to the feature list. Keep in mind that it doesn’t work on loose lists;
Fixed some list marker styling. Sometimes when coupling ordered lists with unordered lists, the styling wouldn’t work. It should now work(as long as people don’t go crazy with it);
Find and Replace should now look better;
Scheduled and Rescheduled task icons are now greyscale;
Issues have been addressed and should have a solution next release!
The PR has also been merged, for people who use Sliding Panes:
Extends Sliding Panes support by vertically aligning file titles when rotated. Icons are also aligned.
(ake sure to only download the .css file on the github, not the latest release.
Padding of sidebar tabs is rather extreme. At the top of this screenshot you can see how much space is between the tab icons; such that one of the icons is nearly completely crowded out of visibility; it has been pushed past the right edge of the sidebar.
Highlighted text, due to the text styling, looks kind of blurry and is hard to read. IMO, doesn’t match the feel of the rest of the theme. Maybe this is borderline up to personal preference, but maybe you will think it’s a little hard to read too. See example.
Regarding the button padding, I’ve made it intentionally so that there’s a good white space balance, and so button hierarchy is preserved (needs to be bigger than the “subordinate” icons below it). I have also realized, however, that people who like/need to use a lot of plugins/tabs and don’t have much screen real estate to spread them around, end up experiencing that problem. Having said that, I’ll still keep it as a default, but might add it as a Style Settings option.
For the highlighted text - I agree with you, and have been thinking of an alternative!
I’ve added both to my theme’s kanban. Thank you for your feedback, and I hope you continue to enjoy Sanctum!
Thanks for your consideration. I have one more question at the moment. As you’ve correctly guessed, I’m on a fairly small screen (small laptop). For this reason (but not only this reason), I would really love to modify this theme to reduce the size of the headers and mess with their bolding. I looked at the CSS but it’s over my head. There are so many different entries for headers. Is there a way to do this?
There will be! Someone has already requested it over on the github repo, and I’m thinking of a good way to change the headings, so they still keep their adaptable sizes. I just need to mess around with the variables and see if what I’m thinking of works.
