Using themes and custom css together?

Questions & Help
1

Hello!

I use a theme with Logseq. specifically Catppuccin Frappe, which I have installed through the “plugins” tab. When I switch back and forth between the default dark mode and Catppuccin Frappe, I can see that the theme changes the font.

I am visually impaired and want to make the font size larger. I would also like to set the default font to something easier for me to read. I have seen folks suggesting editing the custom css, but it appears the theme overrides the custom css. Is there a way to change the font AND use a theme?

I did try copy-pasting the theme’s css into my custom css file, but it did not load correctly… and I couldn’t figure out where the font was being changed :sweat_smile: Any suggestions are very appreciated. Thanks!

1 Like
2

You can import the theme at the top of custom.css and below the import statement you can overwrite the font or any other part of the theme.

Checkout installation method number 2 in the readme:

Also I recommend checking out this font if you weren’t aware of it:

Please let me know if you have any issues getting it setup.

2 Likes
3

Thank you! I was able to adjust the font size and use the theme. I still can’t figure out how to change the font, however. Currently what I have is:

@import url('https://logseq.catppuccin.com/ctp-frappe.css'); 
:root {
  font-family: "Atkinson Hyperlegible";
  font-size: 1.1rem;
}

The font is installed to my computer - I can see it in LibreOffice. I’ve tried a handful of different fonts that are all on my computer, including system fonts, but none of them seem to load. Should I be using something other than “font-family”?

1 Like
4

Here is an updated custom.css file that uses logseq selectors instead:

@import url('https://logseq.catppuccin.com/ctp-frappe.css');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap');

:root {
  --ls-font-family: "Atkinson Hyperlegible";
  --ls-font-weight: 400;
  --ls-font-style: normal;
  --ls-page-text-size: 1.1em; /* page font size */
  --ls-page-title-size: 2.1em; /* page title font size */
  --ct-line-height: 1.6 /* set line height */
  --ct-code-font-family: var(--ls-font-family); /* use the same font for codeblocks */
  --ct-inline-code-font-weight: 400;
  --ct-text-size: var(--ls-page-text-size);
}

html,
body {
  font-size: var(--ct-text-size);
  font-family: var(--ls-font-family);
  overscroll-behavior-y: none;
  -webkit-font-smoothing: auto;
  line-height: var(--ct-line-height);
  font-weight: var(ls-font-weight)
}

textarea {
  line-height: var(--ct-line-height);
}
2 Likes