Share Theme -- Theme switcher and relation column?

[shawnp0wers]

I have figured out how to apply a different share theme, but for the life of me I can't figure out how to make a shared note display just the note itself, without the column on the left allowing for a dark/light theme switch.

I desire to force a light theme, and to eliminate the column altogether so just the note itself is displayed. And while I'm normally not a dumb guy, this sure is making me feel pretty ignorant, lol!

Is it possible to get rid of the entire column containing the dark/light theme switcher, while forcing a particular theme as well?

[dosubot[bot]]

Hi @shawnp0wers! I'm Dosu and I’m helping the Trilium team.

Yes, you can fully customize the shared note view in Trilium to hide the left column (including the theme switcher) and force a light theme using custom CSS. Here’s how:

1. Add a CSS code note to your shared subtree and relate it to your shared note using the ~shareCss relation.
2. Apply the #shareOmitDefaultCss label to your shared subtree to remove the default stylesheet and give your CSS full control over the layout and theme (docs).

For the CSS itself, you’ll want to target the sidebar and theme switcher elements. While the exact selectors may vary by Trilium version, a typical approach is:

/* Hide the sidebar (left column) */
.sidebar, .share-sidebar, .theme-switcher {
  display: none !important;
}

/* Force light theme colors */
:root, [data-theme="light"] {
  --main-background-color: #fff;
  --main-text-color: #222;
  --accented-background-color: #f5f5f5;
  --header-background-color: #f5f5f5;
  --button-background-color: #e0e0e0;
  --button-text-color: #222;
  /* Add other variables as needed for your theme */
}
body {
  background: #fff !important;
  color: #222 !important;
}

You may need to inspect the shared page in your browser to confirm the exact class names for the sidebar and theme switcher, as these can change. If you want to prevent theme switching entirely, hiding the switcher and overriding the theme variables as above will do the trick.

For more details and advanced options, see the Sharing documentation and community examples like trilium.rocks for inspiration.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}