Theming

Customize Sonnat with your own theme. You can change the breakpoints, coloring, typography and etc.

Themes let you apply a consistent feeling and tone to your application. It allows you to customize all the design aspects of your application in order to meet the specific needs of your business or brand.

Creating the Theme

Create a theme object that will be shared between the client and the server.
If you don't provide a theme object the theming will be defaults to Default Theme.

// file: theme.js

import createTheme from "@sonnat/ui/styles/createTheme";

// Create a theme instance.
const theme = createTheme({
  // Your theme options
});

export default theme;

Default Theme

Here's what the theme object looks like with the default values. Explore the default theme object:

Passing Down the Theme Object

If you wish to declare the parent theme of your application, you need to use the <SonnatInitializer> component in order to inject the main theme into your application. However, if you want to change the theming behaviour of an inner part of application's react-tree, you can always use nested <ThemeProvider> component to merge/augment the parent theme object.

import ThemeProvider from "@sonnat/ui/styles/ThemeProvider";
import SonnatInitializer from "@sonnat/ui/styles/SonnatInitializer";

<SonnatInitializer theme={mainTheme}>
  <CustomComponent />
  <ThemeProvider theme={theme2}>
    <CustomComponent />
  </ThemeProvider>;
</SonnatInitializer>;

<ThemeProvider> has a theme prop which should be an object or function:

• If it is Object, then it gets merged with the theme from a parent ThemeProvider and passed down the react tree.

  const theme = { themed: true };
  const patch = { merged: true };
  
  <ThemeProvider theme={theme}>
    {/* { ...initializerTheme, themed: true } */}
    <ThemeProvider theme={patch}>
      <DemoBox /> {/* { ...initializerTheme, themed: true, merged: true } */}
    </ThemeProvider>
  </ThemeProvider>;

• If it is Function, then it's being applied to the theme from a parent ThemeProvider. If the result is an Object it will be passed down the react tree, throws otherwise.

  const theme = { themed: true };
  const augment = outerTheme => ({...outerTheme, { augmented: true }});
  
  <ThemeProvider theme={theme}>
    {/* { ...initializerTheme, themed: true } */}
    <ThemeProvider theme={augment}>
      <DemoBox /> {/* { ...initializerTheme, themed: true, augmented: true } */}
    </ThemeProvider>
  </ThemeProvider>;

Accessing the Theme Object

You can access the theme object in Function Components via useTheme hook.

import React from "react";
import useTheme from "@sonnat/ui/styles/useTheme";

export default function MyComponent() {
  const theme = useTheme();

  return <div style={{ color: theme.colors.primary.origin }}></div>;
}

You can also access the theme object when styling components using makeStyles function.
This function uses our styling solution at its core.

import makeStyles from "@sonnat/ui/styles/makeStyles";

const useThemedStyles = makeStyles(
  theme => ({
    root: { color: theme.colors.text.dark.primary }
  }),
  { name: "MyThemedStyles" }
);

function ComponentA(props) {
  const classes = useThemedStyles();
  return <div className={classes.root} />;
}