Theme: ITS (Dark/Light Theme)

Did you share this script somewhere? I am interested in it :smiley:

Update

Fixes

  • HTML Progress bar restyled <progress value=# max=#> 7dlIDEmSQ6
  • dvl class small drop shadow added
  • kanban, dvl combined classes now have a border and a drop shadow
  • New paraphrase blockquote syntax styling: >> Paraphase blockquote
  • Plugins
    • Slides: Fixed Link & Blockquote Colors
    • Removed some !importants on old styling
    • Cooklang: Fix missing the Step headers
    • Fantasy Calendar: Restyled Month View with nicer weekday & week numbers background MukHs7l6OH
    • Admonitions: Fix being unable to edit below admonitions blocks in Live Preview
  • Live Preview
    • Edit Codeblock stays square
    • Numbered Lists align properly
    • Added Header Underline to Live Preview
    • Heading Arrow & Level Indicator no longer overlappting
    • Image & Embed left, locl, right, locr disabled in Live Preview to avoid being unable to select/edit text beside the images/embeds.

Alternate Themes

Style Settings

  • Specific Heading Notes Only Toggle to prevent Heading Specific Styling from affecting some plugins panes
    Under: Text > Specific View Heading Changes > Specific Heading Notes Only
  • Toggle To Disable Murf’s Rainbow Lines
    Under: Note Elements > Lists > Disable Murf's Rainbow Lines
  • Fix Double Bullet issue Temporary Toggle; this will misalign bullet/number and task lists
    Under: Note Elements > Lists > Fix Double Bullet
  • Header Color Override toggle to override other markdown stuff with header colors if it’s in the header
    Under: Note Elements > Headers > Header Color Override
1 Like

Updates

Fix

  • Alternate Checkboxes now show in Live Preview Admonitions and Dataview (ITS Theme only for now)
  • Error Button colors fixed for light and darkmode
  • Image Adjustments no longer slows down Leaflet

Style Settings

  • Toggle to disable Alternate Checkboxes under Note Elements > Lists > Checkboxes > Disable Alternate Checkboxes to support the Snippetor plugin
1 Like

Update

  • Small drop shadow on blockquotes and buttons
  • Settings Sidebar headers re-styled

Fixes

  • Workspace Loading Progress Bar squared
  • Community themes delete button recolored and squared
  • Live Preview: Dataview Tables and Error text wraps properly
  • Blockquotes Live Preview only on top of blockquote & hidden on mobile
  • Search/Back/Out-going & Query line separator spacing fixed
  • Switch inline Dataview syntax colors
  • Live Preview unresolved links colored correctly
  • Link favicon shows up properly in popover
  • Image Adjustments left, locl, right, locr now works in popover
  • hcl cssclass in Live Preview recolors the header borders and centers text
  • hc Centers headers in Live Preview
  • Removed Gradient Underline in Initiative Tracker
  • Recolored Active Button

  • Note Text Size Style Setting works with Live Preview
  • Default Bullet Symbol updated for Live Preview

Style Settings

  • Note Text Size step reduced to 1 for finer tuning
  • Alternate Themes included! Toggle them on in the Style Settings. (Fonts not included)
    Under: Alternate Color Schemes
    • Added TTRPG dropdown to select D&D or D&D WOTC (Now renamed D&D WOTC/Beyond)

Alternate Themes/Color Schemes

  • Alternate Color Schemes as CSS Classes for individual notes!
  • Some limitations apply like background color for notes don’t display :pensive: I’m still working out a fix
cssclass: slrvb-b     # SlRvb Blue
cssclass: slrvb-g     # SlRvb Gray
cssclass: s-d         # School Days
cssclass: dnd         # TTRPG > SlRvb D&D
cssclass: wotc-beyond # TTRPG > WOTC/Beyond
cssclass: t-d         # Tangerine Dunes
cssclass: drwn        # Drowned
cssclass: mini        # Minimalist



New Alternate Theme

Minimalist

  • Grayscale-ish coloring for focus
  • Works best with the minimalist workspace toggles for additional focus
  • (ITS Theme Style Settings only (For now))


For a full minimalist workspace:

  • Toggle these settings on:
    1. Workspace > Minimalist Workspace > Hide All UI
    2. Workspace > Minimalist Workspace > Writing
    3. Workspace > Minimalist Workspace > Dim Scrollbar
    4. Note Elements > List > 1 Color Bullets & Lines
  • Toggle these settings off:
    1. Note Elements > List > Colorful Task Background

Alternate Checkboxes

  • Should now work in embeds
  • Swap lightmode Colors for Brainstorm and Information

New Alternate Checkbox types:

