Theme: ITS (Dark/Light Theme)

That’s strange, I can’t seem to recreate it on my end :thinking:. This seems like Obsidian just threw out any of my css styling in preview mode, but I’m not sure why.

If it still occurs on reload, then I’d open up the dev console to see what would be overriding it.

1 Like

Hello @SlRvb !

Thanks for the reply. I’m gonna take a look when I got home to see the Dev Console and try to restart too The only sure that I have is that there is no console error.

I’m gonna try to change the colors to see if changes something.

Thanks for your help :slight_smile: !!!

Hmm, I think I may know what could have gone wrong.

I switched to :is() to test it out, but it may not work on your device. I’ve reverted the change so if you update the theme, I think that might fix the issue.

1 Like

Thank you so much @SlRvb !!!

codeblocks in preview mode are back :slight_smile: :slight_smile: :slight_smile:

Sorry if I always bring something weird. Is good to know that we are on different OS.

  • In the future I’m gonna remember to point this any issue report.

I wish you a fantastic weekend!

Thanks again :slight_smile:

1 Like

Thank you for creating this theme, it is the best themes for customizing and even the SlRvb Gray theme is so good.

I just recently open this theme on mobile and the fonts doesn’t work, I figure my iPad hasn’t have the fonts yet.

Do you know anyway to install fonts on iPad? I have tried ifonts and the installed fonts works on other apps like pages and such but no luck on obsidian. Is this a bug on Obsidian or am I doing something wrong?

I don’t know if this is correct since I’m not using iPAD. But generally, you may need to Base64 encode the font with https://transfonter.org/ and add that to @font-face {font goes here} in your CSS. Try searching the forums for that technique for more specific information. Here’s a place to start from @EleanorKonik.

Custom CSS: Line under Heading in editor mode

Things I have tried

  • CSS
/** ........ 2.11.3 Heading Horizontal Lines -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/288?u=tallguyjenks */
h1,h2,h3,h4,h5,h6 {
	display: flex;
	width: 100%;
	align-items: center;
}
h1:before, h1:after, 
h2:before, h2:after, 
h3:before, h3:after, 
h4:before, h4:after, 
h5:before, h5:after, 
h6:before, h6:after {
	content: '';
	background: var(--bright-aqua);
	height: .1em;
	margin: .2em;
	flex: 1;
}
h1 > a {
	padding: 0 0.25em!important;
}
h2 > a {
	padding: 0 0.25em!important;
}
h3 > a {
	padding: 0 0.25em!important;
}
h4 > a {
	padding: 0 0.25em!important;
}
h5 > a {
	padding: 0 0.25em!important;
}
h6 > a {
	padding: 0 0.25em!important;
}

.cm-header::after {
  content: '';
  flex: 1;
  margin-left: 1rem;
  height: 1px;
  background-color: #000;
}

What I’m trying to do

  • Code is working in preview mode but not in editor mode
  • I want this type of display in editor mode too

You need to add the class for the editor’s headers in your h1-h6 styling:

h1,h2,h3,h4,h5,h6, .HyperMD-header {
	display: flex;
	width: 100%;
	align-items: center;
}

.HyperMD-header::after,
.HyperMD-header::before {
    content: '';
    flex: 1;
    height: 3px;
    background-color: #000;
}

If you’re using the All Alternate Themes.css file, it has some of the fonts encoded into it, but otherwise, you’ll have to do what @Scribe has mentioned for other fonts to show up.

1 Like

Thank you @SlRvb , the All alternate themes works!

Hello, I have a bug to report

Admonition plugin does not show numbering list correctly

example:

I have tried turning off all snippet and it seems to persist

I think that’s an issue with monospace fonts being wide, but I think it should be fixed if you update the theme.

I tried updating the theme but the problem still persists it seems.

The bullet list seems to work fine

Updates

  • Added Recursive fonts to All Alternate Themes snippet
  • Fixes
  • Icon Updates
    • Replaced Bullet and Writing External & Internal Link Icons to support more devices
    • Active File Icon color matches text color
      FHMjrz5WdO Obsidian_ODOSVPM18L
    • External Link Icon changed
      STR4LkEF2V Obsidian_eoaA8SoxHt
  • Image Adjustments
    • Fixed Width sizing wm-small to wm-sm
    • Added Invert Options
    • grid option to align images to grid
  • CSS Classes
  • Plugins Styling Supported
    • Breadcrumbs restyled
      Obsidian_ocl7GsFenv PJSAHVmlUa
    • Leaflet restyled to support dark and light mode
      XZpGmKUE2b Obsidian_B4OsZ7Y3Ir
  • Style Settings
    • Swap order of Sliding Pane Icons toggle
    • Personal Kanban Plugin Adjustments toggle
