#useDark

During SSG, useDark cannot accurately reflect the user's browser theme setting because SSG is executed at build time. This hook will only return the correct theme value after client-side hydration is complete.

If you need to apply dark theme styles during SSG, it's recommended to use the CSS selector .dark for styling. Rspress adds the dark class name to the document root element, which works correctly in both SSG and client-side rendering:

/* Light mode */
.my-component {
  color: black;
  background-color: white;
}

/* Dark mode */
.dark .my-component {
  color: white;
  background-color: #1a1a1a;
}