Theme your Teft design to better reflect your product’s brand.
Install the module
npm install @teft/theme| Name | Default value | Explanation |
|---|---|---|
--teft-theme-site-width |
75rem |
Width of the site. Also used to define "wide" elements in the WordPress editor |
--teft-theme-content-width |
36rem |
Width of the content, ex paragraphs, images... |
--teft-theme-site-padding |
3rem |
How much padding there should be from the browser window to the site |
--teft-theme-gap |
3rem |
Global gap variable used in ex. defining the gap between columns |
--teft-theme-block-margin |
5rem |
Margin between blocks |
--teft-theme-negative-block-margin |
-3rem |
Move blocks closer to eachother. Ex two paragraph block don't want the full block margin (5rem - 3rem = 2rem) |
--teft-theme-primary-color |
#1897ec |
Primary color |
--teft-theme-on-primary-color |
#fff |
Color used if primary color is the background color |
--teft-theme-secondary-color |
#e9e9e9 |
Secondary color |
--teft-theme-on-secondary-color |
#000 |
Color used if secondary color is the background color |
--teft-theme-body-font-color |
#222 |
Main body font color |
--teft-theme-header-font-color |
var(--teft-theme-body-font-color) |
Main heading font color |
--teft-theme-alert-color |
#c60f13 |
Alert color |
--teft-theme-on-alert-color |
#fff |
Color used if alert color is the background color |
--teft-theme-success-color |
#5da423 |
Success color |
--teft-theme-on-success-color |
#fff |
Color used if success color is the background color |
--teft-theme-warning-color |
#ffae00 |
Warning color |
--teft-theme-on-warning-color |
#fff |
Color used if warning color is the background color |
--teft-theme-disabled-color |
#ccc |
Disabled color |
--teft-theme-on-disabled-color |
#fff |
Color used if disabled color is the background color |