As of 24020e3, people with the Style Settings plugin should be able to swap out the default theme's colors for headings, italics, bold, strikethrough, and blockquote with their preferred colors from the palette.

For anyone who wants to make their own modifications (e.g. change default colors themselves, mess with opacity, etc.), I thought I would be able to do something in Style Settings like:

id: ctp-bold
type: variable-select
default: var(--ctp-sapphire)

strong,
cm-strong {
--bold-color: rgb(var(--ctp-bold);
}

But this method only works once the user selects a color. The --ctp-sapphire variable doesn't seem to go anywhere until then and if you do pick the color and then hit the plugin's default button, the color resets to grey and not the default from the yaml. If this is common knowledge, my bad, but the type: class-select in Anubis's contribution works how I would have expected type: variable-select to work, so this threw me for a loop. Anyway, I found I needed to add a fallback variable as the real default (the user-selected color seems to persist through opening/closing the app and enabling/disabling the plugin, but not sure if that will always be the case):

/*_typography.scss*/
strong,
.cm-strong {
  --bold-color: rgb(var(--ctp-bold, var(--ctp-sapphire)));
}

Uh oh!

Allow more text colouring #27

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions