Theme: ITS (Dark/Light Theme)

Share & showcase
1

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.

ITS
ITS1920×1040 308 KB

Dark Mode:

Darkmode
Darkmode1918×1040 249 KB

Features:
Darkmode-Features
Darkmode-Features1918×1040 301 KB

Edit Mode:
Darkmode-Editing
Darkmode-Editing1918×1040 262 KB

Light Mode:

Obsidian_ojmGUIUfVp
Obsidian_ojmGUIUfVp1918×1040 257 KB

Features:
Lightmode-Features
Lightmode-Features1918×1040 301 KB

Edit Mode:
Lightmode-Editing
Lightmode-Editing1918×1040 261 KB

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
  • Tag Pills (Rectangular)
  • Metadata minimal style
  • Checkboxes
  • Images:
  • <i></i> for images or other files attributions
  • 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
    • 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
  • 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 :pray::raised_hands:)
  • 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)

Depreciated:

Donations

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

24 Likes
2

This looks really nice! :slight_smile: 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?

2 Likes
4

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.

5

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
6

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
7

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
1 Like
8

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
    uIYqsjlK5e Obsidian_OEBGYJSseq
1 Like
10

Updates:

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

Mini Update:

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

Obsidian_ZMqHzOABYO Obsidian_ErL977Jh3e

1 Like
12

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.

Obsidian_9cbOzFSxAm Obsidian_SDqH92csCa

1 Like
13

ITS theme goes from strength to strength !!

1 Like
14

Large Update:

2 Likes
15

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:
    He78xRJc2w
    He78xRJc2w1350×1056 274 KB
  • 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
16

Update:

  • Embed Adjustments
  • 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]]
17

What do you mean by “hide embed titles”?

18

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.

19

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
  • Updated horizontal line symbol
    YOzjjBqk5z
    Obsidian_ROD3SUODbv
20

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 🗲

21

Small Fixes:

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

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

q5Amefznsx J8vNSyhhlv

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