Customizing Colors

To make your own branding colors you just need some customizations in the main stylesheet (style.css) file. Just open style.css file in a code editor and find the :root selector. Mou template has some default colors defined as CSS variables. Change the Hex Code as theme primary color, dark color, text color, light color, etc. Also, you need to change the Alpha color RGBA code.

/* 1.2 Root variables */
:root {
    /* Default Fonts */
    ...
    /* Font Size */
    ...
    /* Default Colors */
    --color-primary: #f5245f;
    --color-dark-1: #12161e;
    --color-dark-2: #1c222e;
    --color-dark-3: #798497;
    --color-dark-4: #949aa4;
    --color-light-1: #f1f2f3;
    --color-light-2: #edf1f4;
    --color-white: #fff;
    --color-green: #2cb8a5;
    --color-gray: #b4b4b4;
    --color-black: #000000;
    /* Default Colors - Alpha */
    --color-primary-alpha-10: rgba(245, 36, 95, 0.1);
    --color-primary-alpha-25: rgba(245, 36, 95, 0.25);
    --color-primary-alpha-50: rgba(245, 36, 95, 0.5);
    --color-primary-alpha-75: rgba(245, 36, 95, 0.75);
    --color-dark-alpha-10: rgba(18, 22, 30, 0.1);
    --color-dark-alpha-25: rgba(18, 22, 30, 0.25);
    --color-dark-alpha-50: rgba(18, 22, 30, 0.5);
    --color-dark-alpha-75: rgba(18, 22, 30, 0.75);
	--color-dark-alpha-90: rgba(18, 22, 30, 0.90);
    --color-white-alpha-25: rgba(255, 255, 255, 0.25);
    --color-white-alpha-50: rgba(255, 255, 255, 0.5);
    --color-white-alpha-75: rgba(255, 255, 255, 0.75);
    --color-black-alpha-25: rgba(0, 0, 0, 0.25);
    --color-black-alpha-50: rgba(0, 0, 0, 0.5);
    --color-black-alpha-75: rgba(0, 0, 0, 0.75);