build css for userchrome.css

[changsijay]

hi, Could you guilde me how to build CSS which can be copied and paste into userchrome.css?

ex: if I'd like to change

• appearance: light-with-dark-sidebar
• accentColor: purple

and run npm run build:css to get the css with above change

[andrejilderda]

Hi @changsijay, you don't have to build the css, it's as easy as changing the values in Joplin's settings under 'macOS theme'. ;)

[changsijay]

yes, if i install plugin and change settings it looks neat.

tho after installed macos theme plugin, my customized userstyles.css for markdown rendering not works well. (ex. the code block css)

that's why I tried using the generated css directly, and by this way, my customized userstyles.css works fine too.

so i am wondering if i can use this way with some default value changed and also it is easier to do more customizations based on the generated CSS too

[gresces]

I want to change the background color of rendered code block. But changes in userstyles.css are useless! I just want the bkg color to be lighter! :-)

[changsijay]

as I check com.andrejilderda.macOSTheme.jpl below part, could I override this part by userstyles.css ? because the color looks not that good on markdown preview

@media screen and (prefers-color-scheme: dark) {
  body#tinymce pre:not(.mermaid),
body#tinymce .inline-code,
#joplin-container-content pre:not(.mermaid),
#joplin-container-content .inline-code {
    background-color: rgba(var(--g-shadowColor--rgb), 0.2);
  }
}

example screenshot

[gresces]

as I check com.andrejilderda.macOSTheme.jpl below part, could I override this part by userstyles.css ? because the color looks not that good on markdown preview

@media screen and (prefers-color-scheme: dark) {
  body#tinymce pre:not(.mermaid),
body#tinymce .inline-code,
#joplin-container-content pre:not(.mermaid),
#joplin-container-content .inline-code {
    background-color: rgba(var(--g-shadowColor--rgb), 0.2);
  }
}

example screenshot

I tried add '!important' at the end of lines. It's useful but I dislike this way. :-)

@media screen and (prefers-color-scheme: dark) {
  body#tinymce pre:not(.mermaid),
body#tinymce .inline-code,
#joplin-container-content pre:not(.mermaid),
#joplin-container-content .inline-code {
    background-color: rgba(var(--g-shadowColor--rgb), 0.05) !important;
  }
}

[changsijay]

now i am trying comment out this part in https://github.com/andrejilderda/joplin-macos-native-theme/blob/main/src/scss/components/_components.tinyMCE.scss#L93

and npm dist to build and use the plugin locally. then my userstyles.css works well now :) tho still wish have chance to use official plugin from here without local build.

[andrejilderda]

The theme styles unfortunately contain a lot of !important's because of the way the styles in Joplin are setup. There are nicer, more modern ways to handle this (cascade layers), but Joplin's base styles don't make use of this. This means for now there are no easy ways to override styles set by Joplin nor this theme and slapping some more !important's is the way to go.