slrvb/obsidian--its-theme

Theme designed with readability and customizability in mind. Change it easily to your liking with the Style Settings plugin installed.

obsidian--its-theme's Issues

A way to change the '#' size ? In the Edit mode

Where do you change the size of the # in the edit mode ?
They are too small for me.

Thank you for reading this

Pictures aren't centered and clickable

Hi there,

It seems pictures aren't centered and clickable anymore.

Here's a screenshot of a page with a picture aligned on the left side of the page.

And here is the picture I was trying to add into the page to reproduce the issue.

https://cdn.cloudflare.steamstatic.com/steam/apps/272600/capsule_616x353.jpg?t=1424562757

I tried turning on safe mode to see if any plugin was interfering, to no avail. Is anyone facing the same issue ?

Thank you very much for your help, I really appreciate the design of this theme and the constant improvements that have been made to it.

Sub unordered list bullet symbol

Thanks for your great theme again! Smooth on the mobile. A tiny bug with bullet symbols:

About list bullets

Hi SlRvb, thank you for these great themes!

I have 2 tiny problems with list bullets. The first is that when I have ordered sub-lists, the bullets still appear and overlap with the numbers, just as the screenshot shows

The second thing is that I am used to using * as list identifier, but seems like the diamond symbol in the editor view only fits dash -.

I found some other snippet that changes the list symbol in the editor view. Hope it would be helpful.

/* list bullets */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul {
    color: transparent;
    position: relative;
}
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after {
    content: "•";
    position: absolute;
    top: -5px;
    left: 0px;
    color: var(--text-normal);
    font-family: sans-serif;
    font-size: 20px;
}

Invisible cursor

I really like the theme, but there is one problem: the cursor is invisible. Any idea what the problem might be, and where to look for a solution?

Nord alternate theme breaks horizontal line symbol and only shows a square

When using the alternate theme Nord, I see that the symbol for the horizontal line is set to the default thunderbolt icon.

However, I only see a square. Switching to another alternate theme displays it correctly.

Where can I find the Drowned css snippet

I can't find the file, and there is no link in Readme

Subfolders do not expand/contract when used with AidenLx's Folder Note

The latest update to the theme is incompatible with AidenLx's Folder Note.

Top level folders still function correctly, but sub-folders no longer expand or contract in the explorer view.

Deactivating AidenLx's or switching to another theme both resolve the issue.

[bug] Archiving of Kanban boards

There is a problem with the archive indent of the Kanban board

[FR] List line neon effect

The colored lines are great! I want the list lines to have a neon effect that fades from left to right. Can you add an effect and a setting?

Odd symbol shown when frontmatter string ends in "!"

Hi there, I was just testing something using your theme, and it shows an odd display bug that doesn’t happen with other themes:

The original YAML frontmatter is:

Some YAML: Front Matter!

which is a vaild YAML string.

When I change it to

Some YAML: Front Matter

or

Some YAML: "Front Matter!"

it displays correctly.

Please provide a default matching font for D&D WOTC~

D&D WOTC is Great！Can I get a default matching font for it?
I would like to get more colour schemes with parchment as the base colour！

checkbox bug

hello , thanks for your ITS.it's so beautiful. but,
In the synchronization function, excluded folders cannot be displayed normally, and the selected and unselected contents cannot be distinguished. I hope you can change this part of the code.

this is my changed

 /*Table Checkboxes*/

input[type="checkbox" i] {
    background-color: white;
    -webkit-appearance: none;
    box-sizing: border-box;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    position: relative;
    width: 15px;
    height: 15px;
    margin: 0;
    filter: none;
    outline: none;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
}

