# Styling

**Path:** Theming

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Styling

 [:root] Variables
 Group Css Variable 
 Value 

 surface --rb-surface 

 #ffffff 

 --rb-surface-contrast 

 #000000 

 surface-container --rb-surface-container 

 #f7f7f7 

 --rb-surface-container-contrast 

 #000000 

 primary --rb-primary 

 #4c6489 

 --rb-primary-contrast 

 #ffffff 

 primary-lighten --rb-primary-lighten 

 #e4e8ed 

 --rb-primary-lighten-contrast 

 #000000 

 primary-darken --rb-primary-darken 

 #3d506e 

 --rb-primary-darken-contrast 

 #ffffff 

 warning --rb-warning 

 #e18600 

 --rb-warning-contrast 

 #ffffff 

 warning-lighten --rb-warning-lighten 

 #faedd9 

 --rb-warning-lighten-contrast 

 #000000 

 warning-darken --rb-warning-darken 

 #b46b00 

 --rb-warning-darken-contrast 

 #ffffff 

 success --rb-success 

 #0c9518 

 --rb-success-contrast 

 #ffffff 

 success-lighten --rb-success-lighten 

 #dbefdc 

 --rb-success-lighten-contrast 

 #000000 

 success-darken --rb-success-darken 

 #0a7713 

 --rb-success-darken-contrast 

 #ffffff 

 info --rb-info 

 #2589e5 

 --rb-info-contrast 

 #ffffff 

 info-lighten --rb-info-lighten 

 #deedfb 

 --rb-info-lighten-contrast 

 #000000 

 info-darken --rb-info-darken 

 #1e6eb7 

 --rb-info-darken-contrast 

 #ffffff 

 secondary --rb-secondary 

 #757575 

 --rb-secondary-contrast 

 #ffffff 

 secondary-lighten --rb-secondary-lighten 

 #eaeaea 

 --rb-secondary-lighten-contrast 

 #000000 

 secondary-darken --rb-secondary-darken 

 #5e5e5e 

 --rb-secondary-darken-contrast 

 #ffffff 

 danger --rb-danger 

 #f44336 

 --rb-danger-contrast 

 #ffffff 

 danger-lighten --rb-danger-lighten 

 #fde3e1 

 --rb-danger-lighten-contrast 

 #000000 

 danger-darken --rb-danger-darken 

 #c3362b 

 --rb-danger-darken-contrast 

 #ffffff 

 font --rb-font-size 
 Aa 

 16px 

 --rb-font-family 
 Aa 

 'system-ui','-apple-system','Segoe UI','Roboto','Helvetica Neue','Noto Sans','Liberation Sans','Arial','sans-serif','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji' 

 --rb-font-weight 
 Aa 

 400 

 --rb-letter-spacing 

 normal 

 --rb-line-height 

 initial 

 other --rb-bg-opacity 

 1 

 --rb-required-bgcolor 

 #ffffed 

 --rb-required-color 

 #000000 

 --rb-link-color 

 #0d6efd 

 ✕

 Contents