Biến toàn cục dùng trong CSS

Dùng biến toàn cục cho css sẽ giúp chúng ta quản lý tốt hơn các tùy chọn giao diện, tránh phải tìm lại các mã màu hay là các tùy chỉnh đã làm trong dự án. Dưới đây là cách định nghĩa mã màu và cách gọi nó khi dùng.

// khai bao mã màu
:root {
  --main-bg-color: coral;
}

// gọi mã màu khi sử dụng
#div1 {
  background-color: var(--main-bg-color);
}

Một số biến toàn cục dùng trong theme flatsome

var(–primary-color);

var(–secondary-color);

var(–success-color);

var(–alert-color);

Các biến toàn cục dùng định nghĩa màu cho website

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}