# Theme: ITS (Dark/Light Theme) **URL:** \ **Category:** Themes & CSS snippets\ **Tags:** custom-css\ **Created:** [February 11, 2021, 8:54pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838 "2021-02-11T20:54:51Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 11, 2021, 8:54pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/1 "2021-02-11T20:54:51Z")
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](https://github.com/SlRvb/Obsidian--ITS-Theme). ![ITS](https://forum.obsidian.md/uploads/default/original/3X/1/4/142583891e49a51aafa6204505063520a4225279.png) * * * ## Dark Mode: ![Darkmode](https://forum.obsidian.md/uploads/default/original/3X/e/3/e3a264313e7be8be3e37f9a8125f42ad53a6acb2.png) **Features:** ![Darkmode-Features](https://forum.obsidian.md/uploads/default/original/3X/6/9/6948146abaef85bd20f3710443dd2f0fee3d6199.png) **Edit Mode:** ![Darkmode-Editing](https://forum.obsidian.md/uploads/default/original/3X/d/c/dceb0bd67b6e278c4a1f62f9e0ed80ea6c66f49a.png) * * * ## Light Mode: ![Obsidian_ojmGUIUfVp](https://forum.obsidian.md/uploads/default/original/3X/3/1/31b097599aaeb3408f8c37a581111fec2b24a326.png) **Features:** ![Lightmode-Features](https://forum.obsidian.md/uploads/default/original/3X/5/6/566476d5b9f3fef5b4603784d564ab69d01482f3.png) **Edit Mode:** ![Lightmode-Editing](https://forum.obsidian.md/uploads/default/original/3X/8/6/866d6adc60d5fba29830d0c994bb34e6d2107a74.png) * * * # 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](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/223) - Tag Pills (Rectangular) - Metadata minimal style - Checkboxes - _Credit:_ [Kepano: Nicer Checkboxes](https://forum.obsidian.md/t/nicer-checkboxes/2238) - **Images:** - **Image Adjustments** [_Instructions Here_](https://github.com/SlRvb/Obsidian--ITS-Theme#image-positions) - 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](https://forum.obsidian.md/t/image-zoom-click-hold-to-expand-images/5164) - **\\** for images or other files attributions - Adjustable: [Instructions here](https://github.com/SlRvb/Obsidian--ITS-Theme#ii-attributes) - **Blockquotes** - Soft background - Wider blockquote - Quotation marks added top right corner - **Customizable “Blockquotes”** with `` (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](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2) - 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](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/109) - **Text Wrapping** - Outline Pane - Tag Pane - File Explorer Sidebar - Embed Titles - Query Titles - **Embed Adjustments** [Instructions Here](https://github.com/SlRvb/Obsidian--ITS-Theme#embed-adjustments) - 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](https://github.com/SlRvb/Obsidian--ITS-Theme#alternate-themes) - **Kanban** (With permission from kanban’s creator @Maned 🙏🙌) - **CSS Classes** [See More/Help Here](https://github.com/SlRvb/Obsidian--ITS-Theme#css-classes) - **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](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/S%20-%20Kanban.css) - [Image Adjustments](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/S%20-%20Images%20Adjustments.css) —\> [Help Info here](https://github.com/SlRvb/Obsidian--ITS-Theme#image-positions) - [Embed Adjustments](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/S%20-%20Embed%20Adjustments.css) —\> [Help Info Here](https://github.com/SlRvb/Obsidian--ITS-Theme#embed-adjustments) - [Aside](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/S%20-%20Aside.css) —\> [Help Info here](https://github.com/SlRvb/Obsidian--ITS-Theme#aside) - [Folder Styles](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/S%20-%20Folder%20Styles.css) - [External Link Icons](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/S%20-%20External%20Link%20Icons.css) * * * **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)](https://forum.obsidian.md/t/display-side-by-side-image-grid-css-snippet/9359) ## Donations If you want to donate and support me: [**Ko-fi**](https://ko-fi.com/N4N64JN4L) ---
**Author:** ![alltagsverstand](https://forum.obsidian.md/user_avatar/forum.obsidian.md/alltagsverstand/32/4265_2.png) [@alltagsverstand](https://forum.obsidian.md/u/alltagsverstand)\ **Post date:** [February 12, 2021, 7:31am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/2 "2021-02-12T07:31:00Z")
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? ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 13, 2021, 9:21am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/4 "2021-02-13T09:21:44Z")
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](https://emojipedia.org/microsoft/) since I’m on windows. ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 13, 2021, 3:22pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/5 "2021-02-13T15:22:08Z")
**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** ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 13, 2021, 6:52pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/6 "2021-02-13T18:52:30Z")
**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 ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 15, 2021, 9:19pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/7 "2021-02-15T21:19:16Z")
**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 ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 17, 2021, 7:26pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/8 "2021-02-17T19:26:15Z")
**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](https://forum.obsidian.md/uploads/default/original/2X/f/f7dfb59eb0a8138ec2f4eaeb701033b6c4171631.png) ![Obsidian_OEBGYJSseq](https://forum.obsidian.md/uploads/default/original/2X/d/d163e43176d5d51d89ad2bf3a61cb21e1c9be866.png) ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 21, 2021, 7:52am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/10 "2021-02-21T07:52:51Z")
**Updates:** - Fixed Star Pane files padding - Changed external link icon and editor syntax color (for dark mode) to match theme better ![Obsidian_gYGh9WDJeM](https://forum.obsidian.md/uploads/default/original/2X/8/84fb7e7401814c20f916fb64f68160e9599e03fc.png) ![Obsidian_bnlofhveW9](https://forum.obsidian.md/uploads/default/original/2X/4/4e0a2d2c29f585701f5d4e2300282e5c1d43a887.png) - Fixed the horizontal line thickness - Fixed editor list lines to center them properly - Removed iFrame borders and attachment file borders ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 21, 2021, 10:28am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/11 "2021-02-21T10:28:21Z")
**Mini Update:** - Fixed Outline Pane Padding - Squared tags & aliases for metadata ![Obsidian_ZMqHzOABYO](https://forum.obsidian.md/uploads/default/original/2X/8/878e6e090a2191538b309dd0ab51d90ffa3b1e0b.png) ![Obsidian_ErL977Jh3e](https://forum.obsidian.md/uploads/default/original/2X/5/5453e0b151eccc70cb8ccbdb7e8469951cb013fc.png) ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 25, 2021, 3:35am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/12 "2021-02-25T03:35:25Z")
**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](https://forum.obsidian.md/uploads/default/original/2X/4/4050a29f063c99cd8a8a8b3f972fe92a2252a609.png) ![Obsidian_SDqH92csCa](https://forum.obsidian.md/uploads/default/original/2X/f/fdf27592727c22b617fee16ccb6570bdd4832564.png) ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [February 25, 2021, 7:53am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/13 "2021-02-25T07:53:11Z")
ITS theme goes from strength to strength !! ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [February 27, 2021, 1:33am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/14 "2021-02-27T01:33:48Z")
**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](https://github.com/SlRvb/Obsidian--ITS-Theme#image-positions) - **Showcase:** ![NSi4C0KxSy](https://forum.obsidian.md/uploads/default/original/2X/3/34f7ced56b141908b6124d30785e62d64fa486f9.png) ![Obsidian_tjVM25DDni](https://forum.obsidian.md/uploads/default/original/2X/7/74d403fcf34d4fb7a22c5aeb480144c9422a5444.png) - **\\** visually updated - `alt="left"` and `alt="right"` will move the attribute’s text to the left and right ![Obsidian_zWv6oR2M7T](https://forum.obsidian.md/uploads/default/original/2X/6/63e892c0a0b69ea233396671d6ba5ed2a07a3831.png) ![Obsidian_UJABPcOGgk](https://forum.obsidian.md/uploads/default/original/2X/a/aa84a77d51038fe1032358a46cab457f4b3b4291.png) - Fixed the weird duplication of image zoom code _instead_ of the image grid code - Embeds are now stylized darker without borders ![Obsidian_2IaE6ctVvi](https://forum.obsidian.md/uploads/default/original/2X/b/b1e9f0754b3dee0f10c125605532bd7b2fea0b2d.png) ![Ywml8L7dld](https://forum.obsidian.md/uploads/default/original/2X/a/a6d7507e65c6bc3ed5badb5ddeae91ab763b0ffa.png) - Dataview plugin’s table headers fit the theme ![Obsidian_m864NuUp5M](https://forum.obsidian.md/uploads/default/original/2X/3/31ceaf801dd03617d7ae9b8fef90b5c6558f3e37.png) ![3kEsAvMTmH](https://forum.obsidian.md/uploads/default/original/2X/7/7dc0b41a56cc54f133452dbbe739ad56f7379523.png) - Removed the right side blockquote borders ![Obsidian_mdNhbbBVUB](https://forum.obsidian.md/uploads/default/original/2X/2/22515b6c2373c940a1be9bb07c0bde4844ff09bd.png) ![XZUBBWeG6y](https://forum.obsidian.md/uploads/default/original/2X/3/348418acf08adffd8ce8a2f529528f9f1b1b10be.png) ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [March 1, 2021, 4:42pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/15 "2021-03-01T16:42:01Z")
**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](https://forum.obsidian.md/uploads/default/original/2X/a/a53a00a589483525ec743321b1b99b756e526d59.jpeg) - 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 ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [March 4, 2021, 8:23pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/16 "2021-03-04T20:23:25Z")
**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](https://github.com/SlRvb/Obsidian--ITS-Theme#embed-adjustments) ![Obsidian_7mOj1K7kp1](https://forum.obsidian.md/uploads/default/original/2X/2/2a4c0462a1759d966270cacb186f750742e04f0d.png) - 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]]` ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [March 5, 2021, 4:09am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/17 "2021-03-05T04:09:37Z")
What do you mean by “hide embed titles”? ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [March 5, 2021, 2:10pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/18 "2021-03-05T14:10:25Z")
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. ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [March 5, 2021, 2:22pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/19 "2021-03-05T14:22:08Z")
**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; }` - ![Obsidian_QXSdLRn1TU](https://forum.obsidian.md/uploads/default/original/2X/3/31cd7b5b0a163ddc59c7fa7ac5ec6110de7cd1de.png) ![Obsidian_OIP0sLpSpc](https://forum.obsidian.md/uploads/default/original/2X/b/b21f3d24af015755bd4af7856ee555ce3b06e722.png) - Updated horizontal line symbol ![YOzjjBqk5z](https://forum.obsidian.md/uploads/default/original/2X/c/c18f7341f540d2f9e9c2805026ec28b8e33334d8.png) ![Obsidian_ROD3SUODbv](https://forum.obsidian.md/uploads/default/original/2X/f/f176155ef7ac9ed70fdaaccf4ab7d1322f7a00d8.png) ---
**Author:** ![Klaas](https://forum.obsidian.md/letter_avatar_proxy/v4/letter/k/ecc23a/32.png) [@Klaas](https://forum.obsidian.md/u/Klaas)\ **Post date:** [March 5, 2021, 4:44pm UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/20 "2021-03-05T16:44:15Z")
The horizontal line symbol does not render for me. In the code block it looks like this: ```css /*Stylized hr Line*/ .markdown-preview-view hr::after, div:not(.CodeMirror-activeline)>.HyperMD-hr-bg::after { content: "🗲"; ``` which is rendered as 🗲 ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [March 8, 2021, 9:03am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/21 "2021-03-08T09:03:44Z")
**Small Fixes:** - Switched the horizontal line unicode symbol to emoji for cross-platform compatibility ![Obsidian_Kq53rdujcZ](https://forum.obsidian.md/uploads/default/original/2X/f/fd34bd72fb71b461cf0614eb07a1802caacf167a.png) ![R2gtE2narM](https://forum.obsidian.md/uploads/default/original/2X/7/71cfd4e5d41ea8ae79d5c70c56aec63be7438e27.png) - Fixed colors for blockquotes, sliding pane (hid the gradient), darkmode text, error screen buttons, light mode \\ attribute text color ---
**Author:** ![SlRvb](https://forum.obsidian.md/user_avatar/forum.obsidian.md/slrvb/32/9636_2.png) [@SlRvb](https://forum.obsidian.md/u/SlRvb)\ **Post date:** [March 8, 2021, 11:39am UTC](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838/22 "2021-03-08T11:39:29Z")
**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](https://forum.obsidian.md/uploads/default/original/2X/4/44be93cb87974bab4a81026477970c1f4fc1383b.png) ![J8vNSyhhlv](https://forum.obsidian.md/uploads/default/original/2X/c/c5c072f3808a8f643cf56fc645a0d23f78a8b78e.png) - Recolored header underline and table borders for a blue-r tint [Next page](https://forum.obsidian.md/t/theme-its-dark-light-theme/12838.md?page=2)