Theme: ITS (Dark/Light Theme)

[SlRvb]

Hello! The ITS theme is one I use for my Story Vault and have finally finalized it enough to post about it here!

ITS is now available to use from the Community Themes!

Theme Github Repo: ITS Theme Github Repo.

---

Dark Mode:

Features:

Edit Mode:

---

Light Mode:

Features:

Edit Mode:

---

Features:

• Dark and Light mode compatible
• Colored Graph
• Squared Edges
• Heading:
  • Underline: spans across the page depending on the heading
  • Font: Calisto MT
  • Embeded: Embedded files have smaller headers and are 1 color
• Custom Horizontal line
  • Credit: TriDiamond
• Tag Pills (Rectangular)
• Metadata minimal style
• Checkboxes
  • Credit: Kepano: Nicer Checkboxes
• Images:
  • Image Adjustments Instructions Here
    • Right to left
    • Banners/Portrait/Profile
    • Inner image adjustments, ability to move the inside of the image around after using the banners/portraits/profile edits
  • Zoom: images enlarges upon clicking and holding it
    • Credit: Kepano: Image Zoom Click Hold To Expand Images
• <i></i> for images or other files attributions
  • Adjustable: Instructions here
• Blockquotes
  • Soft background
  • Wider blockquote
  • Quotation marks added top right corner
  • Customizable “Blockquotes” with <b></b> (No quotation mark by default)
• Popover
  • Larger Popover
  • Images fit within the popover window
  • Images are cropped in popover window
• Line Relationships
  • Bullet Points
    • Credit: Lizardmenfromspace
  • Outline Pane
  • Folder Navigation
  • Tag Pane
    • Note: Dot appears at bottom left corner. If it’s too annoying add this snippet:
    • .tag-container .tree-item-children {border-left: 0px;}
• Folder Navigation Icons
  • Credit: Deathau
• Text Wrapping
  • Outline Pane
  • Tag Pane
  • File Explorer Sidebar
  • Embed Titles
  • Query Titles
• Embed Adjustments Instructions Here
  • Resize the embed page width and height-wise
  • Center/Left/Right placement of embedded page within note
  • Link can be moved or hidden
• Alternate Colored Theme Snippets Get Snippets/More Info
• Kanban (With permission from kanban’s creator @Maned )
• CSS Classes See More/Help Here
  • justified - Justify text
  • poem - Center text
  • writing - Justify text and center headings
  • no-m - No Metadata, hide frontmatter on page completely
  • recall - Blur text and only reveal when hovering over
• Style Settings plugin supported!
• Snippets (Made to work with any themes other than ITS as well)
  • Kanban Snippet
  • Image Adjustments —> Help Info here
  • Embed Adjustments —> Help Info Here
  • Aside —> Help Info here
  • Folder Styles
  • External Link Icons

---

Depreciated:

• Gallery/Masonry: Side by side images. No longer working as of v11.3
  • Put cssclass: img-grid into frontmatter/YAML, separate by adding spaces
  • Credit: Kepano: Display side by side image grid (CSS snippet)

Donations

If you want to donate and support me: Ko-fi

[alltagsverstand]

This looks really nice! Especially the light mode - it is the first light mode I really, really like a lot (I have mostly used dark mode so far…).

What emoji package are you using?

[SlRvb]

Thanks! Glad you enjoy the light mode; took a lot of work to make it work across both modes!

The emoji package is just Microsoft’s emojis since I’m on windows.

[SlRvb]

Large Update:

Features added:

• Relationship Lines Suggested by @Klaas
  • Outline pane relationship lines
  • Tag pane relationship lines
    Note: Dot appears at bottom left corner. If it’s too annoying add this snippet:
    .tag-container .tree-item-children {border-left: 0px;}
  • File Navigation relationship lines
• Folders and Files icons
• ‘Diamond’ bullet points
• Squared UI
• Larger Popover
• Slight fix for horizontal line
• Text Wrapping for:
  • Outline Pane
  • Tag Pane
• Vault name’s color and font altered

[SlRvb]

Update UI Fixes:

• Better spacing for outline pane
• Folder and files are properly spaced to show what files belong to what folder
• Headings and Horizontal line in edit mode look close to the way preview mode does

