California Coast Theme

Which ligatures are you referring to? Do you have a screenshot or example text?

I love this theme! The default options got 99% of what I wanted to customize (but not always knew how). Thank you, @mgmeyers!

I have a question on modifying the background color of the editor and the previewer. By changing color-white-rgb, I understand that background-primary will be modified, giving rise to a different background color. However, the following code only works on a Mac, not on an iPad or iPhone. What is missing?

:root {
  --color-white-rgb: 251, 251, 249;

I also tried the following direct modification but it again only works on macOS.

.theme-light {
  --background-primary: #fbfbf9;

Thanks for replying!

So if I use the regular font (-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif) the Ligature ‘->’ is not formed. It is displayed as “- >” (Without the space). However, if I change the font to Inter, the ligature will be displayed properly.

So, the question is, is there a way to use the theme’s default font and still enjoy the use of ligatures?

Hmm, well it really depends on if the font supports the desired ligature (inter supports quite a few). Another option to consider is the smart typography plugin. It’ll replace -> with an actual arrow character. This means you can use any font you’d like and still get some of these special characters.

Even on mac, if I change color-white-rgb or background-primary, the color of the top of the left sidebar will be changed too. Since I just need a slightly off-white background (like the sepia background in Apple Books), the two colors on the sidebar are not very different, and I can live with it. However, it would be nicer if we could independently modify the background of just the editor/previewer.

For the default California Coast theme, the grayish editor background on the iPhone looks OK to me, but it is a problem on the iPad because my editor is side by side with the left sidebar (the file explorer which is pinned). So I get a clean-looking sidebar transitioning to a grayish editor, and to make things worse, there is a gradient effect from the sidebar to the editor. I am bothered by the default iPad background, which in my opinion ruins the crisp and minimalistic feel of the CC theme. Please help.

You should be able to modify the editor/preview background with this:

.workspace-split.mod-root .view-content {
    background-color: #f0f; /* put your desired color here */

As for the ipad, I see what you mean about the pinned sidebars. I didn’t know you could pin them like that! I’ll add a fix for this soon.

That’s an amazing suggestion! I really appreciate it. I didn’t know this plugin existed.

Once again, thanks for the awesome theme!

Thanks for the tip on changing the background color. I look forward to seeing the iPad fix for pinned sidebar.

In case it helps anybody, I am posting the css snippet to change the editor/previewer background color on macOS as well as iOS/iPadOS. The header statements are needed to ensure that the document header takes on the same color.

.theme-light {
  --bkgd-clr-user: #fbfbf9;

.theme-dark {
  --bkgd-clr-user: #1e1e1e;

.workspace-split.mod-root .view-content {
    background-color: var(--bkgd-clr-user);

.view-header, .workspace-leaf.mod-active .view-header, .workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type .view-header {
    background-color: var(--bkgd-clr-user);

.workspace-leaf.mod-active .view-header {
    background-color: var(--bkgd-clr-user);

.view-header {
    background-color: var(--bkgd-clr-user);
}*emphasized text*

Thanks for fixing the iPad background with pinned sidebar. The pinned view now looks perfect.

1 Like

Glad the fix reached you! I had planned to post back here, but got caught up in school

Just wanted to thank you. To me it’s the only usable Obsidian theme. I have bad eyesight, so I only use medium to high contrast light themes, because I can’t read gray above gray which is what the majority of the Obsidian themes are. The only thing that bugs me (but not much) is the position of the close button, because I’m not MacOS user. Anyway, hands down It’s the best Obsidian theme.


The latest California Coast theme has changed things. There are two issues:

  1. If I want to change fonts on macOS, :root {--default-font ... --editor-font ...} is now body {--font-interface-theme: ... --font-text-theme ...}. The new snippet works on macOS, but not on iOS/iPadOS.

  2. The default California Coast theme now yields a serif font on iOS/iPadOS. The default on macOS is still a sans serif font.

For now, I have reverted the California Coast css file to the version about a month ago, when I last tested/updated it, and everything is working as it used to be.

@chchen : have you looked in the Style Settings?

I had the Style Settings plug-in at one moment but no longer have it. I thought the css snippets can change everything. In any case, not sure why the California Coast theme suddenly had changes.

@chchen California Coast with Style Settings, incl. fonts for certain elements.

The fonts changed here because of an update on Obsidian’s end. I’ve added a fix for the serif fonts on mobile. Here are the CSS variables you’ll want to target to change the fonts via a CSS snippet:

--font-interface-theme: ...;
--font-text-theme: ...;
--font-monospace-theme: ...;

Hi @mgmeyers !
Is there any way to set fonts separately?
I need Montserrat for titles, Inter for text, and PragmataPro Liga for code.
Thank you very much for your time and help!

@friendlmickle : Settings > Appearance
There are 5 font settings, including font-family for 3 different aspects.

Uploading: Snipaste_2022-06-23_09-49-34.jpg…