1 Like

Hello, sorry last week was a lot to take in for me so I didn’t have the time to go up in here.

I have check the Style setting again, apparently I have some font in the setting which have some Fonts i was testing out and forgot to roll back. It all fixed with a reset by now.

Thank you a lot @SlRvb

1 Like

Update

  • Default Obsidian Font Size slider support
    • Note: Need to toggle on Mobile Resize if you want to use the Note Text -
  • Graph:
    • Highlighted Note for Graph color changed
      Z6la0MiU2i
    • Lightmode Graph Hover color changed
      RbGE6KF3d7
      slider in the Style Settings
  • .i-at class to use with Markdown Attributes plugin: {: .i-at } to style like regular <i></i>
  • .s-li class for spaced lists
  • Templater Plugin Highlight Syntax colors fixed to be more readable

Style Settings

  • Center Images toggle to center all images in vault
    • Find under Note Elements
  • Illusion Theme Inspired Headings toggle to view heading in block with a background for both edit and preview mode
  • Specific Heading View default colors adjusted
  • Display Folder Arrow On Hover toggle to restore folder arrow when hovering over folder title

All Alternate Themes

All fixes in the All Alternate Themes snippet as well.

  • School Days
    • Vault Title Font changed to Collegiate
    • Horizontal Line & Bullet Icons changed
    • Lightmode Color Fixes:
      • Titlebar background
      • Codeblock slightly darkened
      • Graph Line Fix
      • <i></i> color changed
    • Darkmode Color Fixes
      • Codeblock yellow color restored
      • Alternating colors for bullet lists

  • D&D
    • Symbol Changed to Icon
    • Fixed Writing Class
    • Darkmode Color Fixes
      • Code Text & Bg easier colors to read
      • Graph Line and Background Colors Changed
    • Lightmode Color Fixes
      • Aside Background color changed
      • Menu Sidebar color changed

  • SlRvb Blue
    • ^Snippet Renamed
    • Lightmode Outerbar and Aside Background Color changed

  • SlRvb Gray
    • Darkmode Colors Fixed
      • Graph background & Line Colors Changed
      • Norwestor Font Weight reduced to remove fuzziness
    • Lightmode accent color fixed

New CSS Snippet Themes

New themes are included in the All Alternate Themes snippet as well.

Tangerine Dunes

Link


Drowned

Link


Image Adjustment Updates

Inspired by the Discordian Theme’s Image Enhancements

properties

  • Can now use ![[image.png#center]] in the source of the images to use instead of the alternate text ![[image.png|center]]

Captions ![[image.png#cap|Caption text here]]

:warning: Note: Markdown in caption will not work/render and does not work on external images


  • Image Grids
    • CSSClass: img-grid
    • Flags: ![[image.png#grid]] ![[image.png|grid]]



Upcoming

  • Markdown Attributes plugin support with
    • Image Adjustments Snippet
    • Embed Adjustments Snippet
  • ITS Icons included as toggle
3 Likes

Thank you for this nice theme!
I just updated it, but now the tags look way bigger compared to the rest of the text (which was not the case before), even though my font size of the note is the same. It looks like I can’t make the tags smaller without also making the general text in the note smaller. Is there a way to change the size of tags independently of other text?

Also, I try to figure out how to change the font size for the side panel with the file explorer. Is this possible?

Oh I see what you mean by the text size of the tags getting bigger whoops :grimacing:. I’ll fix that and add the option to resize tag text independently from the note text size.

For the font size of the side panels, it should be located under Workspace > Workspace Resize. Just toggle on and slide the Sidebar Text Size slider to adjust that.

1 Like

I love the Drowned theme so much, it is just so beautiful, thank you!

The new Illusion inspired header is also good but since I am using alternative theme, it is kinda outta place with the red. You probably already had this on the next update. Again, I just want to say great work!

1 Like

I believe I caught that a little after I had posted the update, so I think if you download the snippet again, it should have the Illusion header colors match the snippets.

2 Likes