@rcvd is it possible to reduce the font size in the edit window of the Theme to be something less than the current size and something larger than the font in the Note/file column?
Standard Font Size is 16px and 13px in the site column. To change it, add the following to the bottom of the css file:
.markdown-source-view {
font-size: 14px;
}
Thanks AGAIN. Worked like a charm. But it brings up another question. If/when you release another version of the theme, will I need to make the same corrections/additions?
Yes, unfortunately you have to make the modifications again for all changes I do not include into the main theme.
Figured. So, could I āstackā the changes in a Markdown file and append them ātogetherā at the end of any new version?
Yes, if you put them to the bottom of the css file, your changes will overwrite all other commands. The same are we doing with the custom obsidian.css overwriting the app.css.
Hi!, Thanks for this theme, I really like itā¦I have Benn adjusting a few things, just personal taste, but I have trouble finding in the code where can I put a divider line in the title, again, it is just meā¦Thanks in advance!!!
Here you go, add this to the bottom of the css file:
.workspace-leaf .view-header {
border-bottom: 2px solid var(--background-secondary-alt)
}
.workspace-leaf.mod-active .view-header {
border-bottom: 2px solid var(--interactive-accent);
}
Ok, Iāve got another oneā¦
Is there a setting I could modify that would change the font size in the Preview pane like for the Edit Pane?
Try adding this:
.markdown-preview-view p,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6,
.markdown-preview-view code {
font-size: 18px;
}
, thank you, once again!
@rcvd Hello and thank you for this beautiful theme.
I have a question: Do variable fonts work in Obsidian?
I added font-variation-settings: 'wght' 500; in obsidian.css:
.markdown-source-view,
.markdown-preview-view {
font-family: var(--quattro-font);
font-variation-settings: 'wght' 500;
}
but the weight remains unchanged ā¦
(The Regular and Italic fonts of iAWriter Quattro V are installed on my Windows 10 OS.)
Please excuse me if this question is stupid ā¦ ^^
@rcvd Hello, I switched to this theam and loving it. I made a few minor tweaks such as tag color. I also wish to change the link color for both internal and external links. I couldnāt find an appropriate place in the CSS file to do it. Please guide me on that!
Also, a general question: Should I put all my changes at the end of the CSS to keep them there after an update to the theme?
Thanks a lot!
This part of my CSS File resets the color definitions of the default app.css:
/* Reset colors */
.cm-s-obsidian span.cm-tag,
.cm-s-obsidian span.cm-hmd-escape-char,
.cm-s-obsidian span.cm-hmd-escape-backslash,
.cm-s-obsidian span.cm-link,
.cm-s-obsidian span.cm-hmd-internal-link,
.cm-s-obsidian span.cm-inline-code,
.cm-s-obsidian span.cm-math,
.cm-s-obsidian span.hmd-fold-math-placeholder {
color: inherit;
}
While .cm-s-obsidian span.cm-link controls the color for external links, .cm-s-obsidian span.cm-hmd-internal-link controls the color of internal (āWiki-Styleā) Links.
Add :hover to control the color when hovering the link with the mouse.
If you also want to change the color of links in preview mode
/* Links and footnotes */
.markdown-preview-view a {
color: inherit;
}
Add .external-link or .internal-link to distinguish between internal and external links in preview mode, e.g.
.markdown-preview-view a.internal-link {
color: #f00;
}
You should always put your modifications to the very end of the css, because earlier rules will be overwritten by later rules (if we put the !important flag aside).
Iām thinking about making my theme more customizable by creating an additional plugin.
1 Like
I canāt verify on Windows 10 - sorry. On my Mac this is working as expected (either directly using font-weight: 500 or font-variation-settings: 'wght' 500).
Thank you for your response, which allowed me to direct my research for a possible solution.
Some time ago, while working with Typora, I noticed that some Fonts were not showing, although they were installed on the system.
As with Typora, these same Fonts were dysfunctional with Obsidian.
I downloaded a Font editor, intending to compare a functional Font with a dysfunctional Font.
I noticed in the Font information that the dysfunctionals Font had a different Style goup and Family name, which the functional ones did not.
By assigning the exact same name to Style Group and Family name the recalcitrant Fonts have become functional: they appear in Typora and Obsidian!
However, there are no such inconsistencies in the files of Font iA Writer.
The Bahnschrift Variable Font that came with Windows 10 works with Obsidian, so I can vary the weight in it.
But iA Writer Variable Fonts do not display, neither in Typora nor in Obsidian. I didnāt have time to investigate further.
Thanks a lot! that worked wellā¦in the Light Mode at least. I changed the link color to the more conventional blue color for links. While that worked, I now have trouble seeing those links in the Dark Mode. I thought I would set the link color in the Dark Mode to either white or yellow, but couldnāt find the right place to edit. Please advise!
TIA!
You can change the scope of a css setting by adding:
.theme-dark <your-selector> {
<your css edits>
}
or
.theme-light <your selector> {
<your css edits>
}
In your example this would be something like:
.theme-dark .markdown-preview-view a.internal-link {
color: #fff;
}
1 Like
Thanks a lot!
I read the entire thread and canāt wait to try your theme. Do I go to your Github as I see it has to be installed locally and Iām not sure how to do that.
I currently have Andy theme for the sliding windows mode. Will your theme overwrite it? I need high contrast dark mode for my eyes. Is that an easy CSS hack?
I am looking at iA Writer but on Android, so is this theme more suited to iOS with iA Writer or will it work with Android version of iA?