Wondering what’s next for npm?Check out our public roadmap! »

    awsui-dark-mode
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    AWS UI Dark Mode

    version minzipped size downloads

    The AwsuiDarkMode component applies a dark mode theme to all child node AWS UI components.

    Install

    • npm install awsui-dark-mode or
    • yarn add awsui-dark-mode

    Use

    Wrap the AwsuiDarkMode component around your application. While AwsuiDarkMode does not currently use React contexts, this wrapper would most likely be placed alongside your React context providers, such as React Router or Redux.

    import AwsuiDarkMode from 'awsui-dark-mode';
    
    export default function App() {
      return (
        <AwsuiDarkMode>
          <Home />
        </AwsuiDarkMode>
      );
    }

    Props

    disabled

    Type: boolean optional

    When true, the dark mode is not applied at all. You may want to use this prop to allow your users to toggle between dark and light mode.

    import AwsuiDarkMode from 'awsui-dark-mode';
    
    export default function App() {
      const [isDarkModeDisabled] = useState(false);
    
      return (
        <AwsuiDarkMode disabled={isDarkModeDisabled}>
          <Home />
        </AwsuiDarkMode>
      );
    }

    root

    Type: string optional

    When specified, the dark mode is applied to this CSS selector. You may want to use this, for example, to theme your CollectionPreferences component by applying dark mode to your body element.

    See also: awsui-theme's AwsuiThemeRootSelector

    import AwsuiDarkMode from 'awsui-dark-mode';
    
    export default function App() {
      return (
        <AwsuiDarkMode root="body">
          <Home />
        </AwsuiDarkMode>
      );
    }

    F.A.Q.

    Customization

    To apply your own theme overrides to the AWS UI dark mode, use the awsui-theme package and mount the AwsuiTheme component inside AwsuiDarkMode.

    import AwsuiDarkMode from 'awsui-dark-mode';
    import AwsuiTheme from 'awsui-theme';
    
    export default function App() {
      return (
        <AwsuiDarkMode>
          <AwsuiTheme colorTextAccent="red">
            <Home />
          </AwsuiTheme>
        </AwsuiDarkMode>
      );
    }

    CollectionPreferences

    What do I do if my CollectionPreferences component is still in light mode?

    AWS UI mounts the CollectionPreferences as a child node of your body element. As a result, it falls outside of the wrapper generated by the AwsuiDarkMode component.

    Currently, AWS UI does not offer a way to mount the CollectionPreferences component anywhere other than the body element. To style the CollectionPreferences component, you must apply your AWS UI theme to your body element. To do this, set the root prop prop to "body".

    Keywords

    none

    Install

    npm i awsui-dark-mode

    DownloadsWeekly Downloads

    25

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    27.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar