California Coast Theme

Recommended plugins

Screenshots

Contributing

If you see any issue, or would like to contribute to this theme, please submit an issue or raise a PR.

Support

If you find this theme useful and would like to support its development, you can sponsor me on Github, or buy me a coffee.

GitHub Sponsors

48 Likes

WOW GREAT WORK!
This is the best the theme of 2020 for me, but I can’t find it in this page Best of 2020 voting thread (theme, plugin, graph & story)
I can vote for it in 2021 :joy:

Very nice! I installed this one immediately. Also not sure if it is common practice that I’m just not aware of, but I really like having the plugin to play with the settings. Very handy.

It missed the nomination phase, unfortunately, but yeah vote for it for the 2021 award!

2 Likes

This is the best theme, thank you so much for creating this.

Hello @mgmeyers

I spent more time with the theme and realised that this theme makes me no longer need the WYSIWYG release of obsidian, that’s amazing.

I’ve selected enhanced editor and enhanced preview typography in plugin settings and it looks beautiful. I’m facing 1 issue though. In Preview mode a lot of spacing is added before and after divider line as well as the headers.

Is there a way to make the spacing same as in Edit mode?

Edit Mode:

Preview Mode:

2 Likes

Hi @tav! Yeah, this is easy to do with a snippet. I’ll look into making a theme setting to do this, but for now you can add this to a snippet and it’ll override the padding set by the theme:

.cc-pretty-preview .markdown-preview-section hr {
  margin-top: 0;
  margin-bottom: 0;
}

.cc-pretty-preview .markdown-preview-view h1 {
  margin-top: 0;
  margin-bottom: 0.25em;
}

.cc-pretty-preview .markdown-preview-view h2 {
  margin-top: 0;
  margin-bottom: 0.25em;
}

.cc-pretty-preview .markdown-preview-view h3 {
  margin-top: 0;
  margin-bottom: 0.25em;
}

.cc-pretty-preview .markdown-preview-view h4 {
  margin-top: 0;
  margin-bottom: 0.25em;
}

.cc-pretty-preview .markdown-preview-view h5 {
  margin-top: 0;
  margin-bottom: 0.25em;
}

.cc-pretty-preview .markdown-preview-view h6 {
  margin-top: 0;
  margin-bottom: 0.25em;
}
1 Like

This is gorgeous, thank you so much

1 Like

Thanks, almost there.
Everything else is working as expected except the spacing before the *** divider.
What code can decrease that?

1 Like

Thanks @mgmeyers, this is a gorgeous theme!
Same as @tav I applied the snippet to override the padding.

image

I also ran into a bug with links to the Obsidian search.

For a future update, I’d also love the option to set the accent colour, just as in the minimal theme itself.

Thanks for the excellent work!

image
image
The theme looks quite well made but I tried it but got these boxes instead of different icons. I installed the plugin.

Did you install the Boxicon font as per instruct step 1?

2 Likes

I downloaded it and now it’s working fine! Thanks.

2 Likes

@tav Try adding this as well:

.cc-pretty-preview .markdown-preview-section div:not([data-tag-name^="h"]) + div[data-tag-name="hr"] > hr {
  margin-top: calc(var(--editor-line-height-rem) * -1);
}
1 Like

Thanks @Joschua! Can you describe how to reproduce this issue with the magnifying glass background? I haven’t come across it yet.

Perfect Now. Thank you so much for making this amazing theme.

Here’s the code I used in Obsidian:
[Created TK notes](obsidian://search?vault=Vault&query=file:(TK))

I turned off all other plugins and snippets but the issue persists. Looking at it with the inspector, it points towards this line:

a[href*="obsidian://search"] {
    background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1…,30,30S58.6,70,42,70S12,56.6,12,40S25.4,10,42,10z'%3E%3C/path%3E%3C/svg%3E);
}

Update

It is no longer required to install the boxicon font. Be sure to update the theme and the plugin, and please let me know if you see any icon related issues.

Loving this theme. Going to use this thread, since it appears active, to ask a really basic question that has been perplexing me. I have not seen any plugin settings on any third-party plugins I’ve installed—whether an actual plugin or a community theme. What am I missing!?

Confusedly,
Brian

Well! Some of the plugins have settings and some don’t, but you can see the plugin setting of the individual plugin by turning it on and then a button will appear in the left side of the settings.

1 Like