CSS variables

Igloo uses CSS custom properties (variables) for all theme related styling.

Generated theme

When ever the theme node is saved, the ig-theme.css is used as a template to create a new css file under /css/generated-themes/ Here you can see a generated theme css file.

:root{    
    //Base
    --white: #fff;
    --black: #000;

    // Theme 
    --theme: #3aa5ed;
    --theme-rgb: 58, 165, 237; // rgb from --theme
    --theme-darker: #148ee0; // 10% darken than --theme
    --theme-contrast: #fff;
    
    // Theme secondary 
    --theme-alt: #2ecc71;
    --theme-alt-darker: #25a25a; // 10% darken than --theme-alt
    --theme-alt-contrast: #fff;

    // Dark 
    --heading-dark: #111;
    --text-dark: #444;
    --background-dark: #111;
    --background-dark-lighter: #1b1b1b; // 5% lighter than --bakground-dark
    --border-dark: rgba(0,0,0,0.08);

    // Light 
    --heading-light: #fff;
    --text-light: #fff;
    --background-light: #f9f9f9;
    --border-light: rgba(255,255,255,0.1);

    // Header
    --selected-nav-item: #3aa5ed;
    --header-height: 70px;
    --logo-padding: 24px;
    --pre-top-height: 30px;
    --top-combo-calc: calc(var(--header-height) + var(--pre-top-height));
    --navigation-padding: 30px;
    --navigation-font-size: 0.875rem;    
    --navigation-font-weight: bold;    

    // Grid
    --grid-width-small: 850px;
    --grid-width: 1300px;
    --grid-width-big: 1600px;
    --grid-gutter: 30px;
    --grid-gutter-half: calc(var(--grid-gutter) / 2);

    // Buttons
    --button-border-radius: 4px;

    // Typography
    --body-font: "Roboto", sans-serif;
    --heading-font: "Roboto", sans-serif;
    
    --font-size: 1.1rem;
    --font-size-big: 1.25rem;
    --font-size-small: 0.75rem;

    --body-line-height: 1.6;
    
    --font-size-h1: 2.5rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.2rem;
    --font-size-h6: 1rem;
    --hero-heading: 3.75rem;
    --heading-line-height: 1.5; 
    
    --font-weight-normal: normal;
    --font-weight-light: 300;
    --font-weight-bold: bold;
    --font-weight-bolder: bolder;
    
    --body-font-weight: normal;
    --heading-font-weight: bold;
    --text-big-font-weight: 300;

    // Validation
    --success: #2ecc71;
    --error: #e74c3c;

    @media @l{
        --navigation-padding: 15px;
    }

    @media @m{
        --header-height: 50px;
        --grid-gutter: 20px;
        --logo-padding: 15px;
        --navigation-font-size: 1rem;   
    }

    @media @s{
        --grid-gutter: 15px;
        --hero-heading: 2.5rem;
    }

    @media @xs{
        --grid-gutter: 15px;
    }
}

 

CSS template file

Here you can see what the ig-theme.css file looks like, values like {themeColor} are replaced with the value from the theme node in Umbraco.

:root {
    /* Base */
    --white: #fff;
    --black: #000;
    
    /* Theme */
    --theme: {themeColor};
    --theme-rgb: {themeColorRGB};
    --theme-darker: {themeColorDarker};
    --theme-contrast: {themeContrast};

    /* Theme alt */
    --theme-alt: {themeAltColor};
    --theme-alt-darker: {themeAltColorDarker};
    --theme-alt-contrast: {themeAltContrast};
    
    /* Dark */
    --heading-dark: {headingColorDark};
    --text-dark: {textColorDark};
    --background-dark: {darkBackground};
    --background-dark-lighter: {darkBackgroundLighter};
    --border-dark: {borderDark};
    
    /* Light */
    --heading-light: {headingColorLight};
    --text-light: {textColorLight};
    --background-light: {grayBackground};
    --border-light: {borderLight};
    
    /* Header */
    --selected-nav-item: {selectedNavigationItem};
    --header-height: {headerHeight};
    --logo-padding: {logoPadding};
    --pre-top-height: 30px;
    --top-combo-calc: calc(var(--header-height) + var(--pre-top-height));
    --navigation-padding: {navigationPadding};
    --navigation-font-size: {navigationFontSize};    
    --navigation-font-weight: {navigationFontWeight};
    
    /* Grid */
    --grid-width-small: {gridWidthSmall};
    --grid-width: {gridWidth};
    --grid-width-big: {gridWidthBig};
    --grid-gutter: {gridGutter};
    --grid-gutter-half: calc(var(--grid-gutter) / 2);
    
    /* Buttons */
    --button-border-radius: {buttonBorderRadius};
    
    /* Typography */
    --body-font: {bodyFont};
    --heading-font: {headingFont};
    --font-size: {textFontSize};
    --font-size-big: {textBigFontSize};
    --font-size-small: {textSmallFontSize};
    --body-line-height: {textLineHeight};
    
    --font-size-h1: {heading1FontSize};
    --font-size-h2: {heading2FontSize};
    --font-size-h3: {heading3FontSize};
    --font-size-h4: {heading4FontSize};
    --font-size-h5: {heading5FontSize};
    --font-size-h6: {heading6FontSize};
    --hero-heading: {heroHeadingFontSize};
    --heading-line-height: {headingLineHeight}; 
    
    --font-weight-normal: normal;
    --font-weight-light: 300;
    --font-weight-bold: bold;
    --font-weight-bolder: bolder;
    
    --body-font-weight: {textFontWeight};
    --heading-font-weight: {headingFontWeight};
    --text-big-font-weight: {textBigFontWeight};
    
    /* Validation */
    --success: {success};
    --error: {error};
}
@media only screen and (max-width: 1200px) {
  :root {
    --navigation-padding: {navigationPaddingSmallerScreens};
  }
}
@media only screen and (max-width: 992px) {
  :root {
    --header-height: {headerHeightMobile};
    --grid-gutter: {gridGutterMedium};
    --logo-padding: {logoPaddingMobile};
    --navigation-font-size: {navigationFontSizeMobile};
  }
}
@media only screen and (max-width: 768px) {
  :root {
    --grid-gutter: {gridGutterSmall};
    --hero-heading: {heroHeadingMobileFontSize};
  }
}
@media only screen and (max-width: 480px) {
  :root {
    --grid-gutter: {gridGutterXS};
  }
}