input[type="checkbox" i]:checked {
    background-color:red;
    -webkit-appearance: none;
    box-sizing: border-box;
    border-radius: var(--radius);
    position: relative;
    width: 1.3em;
    height: 1.3em;
    margin: 0, 0, 0, 0;
    filter: none;
    outline: none;
    border: none;

How do I add colors to folders, and customize icons?

Can't use it

Obsidian displays the "fetching CSS..." dialog and that's it. The theme doesn't get *added, same with preview.

Admonition in Live Preview - small style fix (?)

Hi, thank you for the wonderful theme! I've been playing around with it, and noticed that for admonition in live preview, it does weird things with box shadow and the edit this block button:

I fixed it this way: (it was contain: paint; before)

.markdown-source-view.mod-cm6 .cm-content > [contenteditable=false] {
    contain: style;
}

I haven't done a lot of testing with other types of live preview blocks though, since I haven't had time to use it much in the last week. Still, maybe it'll help. Thanks again!

Ability to turn off changed heading in embed

One of the things i didn't like about this theme is that it made headings in a embeded note smaller and fainter no matter what heading they where. This for me was solved by removing the associated css part. This would be a easy and very wanted setting.

Is there a way to prioritize heading color over link color?

If a heading contains an internal link, it inherits the color of links, not the heading. Is there an option to prioritize the heading color instead?

Table columns don't align correctly

Normally with advanced tables plugin selected and no theme enabled, in edit mode the vertical lines are aligned properly, making it look like a clean table. But when I enable ITS plugin this is gone and tinkering around with alignment has not fixed this. This issue should be clearer with the video I am attaching.

Again, I can't repeat enough how much I love the theme and am thankful for it.

Screen.Recording.2021-06-02.at.9.00.31.AM.mov

YAML appearing as code block

Hello, thank you so much for the beautiful and extremely functional theme! I noticed that my YAML frontmatter and metadata appears twice in Preview Mode, and I was wondering if anyone had any idea why this may be so:

Here is what it looks like in Edit Mode:

I noticed from the sample images of your theme this is not the case:

I tried turning off all community plugins, but I still see such duplication.

In a checkbox line, the trailing parentheses does not match the leading parentheses. Live Preview vs Preview

v0.13.4 In a checkbox line, the trailing parentheses does not match the leading parentheses. Live Preview vs Preview

Center Header With Lines not centering

In Style Settings, the 'Center Headings With Lines' doesn't center the headings. In fact, when the Center Headings is on, Center Headings With Lines disables the centering.

[FR] Beautify the audio player

Original ：

Media Extended Plugin

I don't know why it didn't align with the style in the Media Extended Plugin settings

[FR] Checkbox Icons for CodeMirror Options show original text

When the cursor is moved to the text of a checkbox, the original text is displayed for easy modification

Blockquotes in Obsidian Slides

I love the ITS Theme, and use it with my RPG Vault. However, I was testing out the Obsidian Slides plugin, planning to use it for my intro session this week, and I spotted this:

> **Session 0 is a planning session where the gaming group collaboratively lays the groundwork for a new campaign** 
> <cite style="float:right;"> [Cyrad, RPG.StackOverflow.com](https://rpg.stackexchange.com/a/105431/62592) </cite>

File in Reading View:

Obsidian Slides:

This isn't exactly a bug, but I find the blockquote styling for Obsidian Slides to be… disappointing—I wish it looked more like it does in Reading View.

I'll try to test out other markdown syntax in Slides to see if it displays noticeably different, and update this issue with it.

[BUG] Error in the style of the ordered list

Something is wrong with the style of the ordered list

WYSIWYG Potential Issue with ITS Theme

I posted the question in discord but wanted to follow-up with the screen capture I made (not great) but you should get the idea of what I am seeing .. Let me know if you need more information --

Love the theme -- makes me smile and easier read etc..

potential.css.issue.with.WYSIWYG.mp4

How can I change the Squared Bullet points to the normal bullets

I like the square bullets, I'd like to know how can get just the normal rounded bullet points?

How do I set the icons?

My current icon doesn't look good

Issue with emoji tags

Issue:
When I'm using emoji as tags, the emojis are not showing correctly and are each on a new line.

• Edit mode:
  #📥
  and
  #📥/🟥

• View mode:

#
📥 

and

#
📥
/
🟥 

My quick fix is taking off the display line as follow, but obviously, it affects all images.

/*Center Image*/
img{
/*    display: block; */
    margin-left: auto;
    margin-right: auto;
}

I tried different things but I'm only beginning in CSS and didn't find how to fix it.

Horizontal line in Edit mode

I have a snippet for stylized horizontal lines in both Edit and Preview.
Putting the 3 dashes results in this in Edit mode:

That did not happen in the previous version of ITS.

This is the snippet I use:

hor-line-grad.css.zip

[BUG] The latest DnD fragment doesn't work

Still red

colorful list failure to perform in live preview mode

obsidian version: v0.13.14
theme version: latest (2021-12-29 update)

I tried turning on safe mode and setting it via style settings, but both failed. When I turn on "use legacy editor", the vertical line in front of the list is displayed normally.

now:

previous:

What can I do to use the vertical line list in live preview mode, colorful lists may be better !

Search highlight in Preview not clear in Light

Cmd/Ctrl+F in Preview in Light mode highlights matching terms in the text, but the highlight is a very pale pink, hardly distinguishable.

I looked in the theme's CSS but could not work out which rules controls the color.

I have a snippet for it too, but it does not work in your theme.

/* Local (= in note) search match highlight color change in Preview mode */
.markdown-preview-view .search-highlight > div {
  background-color: orange;
  color: black;
}

Please advise.

Icons look like large pictures in preview

When I preview a linked note that has icon in it, the preview shows them in a massive size. It has not impacted test or other elements of the note. (see attached recording). This is new. I used to preview notes with icons in them before with the same theme but I always saw them as icons. Dunno what changed that.

Screen.Recording.2021-08-15.at.12.31.17.AM.mov

Once again, thank you for this wonderful theme!

[FR] images-addons

https://github.com/radekkozak/discordian/blob/master/.theme/mixins/images-addons.css I found a more powerful css. that can replace the one above, and if oh I want to do magic on your theme, what should I do, I didn't find something like package.json.

Originally posted by @Borber in #16 (comment)

ITS Theme: Bullet Point Indent Issue

Then using the ITS theme cannot seem to figure out if this is a setting or not but when I use bullets and they "line wrap" they are not "aligned correctly.. See attached screen shot for issue.

Content of li::before is not shown

In list items that have a content within their ::before elements, that content is not shown. There is however additional whitespace where the content would be. This can easily be reproduced with the cooklang plugin, using one of the cooklang example recipes.

How the "Steps" are displayed with the default theme:

How they are displayed with the ITS theme:

Linux emoji

So first of love the theme almost the only one i like from all of them. I did make a couple mods here and there. But i noticed in edit mode some emoji not displaying correctly (notably the colored squares just display as a ugly non color square with different line fillings) this was fixed by replacing apple color emoji font with noto color emoji. So i think this might have been a default font issue? i am not entirely sure. The same thing happens on the default theme so it might be a obsidian thing itself. In preview mode it all displays correctly.

Live Preview bug

With the latest update, I can't change the text in Live Preview if I have a picture with side alignment attributes along with the text.

[FR] Safari icon option

Is it possible to replace the chrome icon with safari? Thanks in advance

A few bugs

Sorry to submit this issue twice. I just created a discussion, but maybe it's better to submit here as an issue.

First, thank you for your excellent theme! I really love it.

There are a few bugs to feed back:

1. ITS Theme performs almost as perfectly on android, but the mind map plugin fails to show titles and words on each node under this theme, both in the bright and dark modes.
2. In bright mode, the Music notation plugin almost fails to show anything in preview mode, except for several white shadows. Yet it works well in the dark mode. This issue occurs both on mac desktop and android.

Thanks again! Looking forward to improvements.

Code block line feed display

I don't know if it's my settings, but in the code block, once the code is long enough to auto-wrap it causes, spaces, and Chinese characters to be displayed wide. I tried just changing the theme, without moving anything else, and the code block was fine in the default theme

ITS:

default:

Support for side-by-side display of images and Auto Scaling Size

like this https://github.com/iEchoxu/obsidian_orange

Alternate theme and color changes

Hello - I am trying to use your ITS theme - I really like it. I am having 2 issues however:

1. Whenever I open the settings menu, everything but the settings menu changes to a lighter blue color ( see screenshots)
2. I placed the alternate theme CSS snippet into the snippets folder and toggled it on. However, when I go to style settings and press the toggle on one of them - it does nothing. Am I doing something incorrectly?

Thanks!

D&D theme table is centered by default, t-c control is not available

Headings move to the right, instead of center

The option to centre the headings with lines on either side puts the heading on the right instead of centre. Would really like this option to work, a solution to this bug will be much appreciated. I have attached the video that shows this. I am on 0.12.13 insider build.

Screen.Recording.2021-08-09.at.1.17.45.AM.mov

Unable to adjust font size

I can't seem to adjust the font size, either by setting or Ctrl + scroll wheel

obsidian sync scrolling glitching

ITS is my favourite theme. Only recently did I notice that scrolling in editor is kinda glitchy.

Issue description

When scrolling down in the editor, the linked preview keeps glitching and does not scroll in sync.

Additional information:

• When scrolling down in the preview, the editor scrolls down in sync with no issues. The issue is only if I scroll down in the editor
• The glitch vary between other notes but is appears consistent within a note. With noteA for e.g., the visual glitch is easily reproduced no matter how many times you scroll up and down, the exact same glitch appears. However, noteB glitches differently compared to noteA, likely due to different lengths and content.
• Glitch does not happen in default theme, or in other themes such Blue Topaz, or Obsidian Nord. (I suspect it is an css issue)
• For the sake of ease, I've made a plain obs vault with no other settings or plugins except for the ITS theme. Issue persists.
• Other themes that have this issue: Dracula, Obsidianite,
• Themes that is unaffected: Default, Amethyst, Atom, gruvbox, Nord, Blue Topaz, 80s Neon

Steps to reproduce the issue

1. Open the note in two different panels
2. Have one as editor while the other is preview.
3. Link panels
4. Scroll down in the editor

What's the expected result?

Synchronized scroll

What's the actual result?

Preview keeps glitching upwards

Additional details / screenshot

• gif
• bulverism.md
• slacktivism.md

Edit: Fixed gif link

How to change the background color of embeds

Hi! Seems like I cannot change the background color of embeds in ITS like I can in other themes, I skimmed through the code and didn't figure out why. Are there any special classes assigned to embeds?