%% ----- Badges ----- %%     %% ----- Badges ----- %% %% ----- Do not edit this section ----- %% # Prism Repository: [GitHub](https://github.com/damiankorcz/Prism-Theme) Designed by: [[damiankorcz]] Modes: [[Dark-mode themes|dark]], [[Light-mode themes|light]]  %% ----- Do not edit anything above this line ----- %% %% Does the repository or author have any sponsoring links? Uncomment the next line and add them to the author's note. If they don't, please delete the placeholder tag: #placeholder/author %% %% ![[damiankorcz#Sponsor this author]] %% ## Features - [[Themes with Friendly Settings|Friendly settings]]: Supports the [[obsidian-style-settings|Style Settings]] plugin ## Customization Options (Style Settings Plugin) **Appearance**: Options which change how Prism styles Obsidian. - **Accent, Color Schemes and Style**: Main visual options for Prism. - **Light Theme**: - Color Scheme: The `Custom` option allows you to use a CSS snippet with your own colors. Refer to the Prism Wiki guide `Custom Color Schemes` for more info. - Color Scheme Style: Adjusts the style used by the main elements in the UI. - Accent Style: Adjusts the style used by the Accented elements in the UI. - Accent Color Preset: Changes the Light Theme Accent Color around the entire UI. Select from present colors or choose 'Custom' and tune the color in the Custom Accent Color Tuning section below. - Accent Text Color Preset: Adjusts the color used by the text in the Light Theme Accented elements of the UI. - Custom Accent Text Color: Make sure you selected 'Custom' in Light Theme Accent Text Color for this to work. - **Custom Accent Color Tuning**: Make sure you selected 'Custom' in Accent Color Preset for this to work. - Custom Accent Base Color: Accent Base Color should ideally be the lightest of the 3. - Custom Accent Tint Color: Accent Tint Color should ideally be between Base and Text in terms of lightness. - Custom Accent Text Color: Accent Text Color should ideally be the darkest of the 3. - **Dark Theme**: - Color Scheme: The `Custom` option allows you to use a CSS snippet with your own colors. Refer to the Prism Wiki guide `Custom Color Schemes` for more info. - Color Scheme Style: Adjusts the style used by the main elements in the UI. - Accent Style: Adjusts the style used by the Accented elements in the UI. - Accent Color Preset: Changes the Dark Theme Accent Color around the entire UI. Select from present colors or choose 'Custom' and tune the color in the Custom Accent Color Tuning section below. - Accent Text Color Preset: Adjusts the color used by the text in the Dark Theme Accented elements of the UI. - Custom Accent Text Color: Make sure you selected 'Custom' in Dark Theme Accent Text Color for this to work. - **Custom Accent Color Tuning**: Make sure you selected 'Custom' in Accent Color Preset for this to work. - Custom Accent Base Color: Accent Base Color should ideally be the darkest of the 3. - Custom Accent Tint Color: Accent Tint Color should ideally be between Base and Text in terms of lightness. - Custom Accent Text Color: Accent Text Color should ideally be the lightest of the 3. - **Graph Color Customisation**: Define the colors used in the Graph View. In order to see changes you need to refresh the Graph View (restart Obsidian or toggle the Light/Dark theme). - **Light Theme**: - **Graph Lines Color**: The color of a Graph lines connecting Graph Nodes. - Graph Line Presets - Graph Lines Custom Color: Make sure you selected 'Custom' in Light Theme Graph Lines Color Presets for this to work. - Graph Lines Opacity - **Graph Note Color**: The color of a Graph Node representing a note file. - Graph Note Color Presets - Graph Note Custom Color: Make sure you selected 'Custom' in Light Theme Graph Note Color Presets for this to work. - **Graph Note Focused Color**: The color of a Graph Node representing currently focused note file. - Graph Note Focused Color Presets - Graph Note Focused Custom Color: Make sure you selected 'Custom' in Light Theme Graph Note Focused Color Presets for this to work. - **Graph Tag Color**: The color of a Graph Node representing a tag. - Graph Tag Color Presets - Graph Tag Custom Color: Make sure you selected 'Custom' in Light Theme Graph Tag Color Presets for this to work. - **Graph Attachment Color**: The color of a Graph Node representing an attachment. - Graph Attachment Color Presets - Graph Attachment Custom Color: Make sure you selected 'Custom' in Light Theme Graph Attachment Color Presets for this to work. - **Graph Unresolved Color**: The color of a Graph Node representing an unresolved note. - Graph Unresolved Color Presets - Graph Unresolved Custom Color: Make sure you selected 'Custom' in Light Theme Graph Unresolved Color Presets for this to work. - **Graph Highlight Color**: The color of a Graph Node when highlighted. - Graph Highlight Color Presets - Graph Highlight Custom Color: Make sure you selected 'Custom' in Light Theme Graph Highlight Color Presets for this to work. - **Graph Highlight Line Color**: The color of the lines connected to a highlighted Graph Node. - Graph Highlight Line Color Presets - Graph Highlight Line Custom Color: Make sure you selected 'Custom' in Light Theme Graph Highlight Color Presets for this to work. - **Dark Theme**: - **Graph Lines Color**: The color of a Graph lines connecting Graph Nodes. - Graph Lines Presets - Graph Lines Custom Color: Make sure you selected 'Custom' in Dark Theme Graph Lines Color Presets for this to work. - **Graph Note Color**: The color of a Graph Node representing a note file. - Graph Note Color Presets - Graph Note Custom Color: Make sure you selected 'Custom' in Dark Theme Graph Note Color Presets for this to work. - **Graph Note Focused Color**: The color of a Graph Node representing currently focused note file. - Graph Note Focused Color Presets - Graph Note Focused Custom Color: Make sure you selected 'Custom' in Dark Theme Graph Note Focused Color Presets for this to work. - **Graph Tag Color**: The color of a Graph Node representing a tag. - Graph Tag Color Presets - Graph Tag Custom Color: Make sure you selected 'Custom' in Dark Theme Graph Tag Color Presets for this to work. - **Graph Attachment Color**: The color of a Graph Node representing an attachment. - Graph Attachment Color Presets - Graph Attachment Custom Color: Make sure you selected 'Custom' in Dark Theme Graph Attachment Color Presets for this to work. - **Graph Unresolved Color**: The color of a Graph Node representing an unresolved note. - Graph Unresolved Color Presets - Graph Unresolved Custom Color: Make sure you selected 'Custom' in Dark Theme Graph Unresolved Color Presets for this to work. - **Graph Highlight Color**: The color of a Graph Node when highlighted. - Graph Highlight Color Presets - Graph Highlight Custom Color: Make sure you selected 'Custom' in Dark Theme Graph Highlight Color Presets for this to work. - **Graph Highlight Line Color**: The color of the lines connected to a highlighted Graph Node. - Graph Highlight Line Color Presets - Graph Highlight Line Custom Color: Make sure you selected 'Custom' in Dark Theme Graph Highlight Color Presets for this to work. - **Custom Vault Banner**: Custom Vault Banner in the File Explorer with a custom icon option. - Enable Custom Vault Banner: Enables the Custom Vault Banner in the File Explorer. - Custom Vault Banner Alignment: Horizontally aligns the Custom Vault Banner content. - Custom Vault Banner Order: Select the order in which the content appears in the Custom Vault Banner. - Custom Vault Banner Sticky: Make the Custom Vault Banner stick to the top of the File Explorer. - Vault Banner Icon (URL): Customise the Vault Banner Icon. Insert a URL to an image in between the brackets of 'url()'. - **Focused Mode**: Focused Mode fades away UI distractions so you can better focus on your notes. Look in the Prism Wiki for a guide. - Enable Focused Mode: This toggle can be bound to a hotkey! Look for `Style Settings Toggle Enable Focused Mode` in `Settings -> Hotkeys Tab` to bind it. - Focused Mode Style: Select the type of Focused Mode you want to use. - Fade Away Opacity: Set the opacity value you'd like the UI to fade to. - Fade Away Delay: Set the delay value (ms) you'd like the UI to stay active after being hovered over. **Editor**: Settings for elements inside the Editor / Preview area of Obsidian. - Custom Readable Line Length (px): Changes the maximum width of the Readable Line Length (px). Enable 'Readable line length' in the Editor tab in Settings for this to apply. - **Font Specific Options**: Options for the default Sans Serif 3 font. - Alternative lower case 'a' appearance - Alternative lower case 'g' appearance - Alternative '0' appearance (Slashed Zero) - Disable Ligatures - **Headers**: Customisation options for the Headers (H1 - H6). - **Header Font Size**: The sizes are scalled based on the Font Size selected in the Appearance tab of the Settings. - Inline Title Font Size (em) - Header 1 (H1) Font Size (em) - Header 2 (H2) Font Size (em) - Header 3 (H3) Font Size (em) - Header 4 (H4) Font Size (em) - Header 5 (H5) Font Size (em) - Header 6 (H6) Font Size (em) - **Header Text Color**: Options for changing the color of each header type. - **Light Theme**: - Inline Title Text Color Preset - Inline Title Custom Text Color: Make sure you selected 'Custom' in Light Theme Inline Title Text Color Preset for this to work. - Header 1 (H1) Text Color Preset - Header 1 (H1) Custom Text Color: Make sure you selected 'Custom' in Light Theme Header 1 (H1) Text Color Preset for this to work. - Header 2 (H2) Text Color Preset - Header 2 (H2) Custom Text Color: Make sure you selected 'Custom' in Light Theme Header 2 (H2) Text Color Preset for this to work. - Header 3 (H3) Text Color Preset - Header 3 (H3) Custom Text Color: Make sure you selected 'Custom' in Light Theme Header 3 (H3) Text Color Preset for this to work. - Header 4 (H4) Text Color Preset - Header 4 (H4) Custom Text Color: Make sure you selected 'Custom' in Light Theme Header 4 (H4) Text Color Preset for this to work. - Header 5 (H5) Text Color Preset - Header 5 (H5) Custom Text Color: Make sure you selected 'Custom' in Light Theme Header 5 (H5) Text Color Preset for this to work. - Header 6 (H6) Text Color Preset - Header 6 (H6) Custom Text Color: Make sure you selected 'Custom' in Light Theme Header 6 (H6) Text Color Preset for this to work. - **Dark Theme**: - Inline Title Text Color Preset - Inline Title Custom Text Color: Make sure you selected 'Custom' in Dark Theme Inline Title Text Color Preset for this to work. - Header 1 (H1) Text Color Preset - Header 1 (H1) Custom Text Color: Make sure you selected 'Custom' in Dark Theme Header 1 (H1) Text Color Preset for this to work. - Header 2 (H2) Text Color Preset - Header 2 (H2) Custom Text Color: Make sure you selected 'Custom' in Dark Theme Header 2 (H2) Text Color Preset for this to work. - Header 3 (H3) Text Color Preset - Header 3 (H3) Custom Text Color: Make sure you selected 'Custom' in Dark Theme Header 3 (H3) Text Color Preset for this to work. - Header 4 (H4) Text Color Preset - Header 4 (H4) Custom Text Color: Make sure you selected 'Custom' in Dark Theme Header 4 (H4) Text Color Preset for this to work. - Header 5 (H5) Text Color Preset - Header 5 (H5) Custom Text Color: Make sure you selected 'Custom' in Dark Theme Header 5 (H5) Text Color Preset for this to work. - Header 6 (H6) Text Color Preset - Header 6 (H6) Custom Text Color: Make sure you selected 'Custom' in Dark Theme Header 6 (H6) Text Color Preset for this to work. - **Editor Text Color**: Adjust the color of different types of text in the Editor. - **Light Theme**: - Bold Text Color Preset - Bold Text Custom Color: Make sure you selected 'Custom' in Light Theme Bold Text Color Preset for this to work. - Italic Text Color Preset - Italic Text Custom Color: Make sure you selected 'Custom' in Light Theme Italic Text Color Preset for this to work. - Italic and Bold Text Color Preset - Italic Text Custom Color: Make sure you selected 'Custom' in Light Theme Italic Text Color Preset for this to work. - Internal Link Color Preset - Internal Link Custom Color: Make sure you selected 'Custom' in Light Theme Internal Link Color Preset for this to work. - External Link Color Preset - External Link Custom Color: Make sure you selected 'Custom' in Light Theme External Link Color Preset for this to work. - **Dark Theme**: - Bold Text Color Preset - Bold Text Custom Color: Make sure you selected 'Custom' in Dark Theme Bold Text Color Preset for this to work. - Italic Text Color Preset - Italic Text Custom Color: Make sure you selected 'Custom' in Dark Theme Italic Text Color Preset for this to work. - Italic and Bold Text Color Preset - Italic Text Custom Color: Make sure you selected 'Custom' in Light Theme Italic Text Color Preset for this to work. - Internal Link Color Preset - Internal Link Custom Color: Make sure you selected 'Custom' in Dark Theme Internal Link Color Preset for this to work. - External Link Color Preset - External Link Custom Color: Make sure you selected 'Custom' in Dark Theme External Link Color Preset for this to work. - **Mark Highlight**: Adjusts the style used by the <mark> tag highlight system. Colors available = red, orange, yellow, green, mint, cyan, blue, purple, pink and grey. e.g. <mark class="red">Your Red text</mark> - **Light Theme**: - Mark Highlight Style - Mark Highlight Text Color Preset - **Dark Theme**: - Mark Highlight Style - Mark Highlight Text Color Preset **User Interface**: Settings for spacing, position, alignment and other adjustments of different UI elements. - **Window Adjustments**: Settings for changing the gaps between windows and border radius around all UI elements. - Border Radius Medium (px): The size of the border radius around larger elements of the UI. - Border Radius Small (px): The size of the border radius around smaller elements of the UI. - **Sidebar and Main Workspace Elements**: Settings for positioning, alignment, etc. of different UI elements within the Sidebars and the Main Workspace. - **Tab Label**: Settings for positioning, alignment, etc. of the Tab Labels. - Left Sidebar Tab Label Alignment: Horizontal Alignment of the Tab Labels in the Left Sidebar. - Right Sidebar Tab Label Alignment: Horizontal Alignment of the Tab Labels in the Right Sidebar. - **Nav Header**: Settings for positioning, alignment, etc. of the Nav Headers. - Left Sidebar Nav Header Position: Vertical Position of the Nav Header in the Left Sidebar Workspace Leaf. - Left Sidebar Nav Header Alignment: Horizontal Alignment of the Nav Header in the Left Sidebar Workspace Leaf. - Right Sidebar Nav Header Position: Vertical Position of the Nav Header in the Right Sidebar Workspace Leaf. - Right Sidebar Nav Header Alignment: Horizontal Alignment of the Nav Header in the Right Sidebar Workspace Leaf. - **Tab Header**: Settings for alignment of the Tab Header. - Tab Header Alignment: Horizontal Alignment of the Tab Headers in the Main Workspace. - **File Explorer**: Customisation options for the File Explorer module. - File Explorer File/Folder Left Margin (px): Increases the Left Margin for Files/Folders in order indent them within another folder. - Enable Folder Dropdown Icon: Replaces the Arrow dropdown icon with a Folder icon (different icons for closed and open folders). - Folder Dropdown Icon Color: Different presets for the Folder Dropdown Icon Color. Make sure to enable the option above `Enable Folder Dropdown Icon` for this to apply. - **Titlebar**: Settings for changing the style of the Titlebar. - Hide Titlebar Title Text: Hides the Titlebar Title Text (Useful when the Statusbar is at the top). - **Status Bar**: Settings for the Status Bar. Adjust position, Change the order of items, etc. - Status Bar Style: Change the Position of the Status Bar. - Fixed Status Bar Horizontal Alignment: Change the Horizontal Alignment of the Fixed Status Bar. - **Light Theme Customisation**: - Status Bar Preset: Choose between Default and Custom colors for the Light Theme Status Bar. - Status Bar Background Color: Make sure you selected 'Custom' in Light Theme Status Bar Preset for this to work. - Status Bar Text/Icons Color: Choose the color used for the Light Theme Status Bar Text/Icons. - **Dark Theme Customisation**: - Status Bar Preset: Choose between Default and Custom colors for the Dark Theme Status Bar. - Status Bar Background Color: Make sure you selected 'Custom' in Dark Theme Status Bar Preset for this to work. - Status Bar Text/Icons Color: Choose the color used for the Dark Theme Status Bar Text/Icons. - **Scrollbar**: Settings for the Scrollbar. Adjust the width, Add Scroll Buttons, etc. - Scrollbar Width: Change the width of the Scrollbar (px). **Plugins**: Plugin Specific Settings. - **Kanban**: Mgmeyers Obsidian Kanban Plugin (https://github.com/mgmeyers/obsidian-kanban). - Disable Kanban Title Card Count: Removes the Card Count in the Kanban Lane Title. - Center Kanban Title Text: Aligns the Kanban Lane Title to the center. - Light Theme Kanban Background: Change the Light Theme background of the Kanban board. - Dark Theme Kanban Background: Change the Dark Theme background of the Kanban board. - **Icon Folder**: Florian Woelki Icon Folder (https://github.com/FlorianWoelki/obsidian-icon-folder). - Use UI Accent Color for Icon Folder: Makes the Folder Icons inherit the UI Accent Color. - **Icons**: visini Icons (https://github.com/visini/obsidian-icons-plugin). - Use UI Accent Color for Icons: Makes the Icons inherit the UI Accent Color. **Feature Toggles**: Disable / hide certain aspects of the theme. - Fade Inactive Tabs: Fades out inactive UI tabs to help distinguish the currently active tab. - Disable Blurred Background Effect: Disables the blur background in all elements that use it by making them opaque. - Disable Prism Callout Styling: This option removes the custom Callout Styling introduced with Prism and reverts to a completely default look. This should be used if you prefer the default callout styling or have CSS Snippets that use it's customisation options. - Disable Mark Highlight Styling: This option removes the Prism Mark Highlight Styling (reverts to default look). This will be handy for those that already use a different <mark> tag based highlighting system. - Collapsed Pinned Tabs: This option removes the title from pinned tabs and adds back the default file icon for the markdown files. Helps reduce the horizontal space wasted by pinned tabs. You can still see the title when you hover over the icon. NOTE - This option requires Installer Version 1.1.9+ due to use of CSS `has()`. Also, might not work on certain Mobile clients. - Enable PDF Dark Theme: This option adds styling to the PDF pages by blending in with the colour scheme in Dark mode; making it more eye friendly. This isn't a perfect solution. Note that some images might look inverted and colours be a different shade compared to the original file. **Theme Info**: Additional help and information regarding Prism. - None: <div class="styleSettingsButton prism-wiki"><a href="https://github.com/damiankorcz/Prism-Theme/wiki"><span class="styleSettingsButtonEmoji">🏛️</span>Prism Wiki</a></div><div class="styleSettingsButton prism-roadmap"><a href="https://github.com/users/damiankorcz/projects/5"><span class="styleSettingsButtonEmoji">🗺️</span>Prism Roadmap</a></div><div class="styleSettingsButton prism-releases"><a href="https://github.com/damiankorcz/Prism-Theme/releases"><span class="styleSettingsButtonEmoji">📦</span>Prism Releases & Changelog</a></div> **Support the Development of Prism**: If you are enjoying the theme, here are some ways to support its development. - None: <div class="styleSettingsButton prism-star"><a href="https://github.com/damiankorcz/Prism-Theme"><span class="styleSettingsButtonEmoji">🌠</span>Star the project on GitHub</a></div><div class="styleSettingsButton prism-issue"><a href="https://github.com/damiankorcz/Prism-Theme/issues"><span class="styleSettingsButtonEmoji">⚠️</span>Submit an Issue</a></div><div class="styleSettingsButton prism-coffee"><a href="https://www.buymeacoffee.com/DamianKorcz"><span class="styleSettingsButtonEmoji">☕</span> Buy me a coffee!</a></div> - Prism Theme Class ## Plugin Compatibility[^1] **Core plugins**: - [[Obsidian Core Plugins#Audio recorder|Audio recorder]] - [[Obsidian Core Plugins#Backlinks|Backlinks]] - [[Obsidian Core Plugins#None|None]] - [[Obsidian Core Plugins#Command palette|Command palette]] - [[Obsidian Core Plugins#Daily notes|Daily notes]] - [[Obsidian Core Plugins#File explorer|File explorer]] - [[Obsidian Core Plugins#File recovery|File recovery]] - [[Obsidian Core Plugins#Search|Search]] - [[Obsidian Core Plugins#Graph view|Graph view]] - [[Obsidian Core Plugins#Markdown format converter|Markdown format converter]] - [[Obsidian Core Plugins#Note composer|Note composer]] - [[Obsidian Core Plugins#Open in default app|Open in default app]] - [[Obsidian Core Plugins#Outgoing Links|Outgoing Links]] - [[Obsidian Core Plugins#Outline|Outline]] - [[Obsidian Core Plugins#Page preview|Page preview]] - [[Obsidian Core Plugins#Publish|Publish]] - [[Obsidian Core Plugins#Random note|Random note]] - [[Obsidian Core Plugins#Slash commands|Slash commands]] - [[Obsidian Core Plugins#Slides|Slides]] - [[Obsidian Core Plugins#Starred notes|Starred notes]] - [[Obsidian Core Plugins#Sync|Sync]] - [[Obsidian Core Plugins#Quick switcher|Quick switcher]] - [[Obsidian Core Plugins#Tag pane|Tag pane]] - [[Obsidian Core Plugins#Templates|Templates]] - [[Obsidian Core Plugins#Word count|Word count]] - [[Obsidian Core Plugins#Workspaces|Workspaces]] - [[Obsidian Core Plugins#Zettelkasten prefixer|Zettelkasten prefixer]] **Community plugins**: - [[table-editor-obsidian|Advanced Tables]] - [[obsidian-kanban|Kanban]] - [[quick-explorer|Quick Explorer]] - [[calendar|Calendar]] - [[cmenu-plugin|cMenu]] - [[obsidian-dangling-links|Dangling links]] - [[pane-relief|Pane Relief]] - [[obsidian-icon-folder|Iconize]] - [[obsidian-map-view|Map View]] - [[obsidian-emoji-toolbar|Emoji Toolbar]] - [[obsidian-tagfolder|TagFolder]] - [[obsidian-dictionary-plugin|Dictionary]] - [[obsidian-icons-plugin|Icons]] - [[obsidian-jump-to-date-plugin|Obsidian42 - Jump-to-Date]] - [[obsidian-hover-editor|Hover Editor]] - [[obsidian-quiet-outline|Quiet Outline]] - [[recent-files-obsidian|Recent Files]] - [[file-tree-alternative|File Tree Alternative Plugin]] - [[settings-search|Settings Search]] [^1]: Generally, Obsidian themes work with any plugins. That a plugin is not listed here does not mean that it won't work together with the theme. Plugins listed here only received special attention and/or styling by the theme designer. %% Hub footer: Please don't edit anything below this line %% # This note in GitHub <span class="git-footer">[Edit In GitHub](https://github.dev/obsidian-community/obsidian-hub/blob/main/02%20-%20Community%20Expansions/02.05%20All%20Community%20Expansions/Themes/Prism.md "git-hub-edit-note") | [Copy this note](https://raw.githubusercontent.com/obsidian-community/obsidian-hub/main/02%20-%20Community%20Expansions/02.05%20All%20Community%20Expansions/Themes/Prism.md "git-hub-copy-note") | [Download this vault](https://github.com/obsidian-community/obsidian-hub/archive/refs/heads/main.zip "git-hub-download-vault") </span>