Voyager 2
2.x
2.x
  • Introduction
  • Javascript
  • Media Manager
  • Plugins
  • Settings
  • bread
    • Actions
    • BREAD Builder
    • Layouts
    • Lists
    • Manipulate data
    • Multilanguage
    • Relationships
    • Validation
    • Views
  • contributing
    • Assets
    • CSS
    • Introduction
  • de
    • index
  • formfields
    • Checkboxes
    • Date & Time
    • Dynamic input
    • Formfields
    • Media Picker
    • Number
    • Password
    • Radios
    • Relationship
    • Repeater
    • Select
    • Simple array
    • Slider
    • Slug
    • Tags
    • Text
    • Toggle
  • getting-started
    • Installation
    • Prerequisites
    • Tips and tricks
    • What is Voyager
  • overriding
    • Overriding formfields
    • Icons
  • plugins
    • Assets
    • Components
    • Features
    • Filter
    • Plugin development
    • Language
    • Menu Items
    • Custom pages
    • Preferences
    • Routes
    • Settings
    • Widgets
Powered by GitBook
On this page
  • Mixins
  • Background color
  • Text color
  • Border color

Was this helpful?

  1. contributing

CSS

Mixins

We use a variety of mixins for all kind of colors (border, text, background ...) Those mixins easily generate a CSS variable which can be overriden by theme plugins.

Background color

...

Text color

...

Border color

...

As a rule of thumb: you should never directly include a color, for example color: red;. Instead use the appropriate mixin, give it a reasonable name and provide a default value. For example:

@import "mixins/bg-color";
@import "mixins/text-color";

.body {
    @include bg-color(bg-color, 'colors.gray.500');
    @include text-color(text-color, 'colors.red.500');
}
PreviousAssetsNextIntroduction

Last updated 4 years ago

Was this helpful?