Theme: The One about Palette

If I could go back in time to when I was creating a portfolio, I would set up a color palette before I began building out any UI. While it may seem like extra steps, it does save time in the long run and prevents usage of incorrect colors or colors that are not complementary. A palette can transform your hack project from student to professional.

Choosing A Palette

For those of us who are not designers, choosing a color palette can be a daunting task. One way I’ve overcome this is by using palette generators such as Canva. https://www.canva.com/colors/color-palette-generator/

In one of my recent projects, I wanted the concept or theme to revolve around a piñata. I found an image of a piñata that I liked, dropped it into the palette generator, and instantly had great colors to work with.

Setup a CSS Color Palette

In the root directory of your project open the styles.css file or App.css file. Here you can create color variables which can be accessed throughout the project. You will need to place your styles inside of the selector :root. Start the name of each variable with two dashes.

For example:

:root {
 --primary: #3a7199;
 --primary-light: #d3e5ee;
 --secondary: #f2ae45;
 --tertiary: #d35557;
}

Now these variables are accessible in any of your stylesheets by calling them like so:

background-color: var(--primary-light);

Without much setup, your project now has a color palette!

Setup a MUI Color Palette

Material UI comes with a default palette which you can access without setup. However, if you want to create a custom palette, you will need these steps.

To create a custom theme, first wrap all of your code from App.tsx with a ThemeProvider from MUI. In a separate file or the same file, name your theme variable and use the createTheme hook provided by MUI.

App.js

<ThemeProvider theme={myTheme}>
   //All of the code inside of your App function
</ThemeProvider>

theme.js

import { createTheme } from '@mui/material/styles';

const myTheme = createTheme({
  palette: {
    primary: {
      main: ‘#3A7199’,
      light: ‘#D3E5EE’
    },
    secondary: {
      main: '#F2AE45',
    },
  },
});

export default myTheme;

There are different ways to setup stylesheets with MUI, but however you choose to do it set the styles like so:

backgroundColor: theme.palette.primary.main

Whether you chose a simple css color theme or a MUI theme setup, you will have more precision in the design and creation of your project with a color palette. Get out there and make the web a beautiful place.