Apply global dark theme

Hi all,
Sorry if I’m asking something obvious.
I’m trying to change the default color theme of the generated empty Hilla project from light to dark. Adding variant = Lumo.DARK on the @Theme annotation of the application has no effect. I guess I should do something extra on the Typescript side which is automatically done by Vaadin otherwise.

I think I’ve found what I need. Adding theme="dark" to <body> did the trick.

Sorry if I’m asking something obvious.

There are no stupid questions here. Always feel free to ask when you get stuck

How would I go about a toggle button? Can I store a cookie that the user want’s to user the dark theme so when he refreshes the page the dark theme is preserved?

Sure, you could do that.

Or use localstorage

Okay great, I just thought there was an inbuilt solution or if there is another practice to follow, thanks :slightly_smiling_face:

You could do something like this to have it automatically match the OS setting:

window.applyTheme = () => {
  const theme = window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "";
  document.documentElement.setAttribute("theme", theme);
};
window
  .matchMedia("(prefers-color-scheme: dark)")
  .addListener(window.applyTheme);
window.applyTheme();