Theme: ITS (Dark/Light Theme)

[SlRvb]

Update:

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

• Lightmode Code Background has been adjusted dark for easier visibility

[SlRvb]

Updates:

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

[Klaas]

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”.

[SlRvb]

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.

[Klaas]

@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);
}

[SlRvb]

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

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:

[welp]

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

[SlRvb]

Update:

• Customizable “Blockquotes”
• Recolored file navbar when file is selected
  
• Better colors for frontmatter tags when hovering
  
• Recolored document search
  
  
  
  
  
• Recolored Dropdown background color
  
• More attributes for <i></i>: Instructions Here
• Embed link can be moved or removed: Instructions Here

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

[SlRvb]

Small Update:

• Fonts updated for mobile (Hopefully)
• Fixed Checkbox indent
• Even bullet list line recolored
  
  
  
• <i></i> isn’t automatically italicized
  
• Tables recolored to appear better in embeds
  
  
  

[SlRvb]

Update:

• New Alternate Theme snippets
• Recolored the file icon
  
• Squared the flairs and tag pane hover
  
  
• 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

[SlRvb]

Update:

• Editmode bullets look like preview mode
  
  
  
• Image Position has new attributes to move the images with more precision. Instructions here
  • Note: some images will be shifted over, so check images with any variation of p+ct p+cct or p+cb p+ccb to see if you need to move them with the new attributes.
• Kanban snippet now supports numbered lists
  (Get Snippet)
  

[SlRvb]

Update

• Checked items now dull everything not just text
  
• Kanban snippet checkboxes now no longer mess up all checkbox formatting.
  Get Update
• Embed headings can now be hidden:
  
  
• Fix formatting for bolded text in settings:
  Before
  
  
  
  After
  

[SlRvb]

Small Update

• Slight fix for bullets to work better on mobile (No visual change, just functional)
• Mermaid graphs recolored
  
  
  
  
  
  
  

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

[SlRvb]

Update

Kanban is now available in ITS!

(With permission from kanban’s creator @Maned )

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

[SlRvb]

Update

• List arrow and checkbox padding fixes for Kanban and elsewhere
• @darakah’s Timeline plugin redesigned to fit with ITS
  
  
  
• @mgmeyers’s Style Settings plugin support! (Get the plugin on the community plugins page to customize the ITS theme to your liking!)
  • Customization:
    • Fonts
    • Horizontal line logo
    • Workspace colors
      • Sidebars
      • Notes
      • Lines
      • Folders/Files
      • Codeblock
    • Graph colors

Style Settings Examples:

SlRvb: Recreated

ITS Dark

[SlRvb]

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)

[Outis]

Yeah, that one.

@SlRvb you left out Preview font size.

[SlRvb]

Update

• Fixed Style Settings text font size not doing anything
• 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)
    

Naked Embeds

• Toggle them on in the Style Settings
  
  
  
  • To hide embed bullet add nob to the link: ![[Embed|nob]]
  • To hide embed link add nlk to the link: ![[Embed|nlk]]
  • To restore embed look add em to the link: ![[Embed|em]]
    
    
    

[Felipe]

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?

@SlRvb

Heading:

• Underline: spans across the page depending on the heading

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

Thanks!

[SlRvb]

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