Setting up the Less variables
The next step will be to set up the new Less variables for the magazine project. Open the _variables.less
file, which is found in css/components
. Let's go through each section that you need to update:
@bm-primary: #673ab7; @bm-dark-primary: #512da8; @bm-light-primary: #d1c4e9; @bm-accent: #e040fb; @bm-black: #212121; @bm-grey: #727272; @bm-light-grey: #b6b6b6;
As we did in the previous wiki project, we're going to use the primary naming convention for our custom colors. Each one is prepended with bm-
in order to make it easily identifiable.
Background colors
Next, let's update our background color variables to use our new color values:
@primary-background: @white; @secondary-background: @bm-grey; @inverse-background: @bm-black;
Text colors
After setting up the background, let's move on to updating our text color variables to use the new values:
@primary-text: @bm-grey; @light-text: @bm-light-grey; @loud-text: @bm-black; @inverse-text: @white; @heading-text: @bm...