- [p] Paraphrase
- [L] Location
- [E] Example
- [A] Answer
- [r] Reward
- [c] Choice


This checkbox update already included in ITS update.
Redownload the Alternate Checkboxes Snippet to update your snippets.

1 Like

Update

  • dvl-c cssclass to create Notion Gallery inspired items
    • Only affects both Dataview Tables & Lists

Fixes

  • LP Header Indicators no longer clip outside the canvas when Readable Line Length toggled on
  • Checkboxes position adjusted
  • Squared Kanban plugin’s empty slot
  • Reapplied Red Graphite Inspired Heading syntax’s sizing/colors
  • Footnotes clicked on long notes no longer only scroll halfway up the page
  • Scrollbar colors css fixed

  • Image Adjustments banner, profile work properly now
    • Changed pr, pl, pc, pt, pb to p+r, p+l, p+c, p+t, p+b to not conflict with profile
    • If this breaks your workflow this regex search & replace code should work if you use something like VSCode:
      • Search: (!\[)([\w\+\-\s]+)?\|([\w\+\-\s]+)?p([lrtcb])([\w\+\-\s\]\|]+)?([\]])
      • Replace: $1$2|$3p+$4$5$6
    • Let me know if the regex doesn’t catch all cases and I’ll try to update it

Alternate Color Schemes

  • New Notion inspired Alt Color Scheme!
    • Restyles Dataview & Kanban plugins to mimic Notions Board and Gallery views




  • Alternate Color Scheme CSSClasses now apply the background color and WOTC’s edges!


Style Settings

  • Toggle for Notion Styling for Kanban plugin
    Under: Plugins > Kanban Plugin Notion Style

  • Slider to adjust Note Width when Readable Line Length in Editor Settings toggled on
    Under: Workspace > Workspace Resize > Note Width

  • Slider for Vault Title Font Weight
    Under: Text > Size > Vault Title Weight

  • Scollbar Color Pickers
    Under: Colors > Workspace > Scrollbar FG/BG Color

  • Table Header Color Pickers
    Under: Colors > Note Elements > Table Header BG Color
    Under: Colors > Note Elements > Table Header FG Color

1 Like

I’ve used many of the top themes on and off but keep on gravitating back to ITS. Thank you for all the effort that you put into this theme. Much appreciated!

Bonjour à tous.

Excuse my English, I’m French.

I’m new to Obsidian and I’m using since today this beautiful ITS theme with its alternative WOTC option.

I have a little problem with the “Folder Icon” plugin. Well, I think. Because, although I can change the icons of my folders (as well as the Inherit function) as long as I’m working in my session, as soon as I reload the folder, the icons disappear and change back to the original icon of the Theme.

Is this normal for the “ITS Theme”? In this case, well… I don’t insist. I like the theme enough as it is.

Or is it a bug? Then I’d rather fix it.

Thanks for your help.

Sorry for the late reply! I can’t seem to recreate this error with the Folder Icon Plugin :thinking: it sounds like it might be an issue with the plugin itself.

Update

  • Centered .hc Underlines & Recolored .hc h6
  • Notion Alt Color Scheme added to Alternate Themes Snippet
  • Dataview Cards css class included in ITS and as a snippet
  • Excalidraw Plugin supported and re-styled to match the ITS Theme style
  • Hover Editor Plugin Restyled to match ITS Theme style
  • Image Adjustments now has wfull option to expand image to it’s full width (to be used in image grid callouts)
  • Style Settings now has icons for root sections!

