Accent Color

Customize the accent color of your application.

Users and companies often have a preference for the accent color of their applications. Winnie CSS supports this using the data-accent-color attribute. The accent color attribute modifies the --wui-color-accent-<value> css variables which will affect any components that use those variables.

root.tsx
export default function Root() {
  return (
    <html>
      <head></head>
      <body class="winnie-ui" data-accent-color="purple">
        <App />
      </body>
    </html>
  );
}

Any color that Winnie CSS supports can be used as an accent color, including custom colors.

Example

You can use the accent color variables to create dynamic color changing experiences for components. Remember, you can use data-accent-color on any html element. It doesn’t need to just be defined at the top level of your app.