Neglected Pulse Machine

    @energyweb/origin-ui-theme
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.3 • Public • Published

    Energy Web Foundation Logo

    Origin UI Theme

    Description

    Material-UI theme configuration and helper functions for styling components used for building Origin marketplace user interface.

    This package can also be used as a reference when building custom theme configuration.

    Origin UI Theme is a component of Energy Web Origin's SDK.

    Installation

    This package is available through the npm registry.

    npm install @energyweb/origin-ui-theme
    yarn add @energyweb/origin-ui-theme

    Requirements

    Before installing make sure you have react >= 17.0.2 installed.

    Usage

    1. Using default theme configuration
    import React, { FC } from 'react';
    import { makeOriginUiTheme, useThemeModeStore } from '@energyweb/origin-ui-theme';
    import StyledEngineProvider from '@mui/material/StyledEngineProvider';
    import { ThemeProvider } from '@mui/material/styles';
    
    export const OriginThemeProvider = ({ children }) => {
      // if using 2 themes
      const themeMode = useThemeModeStore();
      const originTheme = makeOriginUiTheme({ themeMode });
      return (
        <StyledEngineProvider injectFirst>
          <ThemeProvider theme={originTheme}>
            {children}
          </ThemeProvider>
        </StyledEngineProvider>
      );
    };

    Then in your index.j(t)sx or main.j(t)sx :

    ReactDOM.render(
      <React.StrictMode>
        <OriginThemeProvider>
          <App />
        </OriginThemeProvider>
      </React.StrictMode>,
      document.getElementById('root')
    );
    1. Custom theme configuration makeOriginUiTheme accepts 2 argements:
    • themeMode: ThemeModeEnum ('light' | 'dark')
    • colorsConfig: OriginUiThemeVariables
    {
      primaryColor: string;
      primaryColorDark: string;
      primaryColorDim: string;
      textColorDefault: string;
      inputAutofillColor: string;
      simpleTextColor: string;
      bodyBackgroundColor: string;
      mainBackgroundColor: string;
      fieldIconColor: string;
      fontFamilyPrimary: string;
      fontFamilySecondary: string;
      fontSize: number;
    }
    

    By providing colors config - you can change the color scheme of your app, without deep diving into theme configuration.

    • If you pass colorsConfig into makeOriginUiTheme - you have to handle theme colors change on your side by substituting the colorConfig on themeMode change.
    1. Helper functions
    LightenColor(color: string, percent: number, themeMode?: PaletteMode): string
    
    • color in hex format
    • percent can be either positive or negative number (int, decimal) reflecting the percentage of a change to be applied. If the number is positive - it will lighten the color, if negative - darken.
    • themeMode - if supplied will keep percent the same number for 'dark' theme, while inverting the number for the 'light' theme.
    HexToRGBA(hexCode: string, opacity: number) => string;
    
    1. Providers
    <ThemeModeProvider>
       <App />
    </ThemeModeProvider>
    • React context provider.
    • Gives access to current themeMode via useThemeModeStore hook.
    • Gives access to themeMode setState function via useThemeModeDispatch hook.

    Contributing Guidelines

    See contributing.md

    Energy Web Decentralized Operating System

    EW-Origin is a component of the Energy Web Decentralized Operating System (EW-DOS).

    The purpose of EW-DOS is to develop and deploy an open and decentralized digital operating system for the energy sector in support of a low-carbon, customer-centric energy future.

    We develop blockchain technology, full-stack applications and middleware packages that facilitate participation of Distributed Energy Resources on the grid and create open market places for transparent and efficient renewable energy trading.

    • To learn about more about the EW-DOS tech stack, see our documentation

    For a deep-dive into the motivation and methodology behind our technical solutions, read our White Papers:

    Connect with Energy Web

    License

    This project is licensed under the MIT License - see the LICENSE file for details

    Keywords

    none

    Install

    npm i @energyweb/origin-ui-theme

    DownloadsWeekly Downloads

    17

    Version

    0.3.3

    License

    MIT

    Unpacked Size

    42.1 kB

    Total Files

    18

    Last publish

    Collaborators

    • kyleiankian
    • energywebdev
    • aznagy
    • bagaric
    • pkosin
    • drgorb
    • kroy
    • manihagh