Fixes

  • Fix codeblock text sizing and Live Preview display
  • D&D/WOTC snippet header issues fixed
  • Scrollbars re-squared
  • Alternate Checkboxes
    • Checkboxes now show default checkbox when using symbols not supported
    • Text colors fixed
    • Icons aligned horizontally to center now
  • Checkbox alignment fixed for v0.14+
  • Colored Lines & Bullets colors applied to default checkboxes properly
  • Fix center for Embed Adjustments
  • Alignment of numbered lists fixed
  • Popover Preview for Hover Editor plugin spacing issues fixed
  • Colored bullet colors fixed
  • Table Header styling applies in LP
  • Table border line color fixed
  • Image Adjustment ctr, center, left, right should work and work on publish as well
  • LP Blockquotes adjusted to look a little closer to Reading mode Blockquotes
  • Fixed Bullets disappearing on Mobile when using ul { columns: #; }
  • Style Settings Fixes
    • Murf Rainbow List Lines settings removed, use Obsidian Indentation Guides instead Settings > Editor > Indentation Guides
    • Neon List Lines moved to Obsidian’s Indentation Guides instead to avoid issues with Better Footnotes plugin
    • Minimized Yaml/Frontmatter will now color red if your yaml is invalid
    • Ligature Toggle should work again for lists, etc
    • Specific Heading Styling should now work
  • Heatmap Plugin styling fixed

Style Settings

  • Rearranged style settings
    • Specific View Heading Changes moved to Note Elements > Headers
    • Note Elements: Headers, Frontmatter, Horizontal Lines
    • Centered Tables to Note Elements > Tables > Center Tables
    • Colorful Lists toggles moved out of List and into List Styles section
  • Removed Fix Double Bullet Issue toggle
  • Toggle to Undo Mini Header Hash Styling
  • Added Toggle to Hide Live Preview Header Indicators
    • Under: Note Elements > Header > Hide Header Indicator

  • Added sliders to resize the Settings Menu
    Under Workspace > Workspace Resize > Resize Settings Menu Width/Height
  • Added Note Width slider
  • Added Note Text Weights slider
  • Added Toggle to disable List Lines
    • Under: Note Elements > Lists > Remove List Border Lines

Obsidian_flYzwDfOb5


  • Added Tables Section: Note Elements > Tables
    • Sliders to adjust padding for table headings and cells
    • Toggle to remove alternate background colors
    • Toggle to add border lines to tables
    • Toggle to Center tables or Widen tables
    • Sliders to adjust cell and header font sizing
    • Dataview Table Adjustments:
      • Toggle to style dataview table headers like default tables
      • Toggle to disable Dataview’s Table header larger font size
      • Toggle to hide list lines in Dataview tables

055aYb82GA


  • Added Links Section: Note Elements > Links
    • Dropdown for different link styling

Obsidian_hBD6G5Jhnm


  • Added slider for edit mode frontmatter text

    • Under Note Elements > Frontmatter > Frontmatter Text Sizing
  • Cropped image in Popover css moved to class toggle

    • Under Note Elements > Crop Image Height In Popover
  • Undo codeblock wrapping

    • Under Note Elements > Disable Codeblock Wrapping
  • Tags Note Elements > Tags

    • Colored text tags, no background color: Colored Text Tags toggle
    • Tag font size: Tag Font Size Toggle and Tag Font Size slider
    • Tag text left, right or, center Tag Text Alignment
  • File Explorer Workspace > File Explorer

    • Add Vault Title Icon toggle
    • Change Folder/File Icon/font family

Obsidian_0QVXQ7e801

Callout Styling

  • Included in the theme and as a snippet

  • Callout Guide

  • Callout Types:

    • Image grids: [!grid]/[!masonry]
    • Infoboxes: [!infobox]
    • Kanban: [!kanban]
    • Captions: [!caption]
    • Recite: [!recite]
    • Metadata: [!metadata]
    • Cards: [!cards] + dataview metadata property to style dataview tables
    • Table: [!table]
  • Callouts can be resized using the same syntax as Image Adjustments

  • Alternate callout Styling Toggle


2 Likes

Hello @SlRvb

I just installed your theme on a Mac and the default theme seems to not display correctly. All regular text are completely black. I checked in Style settings and fonts color are not defined as Black there.
All Options menu are also black.
Side bar list is grey.

Alternate themes work well, now using the Dune one which looks good too.

Side question, how to get the style with the text in the middle of the lines, that you use for your publish site?

Thanks

Screen Shot 2022-07-03 at 6.58.09 PM

Screen Shot 2022-07-03 at 7.02.50 PM

Weird, do happen to have the Minimal plugin installed? I think that should be turned off to avoid the black text issue.

I’m not 100% sure what you mean, but I think you might want to toggle on Readable Line Length in the settings to do that.

Thanks, Minimal plugin was the issue.

The part I’m missing is how to have a header in the middle of the line and not above.
When I check this option, it doesn’t change.

Well I still have to go through the long list of options, I’ll figure it out eventually.


Any chance you’re looking at it in Live Preview Mode? The lines on either side only works in Reading mode.

I was going to say I tested both, but just for the sake of it I retested… And you’re right again, it works on preview.
Conclusion I need vacations to fix my non-functioning brain.

Thanks for the quick reply, and the Theme.

1 Like

Update

  • Horizontal split and vertical split icons swapped
  • Tag pane count styling fixed
  • Prompt/quick switcher selected option colors adjusted
  • Live Preview Rendered codeblock line height fixed
  • Resize toggle now resizes more UI elements
  • Wider Community Theme Search Bar
  • Image Adjustment Snippet: locl and locr now work properly
  • Notice notification background color adjusted
  • Blockquote styling fixed in Live Preview embed renders
  • Collapse Icon coloring fixed

  • Lists
    • Right To Left Lists support
    • Numbered sub-bullet in an bullet list error fixed
    • Fix spaced numbered lists styling
  • Publish
    • Link icon matches ITS Link icons
    • Fix Checkbox alignment
    • Fix text sizing
    • Add file explorer lines and icons
  • Mobile
    • Square mobile suggestion containers
    • Low opacity backdrop instead of black background (when opening sidebars)
    • Center title of fullsized sidebars
    • Note Title padding widened
  • Plugins
    • Initiative Tracker header colors fixed
    • Sliding pane styling fixed
    • .dv dataview tables list spacing fixed
    • Kanban button styling fixed
  • Obsidian v0.15+
    • Border colors and width fixed
    • Focused elements re-styled
    • Popout note title icons fixed
    • Header styling fixed/updated

Callouts

Callout adjustments and different types! Included in the ITS Theme by default but also available as a snippet.

Checkout the Callout Guide for types and metadata adjustments and download link

  • [!infobox]
  • [!captions]
  • [!kanban]
  • [!grid]
  • [!recite]
  • [!metadata]
  • [!cards]
  • [!table]
  • [!aside]
  • [!timeline]
  • [!column]



Alternate Checkboxes

  • New [o] for options checkbox type

Style Settings

  • Sidebar

    • Mobile Styled Sidebars
      • Under: Workspace > Mobile Sidebar Styling
    • Sidebar Tab Styling Options
      • Under: Workspace > Sidebar > Table Styling
  • Note Title Adjustments

    • Under: Note Elements > Note Title
    • Wrap Note Title and Flat Note Title Color moved
    • Added No Note Title Background Color
    • Added Underline Styled Note Title
    • Added Overline Styled Note Title
  • Toggle to undo Floating Status Bar

    • Under: Workspace > Wide Status Bar
  • Added Header Line Color Styling #Fix

    • Under: Note Elements > Headers > Heading Colors
  • New Resize Sliders

    • Ribbon Icons resizing
    • Ribbon width resizing
    • Menu Text slider also resizing padding proportionally
    • Shrinking note text no longer misaligns icons/text
  • Toggle to undo Link Style link colors

    • Under: Note Elements > Links > Undo Link Styling Coloring
  • Added Text Accent (Other Link) Color Option

    • Under: Colors > Other > Text Accent
  • Toggle to undo editor table row wrapping

    • Under: Note Elements > Table > Table Unwrap
1 Like

Really love the e.n.e.r.g.y here !
Very robust theme. It should take all the prizes in my opinion. That said I’ll preface my tiny tiny request with this;
AM ‘new-ish’ at .css? I could do with a bit of hand holding down the font styling alley? I really want to settle on the ITS theme… except my fonts aren’t there by default. By my fonts ,I mean Lucinda handwriting,Comic sans, Karla,Lara and plain 'ol,Times. Or am I missing something obvious? How can I get these into the theme, coz am dead sold on it? :yum:

You should be able to change it just using the regular obsidian settings for font stuff. Just type in your font (even if it doesn’t seem to show up for now) and it should apply the font.

Thanks,I tried this ; but it doesn’t seem to work on my tablet which is what am using . That’s the real reason am a bit confused. I thought there was some additional
steps that I wasn’t aware of. Since, its straight forward,the trouble may be on my end. Thanks for being so accommodating. :yum:

I still use ITS theme,by the way,nothing out there compares to it.

1 Like

Update

Fixes

  • Fix large code sizing because of headers ### ![[code]]
  • Unset Infobox Callout floating on mobile
    • Use |mobile to undo this fix
  • Removed padding from sides of sidebar tabs
  • Note icon height fixed
  • Popout window header padding fixed
  • Fixed Colorful List Bullet missing color on levels 4-6
  • Fixed focused sidebar border
  • Exclude kanban cards from WOTC’s box shadow
  • Fix outlink/backlink styling
  • Graph search input widened
  • Graph menu/control temporarily resizable
  • Sidebar Tabular style restyled to fit the ITS theme design
    Obsidian_1xU4tWJXux
  • Community Theme Delete button padding Fixed

Style Settings

  • Change / Add Center Headings and Center Headings with Lines into a dropdown menu
    • Under: Note Elements > Headers
  • Bottom Navbar Button Toggle moved
    • Under Workspace > Sidebar

  • Add Header Alignment section for moving heading positions individually
    • right, left, and center
    • Under: Specific View Heading Changes > Header Alignment

  • New Background Image options
    • Under: Workspace > Background Image

  • New Document styling toggle
    • Under: Note Elements > Document

1 Like