Changing the App Color Theme

Let's make our first real change to our application. We'll start off with something simple to make sure we have our new AppContainer wired up properly.

Modifying the Material UI theme

In your new AppContainer let's modify the theme variable declared near the beginning of the file. This theme is part of the theming system of Material-UI (the primary component library CMC ships with). You can read more about Material-UI theming here.

Since this walkthrough is focused on hurricanes data, we'll generate a color scheme a bit more thematically related. To do this we'll use Google's Material Color Tool. We'll use this color scheme for now but you can substitute whichever colors you like.

const theme = createMuiTheme({
    typography: {
        htmlFontSize: 10
    },
    palette: {
        primary: {
            main: "#3d5afe",
            light: "#8187ff",
            dark: "#0031ca",
            contrastText: "#fff"
        },
        secondary: {
            main: "#3d5afe",
            light: "#8187ff",
            dark: "#0031ca",
            contrastText: "#fff"
        }
    }
});

Modifying the CMC Color Variables

We're almost done customizing the main colors of our application but there's one more place we need to make a modification. In src/styles/_colors.scss we'll need to modify the $color-primary SASS variable to use our new primary main color. CMC uses this $color-primary variable in several component style files when creating custom components since hooking in to Material-UI's color theme for custom components can often be a bit cumbersome.

$color-primary: #3d5afe;
$color-secondary: #2196f3;

Now if we look at our application in the browser we may not see an immediate change in the default state but if we open up something like the help menu or turn on a map layer we should see that our primary color is now being used for components like checkboxes, toggles, and headers.