@equinor/musion-wc-主题

安装

npm install @equinor/fusion-wc-theme

Fusion Web 组件是 材料网络组件, (中文(简体) ), 但使用 EDS (Equinor设计系统) 用于造型/主题. 此组件对于推翻用于 MD(材料设计)

使用量

香草联合材料/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>

反应

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

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

颜色方案

fwc-theme 总是设定 data-color-scheme="light" 当连接时( 覆盖任何已存在的值) . Fusion 尚未支持暗模式, 因此 EDS 内部变量 <fwc-theme> 无论操作系统/浏览器如何,总是对光值下决心 prefers-color-scheme 优先选择. 这是暂时的,直到Fusion支持暗模式.

[注] 外部提供的内容 <fwc-theme> (例如,附属于 document.body)和 html编号 :body 不包括背景.