%% ----- Badges ----- %%     %% ----- Badges ----- %% %% ----- Do not edit this section ----- %% # Blue Topaz Repository: [GitHub](https://github.com/whyt-byte/Blue-Topaz_Obsidian-css) Designed by: [[whyt-byte]] 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 %% %% ![[whyt-byte#Sponsor this author]] %% ## Features - [[Themes with Friendly Settings|Friendly settings]]: Supports the [[obsidian-style-settings|Style Settings]] plugin ## Customization Options (Style Settings Plugin) - Translucent Setting Panel: Make this panel transparent **1. General Settings**: - **1.1 Color Palette**: - Color Palette (from Topaz Community) - **Color of Rubik's Cube palette**: - main color - Low contrast color - deep color - **1.2 Background Images**: - **1.2.1 Workplace Background Image**: - Activate Image Background - Blur Radius: To adjust the radius of blur - Brightness of Image: To adjust the brightness - Saturation of Image: To adjust the saturation - Waves color - Light mode - Custom Theme light (url): Customise the background image. Use the format in the Default below for an Online image. Use the following format to point to a local file - url("app://local/D:/Documents/Pictures/Unsplash/UnsplashTemp.jpg"). - Dark mode - Custom Theme Dark (url): Customise the background image. Use the format in the Default below for an Online image. Use the following format to point to a local file - url("app://local/D:/Documents/Pictures/Unsplash/UnsplashTemp.jpg"). - Random background: Images will be refreshed when Obsidian launches; Internet required - **1.2.2 Note Page Background Image**: - Toogle Background Images - Choose image set - Random background: Images will be refreshed when Obsidian launches; nInternet connection required - Random image with a certain color - **1.2.3 Images of Command Palette**: - Toggle Images of Command Palette - Consistent with Workplace Background Image - Custom Background Image - Custom Theme light (url): Customise the background image. Use the format in the Default below for an Online image. Use the following format to point to a local file - url("app://local/D:/Documents/Pictures/Unsplash/UnsplashTemp.jpg"). - Custom Theme Dark (url): Customise the background image. Use the format in the Default below for an Online image. Use the following format to point to a local file - url("app://local/D:/Documents/Pictures/Unsplash/UnsplashTemp.jpg"). - Blur Radius: To adjust the radius of blur - Brightness: To adjust the brightness - Saturation: To adjust the saturation - Opacity - **1.2.4 File Explorer Background**: - Toggle Background Image - Image Picking (Light mode) - Custom Image (Light mode): Customise the background image. Use the format in the Default below for an Online image. Use the following format to point to a local file - url("app://local/D:/Documents/Pictures/Unsplash/UnsplashTemp.jpg"). - Image Picking (Dark mode) - Custom Image (Dark mode): Customise the background image. Use the format in the Default below for an Online image. Use the following format to point to a local file - url("app://local/D:/Documents/Pictures/Unsplash/UnsplashTemp.jpg"). - **1.3 Layout**: - Left Ribbon Styles - Right Ribbon Styles - Layout Styles - Hide vault name - Search Bar Style - Reduced Status Bar - Scrollbar Style - The view status button is placed in front of the header **2. Detail Settings**: - **2.1 Color Settings**: - Main text color - **2.1.1 Background Colors**: - Background Primary: background-primary-bg-4-bt - Background Primary (alt): background-primary-alt-bg-4-bt - Background Secondary: background-secondary-bg-4-bt - Background Secondary (alt): background-secondary-alt-bg-4-bt - Background Modifier Border - **2.1.2 Theme Colors**: - Theme Color: interactive-accent - Theme Color 2: text-accent - **2.1.3 Highlight Background Color**: - Hue (Light mode): To adjust Hue - Saturation (Light mode): To adjust Saturation - Lightness (Light mode): To adjust Lightness - Opacity (Light mode): To adjust Alpha - Hue (Dark mode): To adjust Hue - Saturation (Dark mode): To adjust Saturation - Lightness (Dark mode): To adjust Lightness - Opacity (Dark mode): To adjust Alpha - Deactivate Colorful-Highlight: In this theme, *==xxx==*, **==xxx==** and ***==xxx==*** possese different background colors by default, active this option to cancel it. Even with this option actived, you can still type "cssclass：colorful-highlight" into yaml to make the colorful-highlight style available to individual documents - Highlight Background Color Plus 1 (*==xx==*) - Highlight Text Color Plus 1 (*==xx==*) - Font Weight of Highlight Text Plus 1 (*==xx==*): Can type normal, bold, lighter or bolder to change the font weight - Highlight Background Color Plus 2 (**==xx==**) - Highlight Text Color Plus 2 (**==xx==**) - Font Weight of Highlight Text Plus 2 (**==xx==**): Can type normal, bold, lighter or bolder to change the font weight - Highlight Background Color Plus 3 (***==xx==***) - Highlight Text Color Plus 3 (***==xx==***) - Font Weight of Highlight Text Plus 3 (***==xx==***): Can type normal, bold, lighter or bolder to change the font weight - **2.1.4 Other Colors**: - Bold Type Color: --accent-strong - Italic Type Color: --accent-em - Bold Italic Color 1: --strong-em-color-1 - Bold Italic Color 2: --strong-em-color-2 - Color of Mathematical Expressions (inline $x=0$): --mjx-inline-math-color - Color of Mathematical Expressions ($x=0$): --mjx-math-color - Color of Leaf Resize Handle: --background-leaf-resize-handle - Color of Mathematical Expressions (inline $x=0$): --mjx-inline-math-color - Hover Popover Background Color: --background-popover - Search Result Highlight Color: --search-result-file-matched-bg - Text Selection Background: --text-selection - Toggle Selection Background (Non-text Part) - Status Bar Background: --status-bar-bg - Status Bar Text Color: --status-bar-text-color - **2.1.5 Graph-view Colors**: - Graph-view Canvas Background - Graph-view Text Color - Graph-view Line Color - Graph-view Line Highlight Color (Hovering) - Graph-view Arrow Color - Graph-view Circle Outline Color - Graph-view Normal Circle Color - Graph-view Circle Color (Tag) - Graph-view Circle Color (Unresolved) - Graph-view Circle Color (Attachment) - Graph-view Settings Background Color - Graph-view Circle Highlight Color (Hovering) - **2.2 Typography**: - **2.2.1 Font Family**: - Use Obsidian Default Font-family - Main Font: Fonts except from the code texts - Header 1 - Header 2 - Header 3 - Header 4 - Header 5 - Header 6 - Folder & File Title - Codebox - Inline Code - Tag - Bold Text - Italic Text - Vault Name - **2.2.2 Font Size**: - Vault Name - File Header (NOT for Sliding Pane plugin) - Folder and File - Codeblock - Header 1 - Header 2 - Header 3 - Header 4 - Header 5 - Header 6 - Mathematical expressions - **2.2.3 Headers**: - Clutter Free Headings: Adapted from https://github.com/deathau/obsidian-snippets/blob/main/clutter-free-headings.css - Funny header animation in Live Preview: Adapted from https://cdn.discordapp.com/attachments/702656734631821413/1007258862606352424/FunnyHeaderAnimLP.css @sailKite - Remove H1-H6 Indicators before Headings when Hovering - Retain header color: Retain original color of headers when using italic, bold or bold italic within headers - **2.2.3.1 Header 1**: - Header 1 - Toggle h1 Underline - Toggle h1 Background - H1 bg - H1 Text-align - **2.2.3.2 Header 2**: - Header 2 - toggle H2 underline - Toggle h2 Background - H2 bg - H2 text-align - **2.2.3.3 Header 3**: - Header 3 - toggle H3 underline - Toggle h3 Background - H3 bg - H3 text-align - **2.2.3.4 Header 4**: - Header 4 - toggle H4 underline - Toggle h4 Background - H4 bg - H4 text-align - **2.2.3.5 Header 5**: - Header 5 - toggle H5 underline - Toggle h5 Background - H5 bg - H5 text-align - **2.2.3.6 Header 6**: - Header 6 - Toggle H6 Underline - Toggle h6 Background - H6 bg - H6 text-align - **2.2.4 Other Settings**: - Line Width (in the mode of 'Readable line length'): The maximum line width in rem units (1rem = Body font size) - Line Height - Toggle paragraph spacing in Reading Mode - Paragraph Spacing - Letter Spacing - Slight Indentation of the First Line: Enable global effect, local effect only need to declare "cssclass：indent" in the YAML area. Contextual Typography plugin needs to be installed in Reading mode. - To Reduce Padding Bottom of Pages - To Adjust Padding Bottom of Pages - Toggle Left-aligned note content: Left-aligned content when turned on, instead of centered by default - **2.2.5 *.md File in Split Pane**: - Font Size - Line Height - Toggle Default Style - **2.3 Element Styles**: - Mute Active Line - Remove Colorful Background of Active File Title: Make it austere - **2.3.1 Dividing Line (Horizontal Ruler, hr, ---)**: - Fancy Dividing Line (Horizontal Ruler, hr, ---) - **2.3.1.1 w/ Icons**: - Line color 1 - Line color 2 - Line color 3 - Line color 4 - Centre Icon: Do not remove the quotes - Degree of Icon Rotation - **2.3.1.2 w/o Icons**: - hr-color-1 - hr-color-2 - hr-color-3 - hr-color-4 - **2.3.1.3 w/ Numbers**: - Line Color 1 - Line Color 2 - Line Color 3 - Line Color 4 - Number Color - Number Background Color - Toggle Hollow Numbers - Fill Color: Color inside the numbers - Stroke Color: Color of lines drawn around numbers - **2.3.2 List**: - Line Height of List - List Spacing (Reading Mode) - List Spacing (Edit Mode) - Bullet Color of Unordered List - Number Color of Ordered List - List Style in reading view - List Style in Edit Mode - **2.3.2.1 Rainbow Outline Style Settings**: Settings for "Rainbow Outlines" option - Enable rainbow outline list order - Enable rainbow outline checkbox - **2.3.2.2 Rainbow Lines Colors Settings**: Settings for "Rainbow Outlines" option - Outline level 1 - Outline level 2 - Outline level 3 - Outline level 4 - Outline level 5 - Outline level 6 - **2.3.2.3 Color Settings of Default Relationship Lines**: Settings for default "Indentation guides" Option - Inactive Line Color - Active Line Color - **2.3.3 Folder**: - File Background Shape - File Name Style - Light File Background - Unmute Collapsed Folder: To normalize opacity of collapsed folder - Remove File Icons: To remove the icons before .md files - Color of File Icons - Activate Folder Icons - Folder Icons w/o arrows (Collapse Indicator): To be effective after toggling the option above - **2.3.3.1 Colorful Folder**: - Select Folder Colorful Mode - Folder Color Palette - Custom Color of Folder - **2.3.4 Blockquote**: - Blockquote - **2.3.5 Exported PDF Style**: - Use hr (---) for Paging - All dark (Experimental, may or may not be desirable): Export PDF with dark mode color scheme - Print URL After Links - Strong Color - Italic Type Color - **2.3.6 Embeds**: - To Fix Height of Embedded Content - Height of Embedded Content: Switch on the above button to activate - Transparent Embedded background - Hide Embedded Title - Hide Embedded Headers - Floating Effect of Embedded Note When Hovering - **2.3.7 Custom Modal Windows**: - Modal Title Icon: Do not remove the quotes - **2.3.8 Table**: - Remove Table Zoom Effect - Table Format - Show Borders - Full-width table display: for Reading View, require Contextual Typography plugin - Table Style - **2.3.9 Codebox and Inline Code**: - **2.3.9.1 Codebox**: - Code Wrap (Reading Mode) - Non-wrap Codebox (Live Preview) - Letter Spacing for Code - Codebox Background Color - Codebox Style - Blur Radius (For Frosted Glass Style) - **2.3.9.2 Inline Code**: - Inline Code Background Color - Inline Code Color - Font Weight of Inline Code - **2.3.10 Cloze Style**: - Cancel Cloze Style: In this theme, you can use ==~~your words~~==, *==~~your words~~==* and *~~your words~~* to obtain a cloze-style, active this option to cancel it - Cloze background color: Cloze Style One, i.e. ==~~your words~~==, hovering to find "your words", should declare "cssclass：cloze" in the YAML area if you want to use them in the Live Preview mode - Underline decoration style: Can type 'solid', 'dotted', 'dashed', 'wavy' or 'double' for Cloze Style One, i.e. ==~~your words~~==, hovering to find "your words", should declare "cssclass：cloze" in the YAML area if you want to use them in the Live Preview mode - Underline decoration color: For Cloze Style One, i.e. ==~~your words~~==, hovering to find "your words", should declare 'cssclass：cloze' in the YAML area if you want to use them in the Live Preview mode - Underline decoration style for Cloze style TWO: Can type 'solid', 'dotted', 'dashed', 'wavy', 'double' or 'none' for Cloze Style TWO, i.e. *==~~your words~~==*, pressing down the primary mouse button to find "your words", should declare 'cssclass：cloze' in the YAML area if you want to use them in the Live Preview mode - Underline decoration color for Cloze style TWO: For Cloze Style TWO, i.e. *==~~your words~~==*, pressing down the primary mouse button to find "your words", should declare 'cssclass：cloze' in the YAML area if you want to use them in the Live Preview mode - Underline decoration style for Cloze style THREE (*~~your words~~*): Can type 'solid', 'dotted', 'dashed', 'wavy', 'double' or 'none' for Cloze Style THREE, i.e. *~~your words~~*, pressing down the primary mouse button to find "your words", should declare 'cssclass：cloze' in the YAML area if you want to use them in the Live Preview mode - Underline decoration color for Cloze style THREE: For Cloze Style THREE, i.e. *~~your words~~*, pressing down the primary mouse button to find "your words", should declare 'cssclass：cloze' in the YAML area if you want to use them in the Live Preview mode - **2.3.11 Links**: - Toggle Internal Link Underline - Toggle External Link Underline - Toggle Unresolved Link Underline - Internal Link Color - Toggle Icon after External Link - External Link Color - Toggle default unresolved link color - Unresolved Link Color - Cancel click the link to trigger auto-jump: You can click on the link by holding down the ctrl key to jump - **2.3.12 Cursor**: - Cursor color (for Obsidian v0.14.9 and above) - Cursor color (Only for Obsidian version below 0.14.6) - Toggle fancy cursor (Only for Obsidian version below 0.14.6) - Fancy Cursor Color 1 - Fancy Cursor Color 2 - Cursor Width - Cursor Radius - Cursor Transition Time - **2.3.13 Checkbox**: - Circular Checkbox - Checkbox Size - Deactivate Checkbox Animation - **2.3.14 Icons**: - Toggle Default Icons - Toggle Default Collapse Icons - **2.3.15 Images**: - Deactivate image zooming - Obsidian Default Image Position - Image Max-width - **Intro to Basic Image Position**: You can add 🔸|Left (can also use `left`, `LEFT` or `L` to replace the `Left` before), 🔸|Right (right/RIGHT/R) and 🔸|Inline (inline/INLINE/inl/INL/Inl) 🔸|Centre/Center (CENTRE/CENTER/centre/center/C) (the “centre” one is for the “Obsidian Default Image Position above only, because Topaz's default image position is in the centre) into a image format to adjust the image position, e.g. ![[*.jpg|L]], ![[*.png|Right|200]] and  - **Intro to Image Caption**: You can add 🔸#Left|your captions (can also use `left`, `LEFT` or `L` to replace the `Left`), 🔸#Right (or right/RIGHT/R)|your captions, 🔸#center/centre (CENTRE/CENTER/Center/Centre/C) |your captions and 🔸#inl (Inline/INLINE/inline/INL/Inl) |your captions into a image format to adjust the image position with a image caption, e.g. ![[*.jpg#left|Figure 1]], ![[*.png#right|Figure 2|200]], ![[*.jpg#centre|Figure 3]] and ![[*.jpg#inl|Figure 4|100]] - **Intro to Image Grid**: You can add 🔸|+grid into some images to grid these images in a line, e.g. ![[*.jpg|+grid]] Or type ❗cssclass：img-grid❗ in YAML to make images arrange in a grid in the preview mode. - **2.3.16 Loading Page**: - Loading Page Style - **2.3.16.1 Custom Text**: - Custom Text - Font Family of Custom Text - Font Size - Text Color - Typing Style - Moving Style - Shinning Style - Color-changing Style - **2.3.16.2 Custom Image/Animation**: - Adding Things Before - Adding Things After - Font Size - Text Color - Text Color - **2.3.16.3 Custom Image/Animation**: - Custom Loading Page Image/Animation - Image Caption - **2.3.16.4 Custom Image/Animation with Position Changing**: - Custom Loading Page Image/Animation - Image Caption - High Contrast Background - **2.3.17**: - Cancel click the tag to trigger auto-jump: You can jump by clicking on the - Label superscript in the header - Tag Style - Tag-1 - Tag-2 - Tag-3 - Tag-4 - Tag-5 - Tag-6 - Tag-7 - Tag-8 - Tag-9 - **2.3.17.1 Default**: - Tag Text - **2.3.17.2 Outlined**: - Tag border width - **2.3.18 Setting, Menu, Option panes**: - Pane Style - **2.3.19 Titlebar style Setting**: - Simple title bar: To remove the background image of title bar - Title bar background color: custom-titlebar-bg - Title bar Blur Radius: To adjust the radius of blur - Title bar Brightness of Image: To adjust the brightness - Titlebar close button - Hide text in Title Bar **3. For Plugins**: - **3.1 Admonition&Callout Style**: - Admontion codebock and Callout background - Full-width layout for callout & admonition - Admonition special style support: 目前支持ad类型：blank 全透明框🔸def definition🔸thm theorem🔸lem lemma🔸cor corollary🔸pro proposition 🔸hibox 自动隐藏框🔸col2 col3 col4内容分多栏🔸kanban 伪看板🔸table 表格单行全部显示❗使用方法❗下面以thm类型为例，在admonition插件的设置页面中，类型填 thm，标题填 定理，图标选择hand-point-right，颜色自己选比如浅绿色，添加成功后，在正文中使用代码块```ad-thm 即可激活。其他类型以此类推。 - **3.2 Calendar**: - Toggle Shadow of Current Date - Transparent calendar background - Calendar - **3.3 Checklist Plugin**: - Rainbow Checklist - **3.4 Kanban**: - Static - Dynamic - **3.5 Buttons**: - Buttons special style support: 目前内置class：🔸circle_btn 圆形按钮🔸blank 透明按钮🔸grad_button渐变按钮🟣g_purple 紫色🔵g_blue蓝色🟢g_green 绿色💚g_lightgreen 浅绿🟡g_yellow黄色 - **3.6 Dataview**: - **3.6.1 Dataview List**: - Style - **3.6.2 Dataview Table**: - Dataview Table Format - Automatically add serial numbers to tables - Full-width dvtable display: for Reading View, require Contextual Typography plugin - **3.7 Dialogue & Chatview**: - Dialogue & Chatview Style: Wechat options is for ’titleMode：all‘ ，chat options is for ‘titleMode：first’ - **3.8 Sliding Panes**: - Toggle the Border of an Active File to Right - Transparent Panes for Sliding Panes Plugin - Page Background Color - File Header Background Color - Font Size of File Header - **3.9 Obsidian Memos**: Adapted from @Quorafind's CSS snippet - Put input box to bottom - Heatmap in Light mode: Change the color of heatmap - Heatmap in Dark mode: Change the color of heatmap - **3.10 backlinks panel**: - Full-width backlinks panel display - **3.11 Quiet outline**: - Optimize quiet-outline plugin **4. Built-in Style Intro**: There are some built-in CSS classes that should be manually declared in the YAML area. Details refer to the TIPS demo vault for Blue Topaz on Github. - **Pseudo-kanban**: ❗cssclass：kanban❗ A kind of kanban-liked style for unordered lists. (Adapted from Spectrum theme by @Wiktoria Mielcarek) - Simple pseudo-kanban: Remove colors of pseudo-kanban - Remove shadow of pseudo-kanban - Colorful pseudo-kanban - Blur Radius (For Frosted Glass Style) - pseudo-kanban color 1 - pseudo-kanban color 2 - pseudo-kanban color 3 - pseudo-kanban color 4 - pseudo-kanban color 5 - pseudo-kanban color 6 - pseudo-kanban color 7 - pseudo-kanban color 8 - pseudo-kanban-card subitem color - pseudo-kanban-border color - **Code Wrap**: ❗cssclass：code-wrap❗ Can be used to wrap code in code blocks for individual .md file - **List in a horizontal row (inline list)**: ❗cssclass：inline-list❗ To make the list show in a horizontal row. Meanwhile, it makes the list show inline which can be used with inline images (like ![[xxx.jpg|inlineR]]) - **Image Grid**: ❗cssclass：img-grid❗ To make images arrange in a grid in the preview mode. (adapted from https://github.com/iEchoxu/obsidian_orange/blob/main/.obsidian/snippets/image-grid.css) - **Eisenhower Matrix**: ❗cssclass：matrix❗ Usage https://forum.obsidian.md/t/theme-spectrum-version-1-0-0-and-resise-graphs-controls/12688/34 (Adapted from Spectrum theme by @Wiktoria Mielcarek) - **full-width layout**: ❗cssclass：fullwidth wide-dataview wide-table wide-callout wide-backlinks❗ (Adapted from https://github.com/efemkay @ Faiz Khuzaimah) **Supported by Topaz Community 😁**: %% 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/Blue%20Topaz.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/Blue%20Topaz.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>