@equinor/fusion-wc-theme

Install

npm install @equinor/fusion-wc-theme

Fusion Web Components are base of Material Web Components, but uses the EDS (Equinor Design System) for styling / theming. This component is necessary to override the css attributes used in MD (material design)

Usage

Vanilla JS/HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Example App</title>
  </head>
  <body>
    <!-- Add the Fusion Theme variables to the DOM. -->
    <fwc-theme>
      <!-- The rest of your app code... -->
      <div id="my-app"></div>
    </fwc-theme>
    <!-- The Fusion Web Components use standard JavaScript modules. -->
    <script type="module">
      import '@equinor/fusion-wc-theme';
    </script>
  </body>
</html>

React

import Theme from '@equinor/fusion-wc-theme';
Theme;

export const App => {
  return (
      <fwc-theme>
        <!-- The rest of your react app code. -->
        <MyComponent />
      </fwc-theme>
  );
}

Color scheme

fwc-theme always sets data-color-scheme="light" on itself when connected (overwriting any existing value). Fusion does not support dark mode yet, so EDS variables inside <fwc-theme> always resolve to light values, regardless of the OS/browser prefers-color-scheme preference. This is temporary until Fusion supports dark mode.

[!NOTE] Content rendered outside <fwc-theme> (e.g. portals attached to document.body) and the html/body background are not covered.