Theme: Prism

Hey everyone! :wave:
The Prism theme development was initially kickstarted by working on it for Obsidian October 2021 . The theme won a Runner-Up award :trophy:. Now with the release of Version 2.0.0 I realised it’s been missing a Forum thread so here it is!


Prism aims to be a Comprehensive, Highly-Customisable and Elegant Light/Dark Theme for Obsidian.

:sparkles: Key Features

  • 8 Hand Crafted Colour Schemes.
  • 4 Accent Styles and 10 Preset Accent Colours.
  • Highlight System based on the <mark> tag.
  • Customisable app background options.
  • UI customisation including position, alignment and modification of various elements.
  • Independent options for the Light and Dark variants.

… and plenty more available in Style Settings!

:rainbow: Colour Schemes

:thinking: How to use Prism?

Prism is available to download in Obsidian’s Community Themes.
Style Settings Plugin Required!

The theme is currently optimised for Desktop use.
(Mobile support will be considered in the future)

:speech_balloon: What can I do to help?

I mostly focus on polishing the existing code, adding support for new Native / Community Plugins and any outstanding issues reported on the Github Repository. Would love to see how people use their Obsidian with Prism, so please share some screenshots and anything you would like for me to improve / functionality you would like to see!

:link: Useful Links

Github Repository - Prism Theme
Report Issues / Request Features - Prism Theme Issues/Feature Request
Latest Releases - Prism Theme Releases

:orange_heart: Support the Development!

Star the Prism Theme Repository

GitHub Repo stars

If you enjoy using Prism, please consider donating

12 Likes

image

How can the 2 gaps, indicated by the white arrows (sorry, I did not know how to give them a different color) be closed?

In other words, at the top the purple box should border the pink status bar (Mac), and on the right it should border the edge of the screen.

The border around UI elements can be tweaked in Style Settings (User Interface → Window Adjustments → Window Gap (px)). How come you don’t have the sidebar on the right or the Titlebar in Obsidian? The gap is set to be there to help with having an edge for resizing the workspace windows. It’s setup to go around the entire note window because of how windows sit next to each other when you open more notes to the sides or above/below.

@Damikiller37 thanks, that worked. I set the gap to its minimum, which is 1 instead of zero, I cannot reach zero, so there is still a tiny gap. Why?

Regarding the sidebar on the right, it is hidden because I only use it occasionally. I have bound a hotkey (⌃ ⌥ R) to it.

As for the titlebar, I have it hidden with the Hider plug-in.

Hi @Damikiller37 , thanks for this great theme. Prism is my favorite (Pine flavor), and I’m now using it as my default theme (along with Style Plugin).
However, I have a problem. Perhaps I’m slightly color blind, but I have difficulty seeing and finding the cursor. Are there any ways I can emphasize the cursor? Thanks in advance, and I look forward to future improvements!

@elefant

Fat cursor:

.cm-cursorLayer .cm-cursor {
  border-left-width: 5px;
}

As I mentioned the reason why the gap needs to exist is because that’s where the resize handles for the Workspace windows are. If it was 0 you would be stuck with the window size that is set when you open multiple notes and now way to change it. I’ve tried to tackle this issue some time ago and it’s proven to be very tricky with how you can place notes any way you like. Also I’ve not really accounted for people removing the Titlebar or the sidebars.

As @Klaas mentioned you can temporarily use his code as a snippet. I’ll see what I can do with it to make it more prominent (Color? Thickness? Faster animation?).

OK, thanks for the explanation, I understand. 1 as a minimum makes sense now.

It might be something to consider, seeing Hider has been installed 35,000 times.

@Damikiller37 I checked the Style Settings but could not find it: how can I hide/eliminate the relationship lines in bullet point lists?

@Klaas I haven’t done any customisation for the Relationship lines in Bullet point lists. They have been natively added fairly recently in Obsidian. I could look into adding a toggle to remove them if that’s something that is brought up more frequently. For now you should be able to remove them with this snippet:

.markdown-source-view.mod-cm6 .cm-indent::before,
.markdown-rendered.show-indentation-guide li > ul::before,
.markdown-rendered.show-indentation-guide li > ol::before {
    display: none;
}

P.S. A lot of existing Prism customisation focused on the UI and Plugins so any Editor specific improvements / feature requests are welcome. I’ve been careful not to create a kitchen sink of features on the mentality of “because I can” and rather add things that people actually want and will use. I also try to avoid adding things which are specific to a user or two, because in most cases those can be solved by a snippet.

@Damikiller37 I checked it out in the native Settings, and indeed, the feature is there is called Show indentation guides. So I just toggled it off.

I am surprised they added that to the native settings, but at least it is togglable.

As for your feature policy, that seems to be a sensible one, and you have done a good job with the theme.

2 Likes

Hi there! I love the theme so far, but I’m having an issue with changing the graph line colors. I’m just using the snippet:

.graph-view.color-line {
color: #a3a0fc;
}

And it works on default theme and other themes, but something in Prism seems to override it and make it gray. How would I go about changing the line color?

@enzorocksmith try adding !important to the 2nd line:

color: #a3a0fc !important;

1 Like

Worked, thanks for the fix :slight_smile:

I’ve added this as a feature alongside all the other Graph customisations in Style Settings. It will be available in v2.1.0 when it’s released.

1 Like

:gem: Prism v2.1.0

:star2: New and Improved
• Mobile is now officially supported :partying_face:. Let me know if you have any issues. Tested on Android phone and tablet.
• Styling for the Query block. Visually matches embedded backlinks.
• Styled the Empty State container element.
• Added Custom Icons for the Dangling Links Nav Buttons.
• Increased the contrast of Text Selection Background in Light Themes.
• The Gutter Line Numbers are now back to being top aligned the same way as default theme.
• Replaced the default Vault Banner icon with embedded SVG. Theme works fully offline now :partying_face:.

:toolbox: Added to Style Settings
• Option to change the Header Text Colour (Editor ➜ Headers ➜ Header Text Color).
• Option for Custom Readable Line Length (Editor ➜ Custom Readable Line Length(px)).
• Option for Graph Lines Customisation (Appearance ➜ Graph Color Customisation ➜ Light/Dark Theme ➜ Graph Lines Color).

:jigsaw: New Supported Community Plugins
• Query Control.

:warning: Breaking Changes
You will likely need to set the following again. Sorry!
• The way Graph colours are set in the code have been reworked.
• Header Margin renamed to Header Padding and now works in all views.

:adhesive_bandage: Fixes
• Fixed the lack of top padding inside of callouts.
• Reverting from using font-variation-settings to font-weight due to it’s incompatibility with Mobile and prior issues caused by it.
• Fixing a typo for the Emoji font used in Style Settings headers.
• Fixing wrong classes used for background colour.
• Background colour inside tables now matches in all views.

:hammer_and_wrench: Behind the Scenes
• Over 14k downloads now :star_struck:.
• Theme size: From 11918 to 13762 lines | From 1396kb to 1478kb.

:link: Github Release Link

:iphone:Mobile Showcase
https://imgur.com/a/C5OcSoW

:coffee: Support Prism Development

Unfortunately the theme still doesn’t work for iOS. Below is a screenshot of my homepage on mobile. As you can see, nothing is showing up.

:gem: Prism v2.1.1

Quick Fixes

  • Fixed workspace rendering issues on iOS; Edit views should now display correctly.
  • Other small fixes related to iOS and mobile in general.

If you encounter other issues with mobile (iOS specifically) let me know :slightly_smiling_face:

In dark mode I am using the Pine theme (I love it), but selecting text needs a higher contrast, while the global search box could also do with a background color change.