Changing the source view icon when switching

Custom CSS & Theme Design
,
1

Hello, everyone. I added a new button source view via Commander and also removed the standard button reding/editing view via css-snippets:

image (1)
image (1)312×139 1.13 KB

I want to make the button icon change depending on whether the source view is enabled or not.
On the forum I found a thread where the icons of the reading/editing view button were changed - Swap icons in editor v reading view?, where it was said about the html parameter that changed relative to the view mode (reading/editing view) - this is data-mode, where the icon was changed relative to this parameter.

Does the source view button have any parameter?
(Sorry for my English)

2

In more detail, I have a class for the button itself (+ contains the icon class):

 <button class="clickable-icon view-action cmdr-page-header editor:toggle-source" aria-label="Змінити режим динамічного/джерельного редагування" style="color: inherit;"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-code-2"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg></button>

Switching between the source view and editing view modes (obviously, I don’t use the reading view), I noticed that a certain class is changing.
In source view mode, this class looks like this:

<div class="markdown-source-view cm-s-obsidian mod-cm6 node-insert-event is-readable-line-width is-folding show-properties" style="">....

And in the editing view mode, this class looks like this:

<div class="markdown-source-view cm-s-obsidian mod-cm6 node-insert-event is-readable-line-width is-folding show-properties is-live-preview" style="">...

How to change the icon in the button in relation to this class?

3

For Source mode, use .markdown-source-view:not(.is-live-preview).

For Live Preview, use .markdown-source-view.is-live-preview.

edit:
My mistake, that won’t work! It’s because the header (where your new icon is) is before (i.e., outside) of the content described by the selectors that I wrote. When I get a chance, I’ll take a look to see exactly how you would have to write it to make it work. For a CSS solution, it will probably require something called a :has pseudo class which might slow down your Obsidian experience, but I’ll try it out later to find out.

1 Like
4

Okay, got it working! I saw your other thread where ariehen and DiCaver helped you hide the Reading icon, and I see the icon that you’re wanting to use in Source mode. You can use this code below.

This shows your icon while in Source mode:

.workspace-leaf-content[data-mode='source']:not(:has(> .view-content > .markdown-source-view.is-live-preview)) .view-action[aria-label^="Current view"] {
	& > svg {
		display: none;
	}
	
	&::before {
		content: '-';
		background-color: var(--icon-color);
		mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvZGUteG1sLWljb24gbHVjaWRlLWNvZGUteG1sIj48cGF0aCBkPSJtMTggMTYgNC00LTQtNCIvPjxwYXRoIGQ9Im02IDgtNCA0IDQgNCIvPjxwYXRoIGQ9Im0xNC41IDQtNSAxNiIvPjwvc3ZnPg==");
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		padding-inline: 6px;
	 }
}

And here’s how to set the icons for all three modes

/* ## viewing mode icons ## */

/* Source mode */
.workspace-leaf-content[data-mode='source']:not(:has(> .view-content > .markdown-source-view.is-live-preview)) .view-action[aria-label^="Current view"] {
	& > svg {
		display: none;
	}
	
	&::before {
		content: '-';
		background-color: var(--icon-color);
		mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvZGUteG1sLWljb24gbHVjaWRlLWNvZGUteG1sIj48cGF0aCBkPSJtMTggMTYgNC00LTQtNCIvPjxwYXRoIGQ9Im02IDgtNCA0IDQgNCIvPjxwYXRoIGQ9Im0xNC41IDQtNSAxNiIvPjwvc3ZnPg==");
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
		padding-inline: 6px;
	 }
}

/* Live Preview */
.workspace-leaf-content[data-mode='source']:has(> .view-content > .markdown-source-view.is-live-preview) .view-action[aria-label^="Current view"] > svg > path {
	d: path("M12 20h9 M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z");
}

/* Reading */
[data-mode='preview'] .view-action[aria-label^="Current view"] > svg > path {
	d: path("M12 7v14 M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z");
}

(edit because I’m no good at SVG paths so switched to data path for the one I couldn’t get right)

2 Likes
5

Great! I changed the code a little bit (aria-label^=“...”) because the icon was changing for the wrong button (I think it’s my fault for not explaining what I needed). The code works great with different themes and so on, and is a very good basis for other css-snippets. Thank you very much for your help :slight_smile:

1 Like