/* THEME VARIABLES */ :root { --theme-background: #EBEEF0; --theme-surface: #fff; --theme-surface-rgb: 255, 255, 255; --theme-surface-1: #fcfcfc; --theme-surface-2: #e0e0e0; --theme-primary: #FF9966; --theme-secondary: #9e9e9e; --theme-accent: #3399FF; --theme-color-font: #2c2f3a; --theme-color-font-muted: rgba(44, 47, 58, 0.85); --theme-color-font-muted2: rgba(44, 47, 58, 0.65); --theme-failure: #f44336; --theme-warning: #ffae42; --theme-success: #4BB543; --theme-on-primary: #fff; } [data-theme="dark"] { --theme-background: #1c1c1c; --theme-surface: #2f2f2f; --theme-surface-rgb: 47, 47, 47; --theme-surface-1: #434343; --theme-surface-2: #575757; --theme-color-font: #fff; --theme-color-font-muted: #f9f9f9; --theme-warning: #dc584e; } [data-accent="red"] { --theme-primary: #f44336; } [data-accent="pink"] { --theme-primary: #e91e63; } [data-accent="purple"] { --theme-primary: #9c27b0; } [data-accent="deepPurple"] { --theme-primary: #673ab7; } [data-accent="indigo"] { --theme-primary: #3f51b5; } [data-accent="blue"] { --theme-primary: #2196f3; } [data-accent="lightBlue"] { --theme-primary: #03a9f4; --theme-on-primary: #2c2f3a; } [data-accent="cyan"] { --theme-primary: #00bcd4; --theme-on-primary: #2c2f3a; } [data-accent="teal"] { --theme-primary: #009688; } [data-accent="green"] { --theme-primary: #4caf50; --theme-on-primary: #2c2f3a; } [data-accent="lightGreen"] { --theme-primary: #8bc34a; --theme-on-primary: #2c2f3a; } [data-accent="lime"] { --theme-primary: #cddc39; --theme-on-primary: #2c2f3a; } [data-accent="yellow"] { --theme-primary: #ffeb3b; --theme-on-primary: #2c2f3a; } [data-accent="amber"] { --theme-primary: #ffc107; --theme-on-primary: #2c2f3a; } [data-accent="deepOrange"] { --theme-primary: #ff5722; } [data-accent="brown"] { --theme-primary: #795548; } [data-accent="grey"] { --theme-primary: #9e9e9e; --theme-on-primary: #2c2f3a; } [data-accent="blueGrey"] { --theme-primary: #607d8b; } /* THEME CLASSES */ .theme-surface { background-color: var(--theme-surface) !important; } .theme-surface-1 { background-color: var(--theme-surface-1) !important; } .theme-background { background-color: var(--theme-background) !important; } .theme-primary { background-color: var(--theme-primary) !important; } .theme-primary-text { color: var(--theme-primary) !important; } .theme-secondary { background-color: var(--theme-secondary) !important; } .theme-secondary-text { color: var(--theme-secondary) !important; } .theme-accent { background-color: var(--theme-accent) !important; } .theme-accent-text { color: var(--theme-accent) !important; } .theme-text { color: var(--theme-color-font) !important; } .theme-failure { background-color: var(--theme-failure) !important; } .theme-failure-text { color: var(--theme-failure) !important; } .theme-warning { background-color: var(--theme-warning) !important; } .theme-warning-text { color: var(--theme-warning) !important; } .theme-success { background-color: var(--theme-success) !important; } .theme-success-text { color: var(--theme-success) !important; } .theme-muted-text { color: var(--theme-color-font-muted) !important; } .theme-muted2-text { color: var(--theme-color-font-muted2) !important; } .theme-surface-transparent { background: rgba(var(--theme-surface-rgb), 0.8) !important; } .theme-surface-transparent1 { background: rgba(var(--theme-surface-rgb), 0.9) !important; } .theme-on-primary { background-color: var(--theme-on-primary) !important; } .theme-on-primary-text { color: var(--theme-on-primary) !important; }