Theming

CSSvars Framework is based on CSS variables that control the entire framework.
To change theme change the variables in the CSS file, you can choose one of the pre-built themes below, or change the varables to match your needs

Select a theme

        
          :root {
            --color-1: #083c5c;
            --color-2:#4a4e69;
            --dark: #495057;
            --grey: #ccc;
            --white: #fff;
            --danger: #cc3a3a;
            --info: #1191b8;
            --success: #0abfa4;
            --warning: #bda06a;
            --luxury:#4b2f5a;
            --light-grey: #f6f6f6;
            --body-bg: #fff;
            --body-color: #111;
            --fontweight: 300;
            --fontweight-heading: 300;
            --font-size-mobile: 12px;
            --font-size-desktop: 16px;
            --line-height: 1.4;
            --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, 
             "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --color-1-rgb:8, 60, 92;
            --color-2-rgb:74, 78, 105;
            --dark-rgb: 34, 34, 37;
            --grey-rgb: 204, 204, 204;
            --white-rgb: 255, 255, 255;
            --danger-rgb: 204, 58, 58;
            --info-rgb: 17, 145, 184;
            --success-rgb: 10, 191, 164;
            --warning-rgb:189, 160, 106;
            --luxury-rgb:75, 47, 90;
          }