Skip to content

UI Customizations

Jump to bottom
Alexander Popadyuk edited this page Nov 19, 2020 · 3 revisions

UI Customizations

Changing color scheme

  1. Go to /packages/origin-ui/src/styles/variables.scss
  2. Here you can change:
  • $primaryColor - main theme color, should be bright one.
  • $textColorDefault - the main text color for whole application.
  • $simpleTextColor - secondary text color, should be either #000000 or #ffffff.
  • $bodyBackgroundColor - background color used only for <body> tag.
  • $mainBackgroundColor - background color used for all components in the application. It is not recommended to use black or white color for this variable, because all other colors in the application are lighten or darken from the main color and this may affect the general styling.

Changing colors for components

Locally:

  1. In component get configuration using hook useOriginConfiguration().
  2. Get the color you want to adjust, example:
const originBgColor = configuration?.styleConfig?.MAIN_BACKGROUND_COLOR`
  1. Lighten or darken the original color using LightenColor(color, percent) from origin-ui-core package.
    For lighten use positive percentage, for darken use negative percentage.
  2. Apply new color to your component.

Throughout application:

  1. Go to /packages/origin-ui/src/components/OriginConfigurationContext.tsx.
  2. Find 'createMaterialThemeForOrigin' function.
  3. In return statement you can adjust the colors applied to the Material-UI components throughout application.

Notes:
It is recommended to avoid using hard-coded colors, example: backgroundColor: #363636. Always try to lighten or darken one of already existing colors.
If it is impossible to achieve the needed color with lighten tool:

  1. Add new variable to scss file.
  2. Add it to the OriginConfigurationContext in origin-ui.
  3. Retrieve it from the configuration context.
Clone this wiki locally