[SlRvb]

Updates:

• Folders in Explorer/Navbar no longer have arrows, they change color to indicate when open or not.
• Text wrapping and shrinking for Embed Titles and Query.
• Fixed checkbox spacing issues
• Fixed inline codeblock issues with background color

[SlRvb]

Updates:

• Fixed lightmode ctrl + f highlight illegibility.
• Fixed lightmode button colors
• Shifted lightmode graph UI to lighter color for better slider backgrounds
• Fixed editor’s horizontal line to look closer to preview mode
  

[SlRvb]

Updates:

• Fixed Star Pane files padding
• Changed external link icon and editor syntax color (for dark mode) to match theme better
  
• Fixed the horizontal line thickness
• Fixed editor list lines to center them properly
• Removed iFrame borders and attachment file borders

[SlRvb]

Mini Update:

• Fixed Outline Pane Padding
• Squared tags & aliases for metadata

[SlRvb]

Mini Update:

• Reduced Outline & Tag pane lines sizes
• Fixed bullet points and numbered lists.
  Previous version applied bullet point symbol to every kind of list, so numbered lists would only appear as a bullet point. It now displays as a numbered list properly.

[Klaas]

ITS theme goes from strength to strength !!

[SlRvb]

Large Update:

• cssclass: justified in the metadata/yaml/frontmatter will justify all the paragraph text on the page in preview mode
• Image Positioning
  • Move images to left and right of the screen
  • Manually resize image width and height wise
  • Combinations of these are accepted ie. ![[image.png|locr+hsmall+wsmall+cover]]
  • Obsidian resizing also works but must be at the end Only for the Complex Version ![[image.png|locr+hsmall+wsmall+cover|200]]
  • See Github for full explanation of how to use this: Image Positions
  • Showcase:
    
    
    
• <i></i> visually updated
  • alt="left" and alt="right" will move the attribute’s text to the left and right
    
    
    
• Fixed the weird duplication of image zoom code instead of the image grid code
• Embeds are now stylized darker without borders
  
  
  
• Dataview plugin’s table headers fit the theme
  
  
• Removed the right side blockquote borders
  

[SlRvb]

Small Update:

• Added finer adjustments capabilities to images.
  You can now move the inside of the image around with more precision to display it how you want:
  
  
• Fixed Kepano’s image grid to not auto resize to 100% so image css’s h and w values can work so you can resize the images in the grid

[SlRvb]

Update:

• Embed Adjustments
  • Hide embed titles
  • Resize the embed page width and height-wise
  • Center/Left/Right placement of embedded page within note
  • For more info on how to use adjustments visit the github repo
    
    
• Image css changed to fix issues with images and emojis
• Images no longer centered by default, need to add c into image to center it: ![[image.png|c]]

[Klaas]

What do you mean by “hide embed titles”?

[SlRvb]

The photo above shows what I mean with the first embed without its title. The left side, under the No Title and Tiny (100px) line.

[SlRvb]

Update:

• Streamlined the colors
  • Mostly backend for snippet themes support (Themes with different colors built on top of ITS [Coming Soon])
• More of the UI squared: Sliders, Toggle, Dropdowns
• Toggle is now a colored box to check on and off
  • Add this to a snippet to restore the toggle:
    .checkbox-container { width: 42px; }
.checkbox-container:after { display: block; }
  • 
    
• Updated horizontal line symbol
  
  

[Klaas]

The horizontal line symbol does not render for me. In the code block it looks like this:

/*Stylized hr Line*/
.markdown-preview-view hr::after, div:not(.CodeMirror-activeline)>.HyperMD-hr-bg::after {
    content: "🗲";

which is rendered as 🗲

[SlRvb]

Small Fixes:

• Switched the horizontal line unicode symbol to emoji for cross-platform compatibility
  
  
• Fixed colors for blockquotes, sliding pane (hid the gradient), darkmode text, error screen buttons, light mode <i></i> attribute text color

[SlRvb]

Update:

• Footnotes
  • Removed horizontal line from footnotes
  • Reduced line height in paragraph superscript and in reference text
  • Reduced size of footnote superscript and reference text
  • Changed and recolored footnote icon

• Recolored header underline and table borders for a blue-r tint