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.
This package is available through the npm registry.
npm install @energyweb/origin-ui-theme
yarn add @energyweb/origin-ui-theme
Before installing make sure you have react
>= 17.0.2 installed.
- 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')
);
- 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
intomakeOriginUiTheme
- you have to handle theme colors change on your side by substituting thecolorConfig
onthemeMode
change.
- Helper functions
LightenColor(color: string, percent: number, themeMode?: PaletteMode): string
color
in hex formatpercent
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 thecolor
, 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;
- Providers
<ThemeModeProvider>
<App />
</ThemeModeProvider>
- React context provider.
- Gives access to current
themeMode
viauseThemeModeStore
hook. - Gives access to
themeMode
setState
function viauseThemeModeDispatch
hook.
See contributing.md
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:
This project is licensed under the MIT License - see the LICENSE file for details