Sanctum Theme

136701698-2464f5d0-30d5-4ee5-9261-4cca96448192

Click the Image above to go the the Github Repository


Sanctum’s a minimalist theme with the aim of creating a serene space of retreat, for thought and uninterrupted work.

Recommended Plugins


Installation


You can manually install the following theme by:

  1. downloading the CSS file and moving it into the folder .obsidian/themes/ located in your vault folder
  2. rename the css file to Sanctum.css
  3. in Obsidian, go to SettingsAppearanceThemesReload 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)


Preview Mode

Edit Mode

Modal

Prompt

Resize Handles

  • Resize Handles are understated, until hovered.

Features


  • Variable headings - they’ll change size depending on screen size;
  • Custom icons (as well as custom file icons!);
  • Sidenotes (credit @SlRvb);
  • Multi-Color Highlights (credit @Atlas);
  • Custom Checkbox / Task types;
  • 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.

8 Likes

Looks interesting. “Sanctum” does not appear in the community themes available under v0.12.17.

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. :slight_smile:

2 Likes

I’ll hold out till November! You have my vote (if we’re voting) :+1:

1 Like

There’s a jury, but thank you for the sentiment :wink:

Might be useful to post the URL to your Github page here. :wink:

… from the OP’s first image / header, which links to the theme on GitHub.

Angel

1 Like

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! :smile:

Added small text so it’s more comprehensible. :slightly_smiling_face:

1 Like

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.

1 Like

Sanctum v0.2 is here!

Link: Release Sanctum v0.2 · jdanielmourao/obsidian-sanctum · GitHub

Changelog:

  • Edited collapse indicators in Outline;
  • Vertically centered titlebar text;
  • 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;
  • New Breadcrumbs Matrix icon;
  • Image desaturation now supports Ozan’s Image in Editor plugin.
  • Adjustments to mobile:
    • Menus now made use of the screen’s full width;
    • Workspace drawers, aka left and right pane’s have had their width adjusted, among other things;
  • Minor fixes.

Next update addition: Style Settings support!

I submitted 2 issues on your Github issues page.

Issues have been addressed and should have a solution next release! :slightly_smiling_face:
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.

Sanctum v0.2.1 is released!

Changelog:

  • Merged a PR fixing Sliding Panes header alignment;
  • Fixed Sliding Panes Header title shift on active notes, as well as the box-shadow of the panes, to be consistent with the theme;
  • Changed Graph Controls so they have less opacity, and make it possible to see the graph that otherwise would be hidden by them;
  • Edit Mode insertion caret/text input cursor now uses accent colour;
  • Small edits on settings menu;
  • Added scrollbars to file nav and settings modal;
  • Added loading animation when looking for plugin updates;
  • Added Style Settings support:
    • Accent Colours;
    • Highlight colours;
    • Edit Mode Tasks class toggle;
    • Relationship Lines in Preview Mode (new!), including alternating option!;
    • default icons toggle;
    • Preview Mode Line Width;
    • Preview, Edit, UI and Mono and Heading fonts are now customizable;
  • Added styling to Outliner’s List Style Improvements;

Really nice! I like it a lot–love the font.

Two issues I’m seeing:

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

image

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

image

Thanks for a cool theme!

1 Like

Hi! I’m glad you’re enjoying the theme so far!

  • 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. :slight_smile: Thank you for your feedback, and I hope you continue to enjoy Sanctum!

2 Likes

Thanks for your consideration. :slight_smile: 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. :slight_smile:

1 Like

Sanctum v0.2.2 is here, and finally available in Community Themes!

Changelog:

  • Fixed issue where renaming an active file in the file explorer made the background dark and the text invisible;
  • Changed “g”s to an alternate glyph;
  • Made buttons use iA Writer font;
  • Changed highlights so they better fit the theme. They now follow the style of National Geographic! :blush:
  • Changed the way codeblock background is setup. Cursor and selections should now be visible;
  • Style Settings additions:
    • Line width selector is now a slider;
    • Added Highlight Text Colors to aid with legibility, depending on the colors selected;
    • Added “Disable Animations” option to style settings;
    • Added a “No Background Blur” option;
    • Added “Status Bar on top” option. This removes the bottom bar, but makes the icons unclickable;
    • You can now change the side padding of header tab icons;
    • Added “Show Full Titles”, which makes the entire file/folder title visible. You can also hide folder or file icons, as well as show their full titles;
    • Added Customizable Heading Sizings. They now adapt according to percentage, still adapting to screen size;
    • You can now disable scrollbars (in settings, global search view, notes and file explorer!);
    • You can now toggle Relationship Lines for the File Explorer;
    • You can now center tables on toggle, as well;
  • Preview Font now applies to Kanban Boards;
  • Removed padding from inline code;
  • Unlocked note text size. You can now Ctrl+Scroll like in regular ‘vanilla’ obsidian;
  • Other small changes.
1 Like

@looper: this is a way to change header sizes

/* Change header size in Edit mode */
.cm-header-1 {font-size: 28px; font-weight: bolder;}
.cm-header-2 {font-size: 25px; font-weight: bolder;}
.cm-header-3 {font-size: 22px; font-weight: bolder;}
.cm-header-4 {font-size: 20px; font-weight: bolder;}
.cm-header-5 {font-size: 18px; font-weight: bolder;}
.cm-header-6 {font-size: 16px; font-weight: bolder;}
  
/* Change header size in Preview mode */
.markdown-preview-view h1 {font-size: 28px; line-height: 118%; font-weight: 600;}
.markdown-preview-view h2 {font-size: 25px; font-weight: 600;}
.markdown-preview-view h3 {font-size: 22px; font-weight: 600;}
.markdown-preview-view h4 {font-size: 20px; font-weight: 600;}
.markdown-preview-view h5 {font-size: 18px; font-weight: 600;}
.markdown-preview-view h6 {font-size: 16px; font-weight: 600;}

If you are not interested in the font-weight you can delete those elements, but leave the closing } in.

Furthermore, if you click on the Gitlab link in the topmost comment on this page you’ll find many interesting snippets.

1 Like