Skip to main content

Theming

This step consists in introducing onekijs-ui which is a library that provides many components. Some of them are very complex like a data table with infinite scrolling.
In order to have a consistent look and feel (consistent color, padding, marging, ...), the style of these components is centralized in a customizable theme.

In this step we present how the theme works and how we can use it to update the look and feel of our website.
In the next step, we will introduce some of the components provided by onekijs-ui

caution

To style the components, onekijs-ui uses the styled components library. It's strongly recommended to learn this library !

Final result​

The result of this step is as follows:

New in this step

The background color of the <Navbar /> is from the theme
The font family is also from the theme

Adding onekijs-ui to the project​

onekijs-ui is a standalone library. So we have to add it to the project

yarn add onekijs-ui

Once the library is added, the entrypoint (index.tsx) must be updated to wrap all components in a theme

info

We use <ClarityTheme /> which is a theme provided by onekijs-ui. This theme implements the Clarity Design System from VMware
You can have a look at all the parameters defining the theme here

onekijs-ui allows you to build your own theme from scratch or extend an existing theme to adapt it.

getting-started/cra//step11-theming/src/index.tsx
loading...

Theme colors​

We want to update the navbar so the background color is coming from the theme and not from style.css
Concerning the colors, Onekijs-ui is inspired by [Bootstrap and a theme defines several ones:

nameDescription
primaryThe main color. Generally used for important element like a submit button
secondaryThe second main color. Generally used for less important element
successA color to represent a success
infoA color to represnet some information
warningA color to indicate a warning
dangerA color to indicate a danger / error
whitewhite color
blackblack color
lighta light color
lightesta very light color
darka dark color
darkesta very dark color

This means that if a component defines its background color as secondary, the color will be the one identified by the key secondary in the theme.

info

Actually, more colors are defined by the theme, the list is available here

note

The theme defines not only the colors but also the spacing, border radius, padding, ...

Upgrading the Navbar component​

As we want to use a color coming from the theme, we can't use anymore style.css to define the background color of the <Navbar/>

Therefore, the first thing to do is to update <Navbar> to use a classname generated by styled-components instead of the classname defined in style.css

import { FCC, ... } from 'onekijs';
import React from 'react';
import styled from 'styled-components';

const Navbar: FCC = ({ className }) => { // FCC is like React.FC but add children and className to the props
  ...
  return (
    <div className={className}>
      ...
    </div>
  );
};

The prop className is injected by styled-components like this

//instead of exporting the Navbar directly, we export the styled version
export default styled(Navbar)`
  // CSS HERE
`;

To define the style of the <Navbar/>, we could use standard CSS like this:

import styled from 'styled-components';


export default styled(Navbar)`
  width: 100%;
  height: 68px;
  background-color: #1976d2;
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  h1 {
    color: white;
  }
`;

But we want to use the color from the theme and not an hardcoded one.
To achieve that, for each CSS property, Onekijs-ui provides a method that has access to the theme and therefore can reference a property in the theme

import {
  alignItems,
  backgroundColor,
  color,
  display,
  flexDirection,
  height,
  justifyContent,
  padding,
  width,
} from 'onekijs-ui';
import styled from 'styled-components';


export default styled(Navbar)`
  ${backgroundColor('secondary')} // use the key 'secondary' from the theme to define the color
  ${width('100%')}
  ${height('68px')}
  ${padding('lg')} // use the key 'lg' from the theme to define the size
  ${display('flex')}
  ${flexDirection('row')}
  ${justifyContent('space-between')}
  ${alignItems('center')}

  h1 {
    ${color('white')}
  }
`;

tip

the CSS methods provided by oneki (backgroundColor, width, ...) can do more that just retrieving a color from the theme
Please read this documentation to learn more

The final <Navbar /> now looks like this

getting-started/cra//step11-theming/src/modules/core/components/Navbar.tsx
loading...

Next step​

The getting started tutorial is over. You should now have a good understanding of what onekijs can do to help you build enterprise applications !