California Coast Theme

Hello, everyone! You can now find California Coast listed under community themes. This theme started out as a set of snippets on top of the minimal theme. I’ve worked to make it more robust and less dependent on the hider and sliding panes plugins, though they are still recommended for a cleaner UI. Consider this theme beta at this point, and please submit any issues you encounter here on github: GitHub - mgmeyers/obsidian-california-coast-theme: A minimalist obsidian theme inspired by macOS Big Sur

Change log

  • 2021-04-05
    • Fixed a number of bugs caused by the switch to Style Settings
  • 2021-04-04:
    • Version 1.0.0
    • Deprecates California Coast Settings Plugin in favor of Style Settings plugin
  • 2021-03-21:
    • Added configurable heading styles via the theme plugin
    • Embedded a base64 encoded version of the boxicon font
    • Added better default styling for users without the settings plugin
    • Removed some CSS that was causing some users performance issues
  • 2021-01-23: Removed a memory hogging CSS rule
  • 2021-01-12: Many miscellaneous updates, including better windows support
  • 2020-12-26: Embedded boxicons—it is no longer required to install the icon font as long as the theme plugin is installed

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.

Credits

This theme wouldn’t be possible without @kepano’s minimal theme

Troubleshooting

In all cases:

  1. Update the theme CSS
  2. Update the theme plugin

Translucency not working on Windows

Re-installing Obsidian has been known to help. Updating Obsidian via settings does not update electron, so it is important to update via the installer if you are experiencing issues with translucency.

Translucency makes Obsidian laggy

This is a known issue on Mac, and seems to be caused by electron. There is no known permanent fix for this, though refreshing Obsidian (cmd+r) helps.

There’s too much header padding in preview mode

With the Style Setting plugin installed you can adjust the padding in the theme’s settings for each level of heading.

37 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