In the theme folder you can find the LESS variables in the following files:
- /assets/less/variables.less (Twitter Bootstrap variables)
- /assets/less/{theme-name}-variables.less (where {theme-name} is the current theme name like schema-corporate)
You can edit these files directly or (which is better if you want to get automatic updates): you can edit the variables directly on the themes options page. Just activate custom colours and scroll down to the “LESS Variable Changer”.
Here is a short excerpt of the variables.less:
// Grays // ------------------------- @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #555; @grayLight: #999; @grayLighter: #eee; @white: #fff; // Accent colors // ------------------------- @blue: #049cdb; @blueDark: #0064cd; @green: #46a546; @red: #9d261d; @yellow: #ffc40d; @orange: #f89406; @pink: #c3325f; @purple: #7a43b6; // Scaffolding // ------------------------- @bodyBackground: @white; @textColor: @grayDark; // Links // ------------------------- @linkColor: #08c; @linkColorHover: darken(@linkColor, 15%); // Typography // ------------------------- @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; @baseFontSize: 14px; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily; @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontWeight: bold; // instead of browser default, bold @headingsColor: inherit; // empty to use BS default, @textColor // Component sizing // ------------------------- // Based on 14px font-size and 20px line-height @fontSizeLarge: @baseFontSize * 1.25; // ~18px @fontSizeSmall: @baseFontSize * 0.85; // ~12px @fontSizeMini: @baseFontSize * 0.75; // ~11px @paddingLarge: 11px 19px; // 44px @paddingSmall: 2px 10px; // 26px @paddingMini: 0 6px; // 22px @baseBorderRadius: 4px; @borderRadiusLarge: 6px; @borderRadiusSmall: 3px; // Tables // ------------------------- @tableBackground: transparent; // overall background-color @tableBackgroundAccent: #f9f9f9; // for striping @tableBackgroundHover: #f5f5f5; // for hover @tableBorder: #ddd; // table and cell border // Buttons // ------------------------- @btnBackground: @white; @btnBackgroundHighlight: darken(@white, 10%); @btnBorder: #bbb; @btnPrimaryBackground: @linkColor; @btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnInfoBackground: #5bc0de; @btnInfoBackgroundHighlight: #2f96b4; @btnSuccessBackground: #62c462; @btnSuccessBackgroundHighlight: #51a351; @btnWarningBackground: lighten(@orange, 15%); @btnWarningBackgroundHighlight: @orange; @btnDangerBackground: #ee5f5b; @btnDangerBackgroundHighlight: #bd362f; @btnInverseBackground: #444; @btnInverseBackgroundHighlight: @grayDarker; // Forms // ------------------------- @inputBackground: @white; @inputBorder: #ccc; @inputBorderRadius: @baseBorderRadius; @inputDisabledBackground: @grayLighter; @formActionsBackground: #f5f5f5; @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border // Dropdowns // ------------------------- @dropdownBackground: @white; @dropdownBorder: rgba(0,0,0,.2); @dropdownDividerTop: #e5e5e5; @dropdownDividerBottom: @white; @dropdownLinkColor: @grayDark; @dropdownLinkColorHover: @white; @dropdownLinkColorActive: @white; @dropdownLinkBackgroundActive: @linkColor; @dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; // (and a lot more)
Here is the content of the schema-corporate-variables.less (Version 1.4):
@fontSizeXL: @baseFontSize * 2; // ~24px
@fontSizeXXL: @baseFontSize * 2.75; // ~40px
// The standard border colors
@border-color: #d4d4d4;
@border-width: 1px;
@border-style: solid;
@border: @border-width @border-style @border-color;
@border-radius: 5px;
// the header (with title, subtitle, logo, etc.)
@header-background-color: #fcfcfc;
@header-border: @border;
@header-title-font-family: @headingsFontFamily;
@header-title-font-size: @fontSizeXXL;
@header-title-font-color: #515151;
@header-subtitle-font-family: @headingsFontFamily;
@header-subtitle-font-color: #777777;
@header-subtitle-font-size: @baseFontSize;
// the background color of some rows
@frontpage-row-background-color: #f3f3f3;
// The twiter widget
@widget-twitter-background: #ffffff;
@widget-twitter-border: @border;
// Gradients
@gradient-start-color: #ffffff;
@gradient-end-color: #efefef;
// Box shadows
@box-shadow-outer: 0 1px 3px -1px rgba(0, 0, 0, 0.15);
@layout-box-shadow-outer: 0 2px 3px 1px rgba(0, 0, 0, 0.15);
// The footer sections
@footer-1-font-size: @baseFontSize;
@footer-1-font-color: @textColor;
@footer-1-link-color: @textColor;
@footer-1-link-color-hover: @textColor;
@footer-1-background: url( %("%s/assets/img/textile-light.jpg", @theme-uri) );
@footer-2-font-size: @fontSizeMini;
@footer-2-font-color: fade( @textColor, 50% );
@footer-2-link-color: @footer-2-font-color;
@footer-2-link-color-hover: @footer-2-font-color;
@footer-2-background: none;
// Headerbar colors
@headerbar-font-size: @fontSizeSmall;
@headerbar-font-color: #ffffff;
@headerbar-link-color: @headerbar-font-color;
@headerbar-link-color-hover: @headerbar-link-color;
@headerbar-background: url( %("%s/assets/img/textile-black.jpg", @theme-uri) );
// Sidebars
@sidebar-background-color: #F4F4F4;
// Content background colors
@content_background_color: #ffffff;
// Header navigation link colors
@header-nav-link-color: #0088CC;