California Coast Theme

Share & showcase
1

Screen Shot 4
Screen Shot 42764×1842 473 KB

Recommended plugins

Screenshots

Screen Shot 1
Screen Shot 12880×1748 481 KB

Screen Shot 2
Screen Shot 22880×1748 497 KB

Screen Shot 3
Screen Shot 32128×1374 248 KB

Screen Shot 5
Screen Shot 52128×1374 196 KB

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

49 Likes
2

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:

3

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.

4

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

2 Likes
5

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

6

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:

Edit Mode
Edit Mode2096×1326 232 KB

Preview Mode:

Preview Mode
Preview Mode2158×1620 239 KB

2 Likes
7

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
8

This is gorgeous, thank you so much

1 Like
9

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

1 Like
10

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!

11

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

12

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

2 Likes
13

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

2 Likes
14

@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
15

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

16

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

17

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);
}
18

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.

19

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

20

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