Theme: ITS (Dark/Light Theme)

Update:

  • Tables have been visually updated
    • Header is red with white text
    • Rows and Columns have alternating colors

Obsidian_TN1lCQuXKm H7ajcF4XO5

  • Lightmode Code Background has been adjusted dark for easier visibility
2 Likes

Updates:

  • Queries have been visually updated
  • Star pane no longer has horizontal scrollbar
    Obsidian_9GO98iCNAD a702JqNXnc
  • Vault title has been properly aligned with folders
    Obsidian_IJ22BvYHC4
  • Added CSS for Checklists Plugin to visually match
    • Alternating colors for tasks
    • Squared checkbox
    • Words wrap for longer titles
      Obsidian_l9j5DvT6h0 Ws9qJXenGv
1 Like

In the ITS Theme CSS sheet there is this code block:

/*Checkbox Checked color*/
.markdown-preview-view .task-list-item-checkbox:checked {
  border: none;
  background-color: var(--accent2);
}

--accent2 is a blue color which makes the checked checkbox blue instead of “ITS red”.

Yep, I guess if you want a theme with no blue in it, then adding this to a snippet will remove the blue:

.theme-dark, .theme-light {
    --accent2: var(--accent);
    --accent2-lite: var(--lite-accent);
}

The only thing to keep in mind is that links to pages not created yet will be hard to differentiate from links to pages that are created. I’ll come up with a fix for that sometime soon.

@SlRvb
Actually, I would not want to make a drastic amendment like that: just the checkbox color needs to be adjusted to red for the red theme - blue does not make sense.
So I added this snippet:

/*Checkbox Checked color: red instead of blue*/
.markdown-preview-view .task-list-item-checkbox:checked {
    border: none;
    background-color: var(--accent);
}

Update:

  • Checkbox color updated
  • New Bullet list style
    • To return the original style, in the CSS file:
      • Search for /*Bullet List New*/, delete the last forward slash /
      • Then search for /*Bullet List Original** and replace the last asterisk with a forward slash/

New bullet list style

Obsidian_2727c0VC8q igiMNnS3si

The reason for this change was to stop the stuttering scroll issue when the cursor is over editor mode.

Stuttering scroll issue with previous bullet list style:

No stuttering scroll issue with new bullet list style:

2 Likes

This is awesome! Thanks for fixing the bug! Love :heart: the new style too @SlRvb!

1 Like

Update:

Customizable “Blockquotes”

  • Add this as a snippet and you can easily create different types:
    b[alt*="<name here>"] {}
    • <b></b> is what you have to use for the new “blockquotes”
    • Note: Markdown Headings don’t work, you’ll need to do the same as what’s under the Heading in the picture

2 Likes

Small Update:

1 Like

Update:

  • New Alternate Theme snippets
  • Recolored the file icon
    Obsidian_XwY5eW5NX1 iuPStenEf7
  • Squared the flairs and tag pane hover
    Obsidian_Fxtw1xVIax
    JY9GnJ1q69
  • Fixed the Settings buttons not changing color when hovering

Alternate Themes Snippets

3 New Alternate “Themes” using ITS as a base. Get them on the ITS Theme Repo. Read more about them (like which fonts are installed, etc) here.

SlRvb


D&D


School Days


3 Likes

Update:

2 Likes

Update

1 Like

Small Update

New CSS Classes

  • no-m: Hide frontmatter/metadata
  • poem: Centers text on page (Not Headings)
  • readable: (Code by @foreveryone) Applies readable line width to text regardless of whether Readable Line Width setting is turned on
  • writing: Centers headings, justifies text, applies readable width
1 Like

Update

Kanban is now available in ITS!

(With permission from kanban’s creator @Maned :pray::raised_hands:)

  • Supports numbered lists and numbered checklists
  • Added relationship lines
  • Fixed box getting smaller on both sides when more sub-bullets added

3 Likes

Update

Style Settings Examples:

SlRvb: Recreated

ITS Dark

4 Likes

Update

Style Settings has more features to further customize the ITS theme!

Fonts

  • Customize font of all text or just Preview/Editor/UI
  • Change text size
  • Change line height for paragraphs and headers
  • Change header font weight

Workspace

  • Toggle to hide vault name
  • Toggle to wrap a long title/show the whole note title
  • Customize the horizontal line icon or toggle it off completely
  • Bullets and Bullet lines
    • Toggle default round bullets
    • Add your own custom bullet
    • Toggle the original bullet lines
  • Tags
    • Toggle bubble styled tags, notion styled tags, or outline styled tags
    • Possible to combine bubble + outline or notion + outline
    • Customize the outline size of the outline styled tag
  • Customize Highlight colors!
  • Customize Graph colors

(Naked embeds coming soon)

Yeah, that one.

@SlRvb you left out Preview font size. :sweat_smile:

Update

  • Fixed Style Settings text font size not doing anything :woman_facepalming:
  • New CSSClasses:
    • table: bolds text on left side and colors it a solid dark color
    • t-c: Centers table (also a toggle in the Style Settings)
      Obsidian_GDJiZrFcJU L4M05ccubt

Naked Embeds

Hello @SIRvb!
First of all, thank you very much for this amazing theme! I’m using the Style Settings to tweak the colors.

I have question. Is there a snippet to hide the underline from Headers?

Since a use a lot headers, without the lines I would have a clean look.

Thanks!

1 Like

Updates

  • Style Settings:
    • Toggle header underline
    • Toggle to hide Text Expand codeblock in preview mode
    • Toggle to fully hide frontmatter
  • CSSClass recall: hides section, shows text when hovering over it
    • use something like <s class="recall">text here</s> to hide your sections
  • Embeds within a table have less padding/margins
  • Restored default 1.5em line height
2 Likes