California Coast Theme

[Gnopps]

Thanks for developing this theme, it looks great!

One thing that I’d like to keep though is the amount whitespace and font size in the note. Would someone here please be able to let me know what settings to change how to make the note editing and viewing stay the same in terms of the amount of text being displayed vertically.?

[bwydoogh]

Hi.

Once again, thanks for this great theme.

On macOS, however there is lag when using your theme especially when you scroll fast through large files. The reason (I did some debugging on your CSS) is the use of backdrop-filter. Dropping the use of that CSS property results in much better performance.

Perhaps something to have a look at (… and currently I am overriding your theme).

Keep up the good work.

[mgmeyers]

Hey @Gnopps, support for adjusting white space is next on my list! Follow along here for update: Make space between headings configurable · Issue #41 · mgmeyers/obsidian-california-coast-theme · GitHub

[janpeeters]

Thanks for your awesome theme and the code you shared by request of @tav.
I’ve altered it so that the headers and line-height are not as big as they are default.
It now looks like this:

The code for this is:

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

.cc-pretty-preview .markdown-preview-view h1 {
  font-size: 1.6rem !important;
  line-height: 2.0rem;  
  margin-top: 0;
  margin-bottom: 0.25em;
}

.cc-pretty-preview .markdown-preview-view h2 {
  font-size: 1.45rem !important;
  line-height: 1.85rem;  
  margin-top: 0;
  margin-bottom: 0.25em;
}

.cc-pretty-preview .markdown-preview-view h3 {
  font-size: 1.3rem !important;
  line-height: 1.7rem;
  margin-top: 0;
  margin-bottom: 0.25em;
}

.cc-pretty-preview .markdown-preview-view h4 {
  font-size: 1.15rem !important;
  line-height: 1.55rem;
  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;
}

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

What I would love to achieve it that the editor looks the same. Does anyone know what code I need to use for this? Is there a list of font sizes (variables) somewhere in the CSS that I can change?
I’ve tried to change the sizes and line heights via the dev tools, but the changes I made lead to markdown symbols like xx to be at a different position and selecting text also gave strange results… the selection had a different position than the text I was selecting.
Thanks for any ideas.

[inakarmacoma]

Thank you for the snippet and below addition. Everything looks great now!

[XMach]

Loved using this for the past few months, just wondering if it was possible to change the font colour in dark mode? I find it needs a bit more contrast for my needs (i.e. #ffffff text) and I can’t seem to locate a variable in the css or the theme plugin?

[mgmeyers]

Hey @XMach, see if this gives you the contrast you’re looking for:

.theme-dark {
  --foreground-rgb: 255, 255, 255;
}

[XMach]

@mgmeyers

.theme-dark {
  --foreground-rgb: 255, 255, 255;
}

Much better, thank you! Also turned out I was looking at my old css theme which is why I couldn’t find it

[Fuguexv]

I would like to ask why my cursor is not aligned with the text content, just like this…

When I jump through the outline to the corresponding title, this display also seems to have a little problem, I do not know if everyone is like this?

this theme is so beautiful, thanks to the author!

[mgmeyers]

@Fuguexv

When the cursor gets misaligned like that, it’s usually caused by the font changing in some way. Reloading obsidian usually fixes the issue.

Regarding your second issue, that’s an unfortunate side effect of the WYSIWYG style headings. There’s no good way around it until obsidian’s official WYSIWYG editor is released.

[mgmeyers]

Hey everyone! I have a short break from school and have made some changes to California Coast. Please update the theme and the settings plugin!

Most notably, I’ve:

• 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

[janpeeters]

I would like to add some color to this incredible theme. Especially H1-6.
I have tried to figure out which CSS selectors I need to address with the dev tools but I didn’t succeed in finding the right ones.
What I like to achieve is change the color of the headings in as well the editor as the preview (both the same colour) and enhanced typography setting active.
Has anyone experience with this and is able to point me in the right direction?
Thanks in advance for any help.

[mgmeyers]

Hey @janpeeters, see if this works for you:

.cm-header,
.CodeMirror-scroll h1,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  color: #f0f !important;
}

[janpeeters]

Thanks a lot @mgmeyers it got me in the right direction.
If others want to change the color of individual headers you can use this code

.cm-header-1,
.CodeMirror-scroll h1,
.markdown-preview-view h1 {
  color: var(--text-title-h1);
}

Just replace the 1 with 2, 3 etc after cm-header- to color other headers.
The var(--text-title-h1) to define color I borrowed from cybertron theme css. You can change it for any HEX or RGB value.

[janpeeters]

I’m trying to solve an aligning problem with filenames and tags.

File Tree:
The article icons are not aligned with the parent folders names. I would like them to align which gives much better orientation for the eyes. I would like this also in nested folders. I’ve not been able to find the right piece of code to achieve this.

Tags:
This one is similar…
I would like single tags to align with tag ‘folders’ also nested ones. Currently it looks confusing.

Does anyone of you know how to achieve this via custom CSS?
Any help would be greatly appreciated. Thanks.

[janpeeters]

I found a solution for my first question:

The following code

/* better file tree alignment */
.nav-file {
  padding: 0 18px;
  margin-left: 0;
}

.nav-folder-children > .nav-folder {
  padding: 0 0 0 17px;
}

changes the view to this:

The quest for a better aligned tag list is still going. Thanks for ideas.

[Headway]

@janpeeters

The quest for a better aligned tag list is still going. Thanks for ideas.

View > Toggle Developer Tools

.tree-item-self .collapse-icon

[mgmeyers]

Hey everyone, California Coast v1.0.0 has been released!

There have been some minor tweaks to the theme, but more importantly, the California Coast Settings plugin has been deprecated in favor of the more generic Style Settings plugin.

I recommend updating the theme and installing Style Settings. Also, some of the functionality from the deprecated settings plugin can be found in these recommended plugins:

• Style Settings: Enables theme customization
• Contextual Typography: Enables enhanced preview typography
• System Dark Mode: Matches the theme to the system’s light or dark mode setting
• Hider: Hides various elements of the UI
• Embedded Note Titles

As always, please report and bugs or issues here: Issues · mgmeyers/obsidian-california-coast-theme · GitHub

[mgmeyers]

I’ve updated the theme to add better alignment to both tags and files. I’d recommend updating the theme (and installing the new Style Settings plugin)!

[mgmeyers]

v1.0.2 has been released with a number of minor bug fixes caused by the switch to Style Settings.