API tools faq
paste
Guest User

MyTheme

a guest
Mar 5th, 2025
115
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.26 KB | None | 0 0
raw download clone embed print report
  1. GraphiteTheme:
  2. card-mod-theme: GraphiteTheme
  3. modes:
  4. light:
  5. token-rgb-primary: 117,172,180
  6. token-rgb-black: 0, 0, 0
  7. token-rgb-white: 240, 243, 255
  8. token-rgb-purple: 129, 45, 250
  9. token-rgb-pink: 204, 0, 136
  10. token-rgb-red: 204, 0, 51
  11. token-rgb-deep-purple: 98, 0, 234
  12. token-rgb-indigo: 48, 63, 159
  13. token-rgb-blue: 33, 150, 243
  14. token-rgb-light-blue: 3, 169, 244
  15. token-rgb-cyan: 0, 188, 212
  16. token-rgb-teal: 0, 150, 136
  17. token-rgb-green: 56, 142, 60
  18. token-rgb-light-green: 139, 195, 74
  19. token-rgb-lime: 205, 220, 57
  20. token-rgb-yellow: 255, 235, 59
  21. token-rgb-amber: 255, 193, 7
  22. token-rgb-orange: 255, 158, 0
  23. token-rgb-deep-orange: 255, 87, 34
  24. token-rgb-brown: 121, 85, 72
  25. token-rgb-grey: 158, 158, 158
  26. token-rgb-blue-grey: 96, 125, 139
  27. token-rgb-disabled: 189, 189, 189
  28. token-rgb-state-inactive: 176, 190, 197
  29. token-color-primary: rgb(var(--token-rgb-primary))
  30. token-color-primary-light: rgb(167 182 199)
  31. token-color-accent: var(--token-color-primary)
  32. token-color-disabled: rgb(173 176 184)
  33. token-color-feedback-info: rgb(39, 209, 246)
  34. token-color-feedback-warning: rgb(255, 219, 117)
  35. token-color-feedback-error: rgb(234, 114, 135)
  36. token-color-feedback-success: rgb(118, 214, 152)
  37. token-color-icon-primary: rgba(19, 21, 54, 0.87)
  38. token-color-icon-secondary: rgba(19, 21, 54, 0.8)
  39. token-color-icon-sidebar: rgba(19, 21, 54, 0.7)
  40. token-color-icon-sidebar-selected: var(--token-color-icon-primary)
  41. token-color-text-primary: rgba(19, 21, 54, 0.95)
  42. token-color-text-secondary: rgba(19, 21, 54, 0.8)
  43. token-color-text-disabled: rgba(19, 21, 54, 0.38)
  44. token-color-text-sidebar-selected: var(--token-color-text-primary)
  45. token-color-text-sidebar: var(--token-color-text-secondary)
  46. token-color-text-label-badge: rgba(19, 21, 54, 0.7)
  47. token-color-text-chip: var(--token-color-black)
  48. token-color-background-base: rgb(243, 243, 243)
  49. token-color-background-secondary: rgb(245, 245, 245)
  50. token-color-background-sidebar: var(--token-color-background-base)
  51. token-color-background-input-base: rgb(255, 255, 255)
  52. token-color-background-input-disabled: rgb(245, 245, 245)
  53. token-color-background-label-badge: rgb(230, 230, 230)
  54. token-color-background-card: rgb(255, 255, 255)
  55. token-color-background-skrim: rgba(0, 0, 0, 0.5)
  56. token-color-background-divider: rgb(224, 224, 224)
  57. token-color-background-scrollbar-thumb: rgb(200, 200, 200)
  58. token-color-background-label-badge-red: var(--token-color-feedback-error)
  59. token-color-background-label-badge-green: rgb(78, 183, 128)
  60. token-color-background-label-badge-blue: var(--token-color-feedback-info)
  61. token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
  62. token-color-background-label-badge-grey: rgb(83, 90, 103)
  63. token-color-background-popup-scrim: rgba(0, 0, 0, 0.5)
  64. token-color-border-card: rgb(234, 234, 234)
  65. token-color-switch-button-unchecked: rgba(0, 0, 0, 0.5)
  66. token-color-switch-track-unchecked: rgba(0, 0, 0, 0.25)
  67. token-color-codemirror-string: rgb(0, 77, 153)
  68. token-color-codemirror-keyword: rgb(70, 112, 216)
  69. token-color-codemirror-number: rgb(204, 85, 0)
  70. token-shadow-card-medium: 0 2px 4px 0px rgba(0, 0, 0, 0.06)
  71.  
  72. ##################################################
  73. # Size tokens
  74. ##################################################
  75.  
  76. ##################################################
  77. ## Radius
  78. token-size-radius-small: 6px
  79. token-size-radius-medium: 8px
  80. token-size-radius-large: 12px
  81. token-size-radius-card: var(--token-size-radius-large)
  82. ##################################################
  83. ## Border
  84. token-size-width-border-card: 1px
  85. ##################################################
  86. ## Height
  87. token-size-height-slider: 4px
  88. token-size-height-navbar: 56px
  89. ##################################################
  90. ## Font
  91. token-size-font-medium: 16px
  92. token-size-font-large: 28px
  93. token-size-font-title: var(--token-size-font-large)
  94. token-size-font-title-card: var(--token-size-font-medium)
  95. ##################################################
  96. ## Spacing
  97. token-size-spacing-medium: 24px
  98. token-size-section-min-width: 320px
  99. ##################################################
  100. # Color tokens
  101. token-color-transparent: rgba(0, 0, 0, 0)
  102. token-color-black: rgb(0, 0, 0)
  103. token-color-white: rgb(255, 255, 255)
  104. ##################################################
  105. # Other tokens
  106. ##################################################
  107.  
  108. ##################################################
  109. # Opacity
  110. token-opacity-ripple-hover: 0.14
  111. ##################################################
  112. ## Font
  113. token-weight-font-title-card: 500
  114. ##################################################
  115. # Font family
  116. token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
  117.  
  118. ##################################################
  119. # Definitions
  120. ##################################################
  121.  
  122. ##################################################
  123. # Shapes
  124. mdc-shape-small: var(--token-size-radius-small)
  125. mdc-shape-medium: var(--token-size-radius-medium)
  126. mdc-shape-large: var(--token-size-radius-large)
  127. ##################################################
  128. # Sizes
  129. header-height: var(--token-size-height-navbar)
  130. paper-slider-height: var(--token-size-height-slider)
  131. ##################################################
  132. # Typography
  133. primary-font-family: var(--token-font-family-primary)
  134. paper-font-common-base_-_font-family: var(--token-font-family-primary)
  135. paper-font-common-code_-_font-family: var(--token-font-family-primary)
  136. paper-font-body1_-_font-family: var(--token-font-family-primary)
  137. paper-font-subhead_-_font-family: var(--token-font-family-primary)
  138. paper-font-headline_-_font-family: var(--token-font-family-primary)
  139. paper-font-caption_-_font-family: var(--token-font-family-primary)
  140. paper-font-title_-_font-family: var(--token-font-family-primary)
  141. ha-card-header-font-family: var(--token-font-family-primary)
  142. mdc-typography-font-family: var(--token-font-family-primary)
  143. mdc-typography-button-font-family: var(--token-font-family-primary)
  144. mdc-typography-body1-font-family: var(--token-font-family-primary)
  145. mdc-typography-button-font-weight: var(--token-weight-font-title)
  146. title-font-weight: var(--token-weight-font-title)
  147. title-font-size: var(--token-size-font-title)
  148. ha-heading-card-title-font-size: var(--token-size-font-title-card)
  149. ha-heading-card-title-font-weight: var(--token-weight-font-title-card)
  150. ##################################################
  151. # Text
  152. primary-text-color: var(--token-color-text-primary)
  153. secondary-text-color: var(--token-color-text-secondary)
  154. text-primary-color: var(--token-color-text-primary)
  155. text-light-primary-color: var(--token-color-text-primary)
  156. disabled-text-color: var(--token-color-text-disabled)
  157. app-header-edit-text-color: var(--token-color-text-primary)
  158. ##################################################
  159. # Main interface colors
  160. primary-color: var(--token-color-primary)
  161. dark-primary-color: var(--primary-color)
  162. light-primary-color: var(--token-color-primary-light)
  163. accent-color: var(--token-color-accent)
  164. divider-color: var(--token-color-background-divider)
  165. scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)
  166. disabled-color: var(--token-color-disabled)
  167. ##################################################
  168. # Feedback colors
  169. info-color: var(--token-color-feedback-info)
  170. success-color: var(--token-color-feedback-success)
  171. warning-color: var(--token-color-feedback-warning)
  172. error-color: var(--token-color-feedback-error)
  173. ##################################################
  174. # Background
  175. lovelace-background: var(--token-color-background-base)
  176. primary-background-color: var(--token-color-background-base)
  177. secondary-background-color: var(--token-color-background-secondary)
  178. clear-background-color: var(--token-color-background-input-base)
  179. ##################################################
  180. # Navbar
  181. app-header-background-color: var(--primary-background-color)
  182. app-header-text-color: var(--token-color-icon-primary)
  183. app-header-edit-background-color: var(--token-color-background-card)
  184. ##################################################
  185. # Sidebar
  186. sidebar-icon-color: var(--token-color-icon-sidebar)
  187. sidebar-text-color: var(--sidebar-icon-color)
  188. sidebar-background-color: var(--token-color-background-sidebar)
  189. sidebar-selected-icon-color: var(--token-color-icon-sidebar-selected)
  190. sidebar-selected-text-color: var(--token-color-text-sidebar-selected)
  191. ##################################################
  192. # Cards
  193. border-radius: var(--token-size-radius-card)
  194. card-background-color: var(--token-color-background-card)
  195. ha-card-background: var(--token-color-background-card)
  196. ha-card-border-radius: var(--token-size-radius-card)
  197. ha-card-border-color: var(--token-color-border-card)
  198. ha-card-border-width: var(--token-size-width-border-card)
  199. ha-card-border-style: none
  200. ha-card-border: none
  201. ha-card-box-shadow: var(--token-shadow-card-medium)
  202. ##################################################
  203. # Sections
  204. ha-view-sections-column-gap: var(--token-size-spacing-medium)
  205. ha-view-sections-column-min-width: var(--token-size-section-min-width)
  206. ##################################################
  207. # States
  208. state-icon-color: var(--token-color-icon-primary)
  209. state-on-color: var(--token-color-feedback-success)
  210. state-off-color: var(--token-color-feedback-error)
  211. ##################################################
  212. # Label-badge
  213. label-badge-text-color: var(--token-color-text-primary)
  214. label-badge-red: var(--token-color-background-label-badge-red)
  215. label-badge-blue: var(--token-color-background-label-badge-blue)
  216. label-badge-green: var(--token-color-background-label-badge-green)
  217. label-badge-yellow: var(--token-color-background-label-badge-yellow)
  218. label-badge-grey: var(--token-color-background-label-badge-grey)
  219. ##################################################
  220. # Chip
  221. ha-chip-text-color: var(--token-color-text-chip)
  222. ##################################################
  223. # Dialog
  224. mdc-dialog-scrim-color: var(--token-color-background-popup-scrim)
  225. ##################################################
  226. # Slider
  227. paper-slider-knob-color: var(--token-color-primary)
  228. paper-slider-knob-start-color: var(--paper-slider-knob-color)
  229. paper-slider-pin-color: var(--paper-slider-knob-color)
  230. paper-slider-active-color: var(--paper-slider-knob-color)
  231. paper-slider-secondary-color: var(--light-primary-color)
  232. ##################################################
  233. # Switch
  234. switch-checked-button-color: var(--primary-color)
  235. switch-checked-track-color: var(--switch-checked-button-color)
  236. switch-unchecked-button-color: var(--token-color-switch-button-unchecked)
  237. switch-unchecked-track-color: var(--token-color-switch-track-unchecked)
  238. ##################################################
  239. # Toggles
  240. paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  241. paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  242. paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  243. paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  244. mdc-checkbox-unchecked-color: var(--token-color-icon-secondary)
  245. mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color)
  246. ##################################################
  247. # List items
  248. mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover)
  249. ##################################################
  250. # Text Fields an Dropdown
  251. input-background-color: var(--token-color-background-input-base)
  252. input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
  253. input-fill-color: var(--input-background-color)
  254. input-ink-color: var(--token-color-text-primary)
  255. input-label-ink-color: var(--token-color-text-primary)
  256. input-disabled-fill-color: var(--input-background-token-color-disabled)
  257. input-disabled-ink-color: var(--disabled-text-color)
  258. input-disabled-label-ink-color: var(--disabled-text-color)
  259. input-idle-line-color: var(--background-color)
  260. input-dropdown-icon-color: var(--secondary-text-color)
  261. input-hover-line-color: var(--primary-color)
  262. mdc-select-idle-line-color: var(--color-background-base)
  263. mdc-text-field-idle-line-color: var(--mdc-select-idle-line-color)
  264. ##################################################
  265. # Editor
  266. code-editor-background-color: var(--token-color-background-base)
  267. codemirror-meta: var(--token-color-text-primary)
  268. codemirror-property: var(--accent-color)
  269. codemirror-atom: var(--codemirror-property)
  270. codemirror-string: var(--token-color-codemirror-string)
  271. codemirror-keyword: var(--token-color-codemirror-keyword)
  272. codemirror-number: var(--token-color-codemirror-number)
  273. ##################################################
  274. # RGB colors
  275. rgb-primary-color: var(--token-rgb-primary)
  276. rgb-accent-color: var(--token-rgb-primary)
  277. rgb-white-color: var(--token-rgb-white)
  278. rgb-purple-color: var(--token-rgb-purple)
  279. rgb-pink-color: var(--token-rgb-pink)
  280. rgb-red-color: var(--token-rgb-red)
  281. rgb-deep-purple-color: var(--token-rgb-deep-purple)
  282. rgb-indigo-color: var(--token-rgb-indigo)
  283. rgb-blue-color: var(--token-rgb-blue)
  284. rgb-light-blue-color: var(--token-rgb-light-blue)
  285. rgb-cyan-color: var(--token-rgb-cyan)
  286. rgb-teal-color: var(--token-rgb-teal)
  287. rgb-green-color: var(--token-rgb-green)
  288. rgb-light-green-color: var(--token-rgb-light-green)
  289. rgb-lime-color: var(--token-rgb-lime)
  290. rgb-yellow-color: var(--token-rgb-yellow)
  291. rgb-amber-color: var(--token-rgb-amber)
  292. rgb-orange-color: var(--token-rgb-orange)
  293. rgb-deep-orange-color: var(--token-rgb-deep-orange)
  294. rgb-brown-color: var(--token-rgb-brown)
  295. rgb-grey-color: var(--token-rgb-grey)
  296. rgb-blue-grey-color: var(--token-rgb-blue-grey)
  297. rgb-black-color: var(--token-rgb-black)
  298. rgb-disabled-color: var(--token-rgb-disabled)
  299. rgb-state-inactive-color: var(--token-rgb-state-inactive)
  300. ##################################################
  301. # Extentions
  302. ##################################################
  303.  
  304. ##################################################
  305. # HACS
  306. hacs-new-color: rgb(27, 153, 123)
  307. hacs-error-color: rgb(182, 46, 95)
  308. ##################################################
  309. # Mini graph card
  310. mcg-title-font-weight: 400
  311. ##################################################
  312. # Mushroom
  313. mush-title-font-weight: var(--title-font-weight)
  314. mush-title-font-size: var(--title-font-size)
  315. mush-rgb-white: var(--rgb-white-color)
  316. mush-rgb-purple: var(--rgb-purple-color)
  317. mush-rgb-pink: var(--rgb-pink-color)
  318. mush-rgb-red: var(--rgb-red-color)
  319. mush-rgb-deep-purple: var(--rgb-deep-purple-color)
  320. mush-rgb-indigo: var(--rgb-indigo-color)
  321. mush-rgb-blue: var(--rgb-blue-color)
  322. mush-rgb-light-blue: var(--rgb-light-blue-color)
  323. mush-rgb-cyan: var(--rgb-cyan-color)
  324. mush-rgb-teal: var(--rgb-teal-color)
  325. mush-rgb-green: var(--rgb-green-color)
  326. mush-rgb-light-green: var(--rgb-light-green-color)
  327. mush-rgb-lime: var(--rgb-lime-color)
  328. mush-rgb-yellow: var(--rgb-yellow-color)
  329. mush-rgb-amber: var(--rgb-amber-color)
  330. mush-rgb-orange: var(--rgb-orange-color)
  331. mush-rgb-deep-orange: var(--rgb-deep-orange-color)
  332. mush-rgb-brown: var(--rgb-brown-color)
  333. mush-rgb-grey: var(--rgb-grey-color)
  334. mush-rgb-blue-grey: var(--rgb-blue-grey-color)
  335. mush-rgb-black: var(--rgb-black-color)
  336. mush-rgb-disabled: var(--rgb-disabled-color)
  337.  
  338. ##################################################
  339. # Custom
  340. ##################################################
  341. app-header-selection-bar-color: rgb(var(--token-rgb-primary))
  342.  
  343. dark:
  344. # Graphite is a contemporary theme that offers both a calm dark color scheme and a
  345. # clean light theme, featuring native device fonts and a cohesive design
  346. # language. Carefully crafted to be visually appealing and easy on the eyes,
  347. # Graphite ensures a consistent user experience throughout the entire Home
  348. # Assistant interface, including the administration panel and code editors.
  349. # https://github.com/TilmanGriesel/graphite
  350.  
  351. #------------------------------------------------------
  352. # This file was generated at 2025-01-05 15:13:54
  353. #------------------------------------------------------
  354.  
  355.  
  356. ##################################################
  357. # Dark theme color tokens
  358. ##################################################
  359.  
  360. token-rgb-primary: 224, 138, 0
  361. token-rgb-black: 0, 0, 0
  362. token-rgb-white: 240, 243, 255
  363. token-rgb-purple: 189, 157, 255
  364. token-rgb-pink: 255, 98, 192
  365. token-rgb-red: 255, 97, 116
  366. token-rgb-deep-purple: 166, 77, 255
  367. token-rgb-indigo: 84, 132, 255
  368. token-rgb-blue: 33, 150, 243
  369. token-rgb-light-blue: 3, 169, 244
  370. token-rgb-cyan: 0, 188, 212
  371. token-rgb-teal: 107, 255, 237
  372. token-rgb-green: 141, 253, 166
  373. token-rgb-light-green: 156, 255, 166
  374. token-rgb-lime: 205, 220, 57
  375. token-rgb-yellow: 255, 235, 59
  376. token-rgb-amber: 255, 211, 99
  377. token-rgb-orange: 224, 138, 0
  378. token-rgb-deep-orange: 255, 87, 34
  379. token-rgb-brown: 121, 85, 72
  380. token-rgb-grey: 158, 158, 158
  381. token-rgb-blue-grey: 96, 125, 139
  382. token-rgb-disabled: 61, 65, 85
  383. token-rgb-state-inactive: 123, 126, 139
  384. token-color-primary: rgb(var(--token-rgb-primary))
  385. token-color-primary-light: rgb(105 124 144)
  386. token-color-accent: var(--token-color-primary)
  387. token-color-disabled: rgba(255, 255, 255, 0.2)
  388. token-color-feedback-info: rgb(39, 209, 246)
  389. token-color-feedback-warning: rgb(255, 219, 117)
  390. token-color-feedback-error: rgb(234, 114, 135)
  391. token-color-feedback-success: rgb(118, 214, 152)
  392. token-color-icon-primary: rgb(228, 228, 231)
  393. token-color-icon-secondary: rgb(138, 140, 153)
  394. token-color-icon-sidebar: rgb(147, 149, 159)
  395. token-color-icon-sidebar-selected: rgb(174, 176, 183)
  396. token-color-text-primary: rgb(228, 228, 231)
  397. token-color-text-secondary: rgb(138, 140, 153)
  398. token-color-text-disabled: rgba(255, 255, 255, 0.5)
  399. token-color-text-sidebar-selected: rgb(214, 215, 219)
  400. token-color-text-sidebar: var(--token-color-text-secondary)
  401. token-color-text-label-badge: rgb(198, 203, 210)
  402. token-color-text-chip: var(--token-color-white)
  403. token-color-background-base: rgb(22, 24, 29)
  404. token-color-background-secondary: rgb(28, 29, 33)
  405. token-color-background-sidebar: var(--token-color-background-base)
  406. token-color-background-input-base: rgb(46, 48, 56)
  407. token-color-background-input-disabled: rgba(37, 37, 40, 0.5)
  408. token-color-background-label-badge: rgb(54, 55, 67)
  409. token-color-background-card: rgb(37, 38, 45)
  410. token-color-background-skrim: rgba(0, 0, 3, 0.9)
  411. token-color-background-divider: var(--token-color-background-sidebar)
  412. token-color-background-scrollbar-thumb: rgb(46, 48, 56)
  413. token-color-background-label-badge-red: var(--token-color-feedback-error)
  414. token-color-background-label-badge-green: rgb(78, 183, 128)
  415. token-color-background-label-badge-blue: var(--token-color-feedback-info)
  416. token-color-background-label-badge-yellow: var(--token-color-feedback-warning)
  417. token-color-background-label-badge-grey: rgb(83, 90, 103)
  418. token-color-background-popup-scrim: rgba(4, 5, 7, 0.9)
  419. token-color-border-card: rgba(0, 0, 0, 0)
  420. token-color-switch-button-unchecked: rgba(255, 255, 255, 0.7)
  421. token-color-switch-track-unchecked: rgba(125, 128, 132, 0.4)
  422. token-color-codemirror-string: rgb(119, 196, 229)
  423. token-color-codemirror-keyword: rgb(140, 169, 255)
  424. token-color-codemirror-number: rgb(255, 91, 29)
  425. token-shadow-card-medium: 0 3px 13px 0 rgba(0, 0, 0, 0.07)
  426.  
  427. ##################################################
  428. # Size tokens
  429. ##################################################
  430.  
  431. ##################################################
  432. ## Radius
  433. token-size-radius-small: 6px
  434. token-size-radius-medium: 8px
  435. token-size-radius-large: 12px
  436. token-size-radius-card: var(--token-size-radius-large)
  437. ##################################################
  438. ## Border
  439. token-size-width-border-card: 0
  440. ##################################################
  441. ## Height
  442. token-size-height-slider: 4px
  443. token-size-height-navbar: 56px
  444. ##################################################
  445. ## Font
  446. token-size-font-medium: 16px
  447. token-size-font-large: 28px
  448. token-size-font-title: var(--token-size-font-large)
  449. token-size-font-title-card: var(--token-size-font-medium)
  450. ##################################################
  451. ## Spacing
  452. token-size-spacing-medium: 24px
  453. token-size-section-min-width: 320px
  454. ##################################################
  455. # Color tokens
  456. token-color-transparent: rgba(0, 0, 0, 0)
  457. token-color-black: rgb(0, 0, 0)
  458. token-color-white: rgb(255, 255, 255)
  459. ##################################################
  460. # Other tokens
  461. ##################################################
  462.  
  463. ##################################################
  464. # Opacity
  465. token-opacity-ripple-hover: 0.14
  466. ##################################################
  467. ## Font
  468. token-weight-font-title-card: 500
  469. ##################################################
  470. # Font family
  471. token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
  472.  
  473. ##################################################
  474. # Definitions
  475. ##################################################
  476.  
  477. ##################################################
  478. # Shapes
  479. mdc-shape-small: var(--token-size-radius-small)
  480. mdc-shape-medium: var(--token-size-radius-medium)
  481. mdc-shape-large: var(--token-size-radius-large)
  482. ##################################################
  483. # Sizes
  484. header-height: var(--token-size-height-navbar)
  485. paper-slider-height: var(--token-size-height-slider)
  486. ##################################################
  487. # Typography
  488. primary-font-family: var(--token-font-family-primary)
  489. paper-font-common-base_-_font-family: var(--token-font-family-primary)
  490. paper-font-common-code_-_font-family: var(--token-font-family-primary)
  491. paper-font-body1_-_font-family: var(--token-font-family-primary)
  492. paper-font-subhead_-_font-family: var(--token-font-family-primary)
  493. paper-font-headline_-_font-family: var(--token-font-family-primary)
  494. paper-font-caption_-_font-family: var(--token-font-family-primary)
  495. paper-font-title_-_font-family: var(--token-font-family-primary)
  496. ha-card-header-font-family: var(--token-font-family-primary)
  497. mdc-typography-font-family: var(--token-font-family-primary)
  498. mdc-typography-button-font-family: var(--token-font-family-primary)
  499. mdc-typography-body1-font-family: var(--token-font-family-primary)
  500. mdc-typography-button-font-weight: var(--token-weight-font-title)
  501. title-font-weight: var(--token-weight-font-title)
  502. title-font-size: var(--token-size-font-title)
  503. ha-heading-card-title-font-size: var(--token-size-font-title-card)
  504. ha-heading-card-title-font-weight: var(--token-weight-font-title-card)
  505. ##################################################
  506. # Text
  507. primary-text-color: var(--token-color-text-primary)
  508. secondary-text-color: var(--token-color-text-secondary)
  509. text-primary-color: var(--token-color-text-primary)
  510. text-light-primary-color: var(--token-color-text-primary)
  511. disabled-text-color: var(--token-color-text-disabled)
  512. app-header-edit-text-color: var(--token-color-text-primary)
  513. ##################################################
  514. # Main interface colors
  515. primary-color: var(--token-color-primary)
  516. dark-primary-color: var(--primary-color)
  517. light-primary-color: var(--token-color-primary-light)
  518. accent-color: var(--token-color-accent)
  519. divider-color: var(--token-color-background-divider)
  520. scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb)
  521. disabled-color: var(--token-color-disabled)
  522. ##################################################
  523. # Feedback colors
  524. info-color: var(--token-color-feedback-info)
  525. success-color: var(--token-color-feedback-success)
  526. warning-color: var(--token-color-feedback-warning)
  527. error-color: var(--token-color-feedback-error)
  528. ##################################################
  529. # Background
  530. lovelace-background: var(--token-color-background-base)
  531. primary-background-color: var(--token-color-background-base)
  532. secondary-background-color: var(--token-color-background-secondary)
  533. clear-background-color: var(--token-color-background-input-base)
  534. ##################################################
  535. # Navbar
  536. app-header-background-color: var(--primary-background-color)
  537. app-header-text-color: var(--token-color-icon-primary)
  538. app-header-edit-background-color: var(--token-color-background-card)
  539. ##################################################
  540. # Sidebar
  541. sidebar-icon-color: var(--token-color-icon-sidebar)
  542. sidebar-text-color: var(--sidebar-icon-color)
  543. sidebar-background-color: var(--token-color-background-sidebar)
  544. sidebar-selected-icon-color: var(--token-color-icon-sidebar-selected)
  545. sidebar-selected-text-color: var(--token-color-text-sidebar-selected)
  546. ##################################################
  547. # Cards
  548. border-radius: var(--token-size-radius-card)
  549. card-background-color: var(--token-color-background-card)
  550. ha-card-background: var(--token-color-background-card)
  551. ha-card-border-radius: var(--token-size-radius-card)
  552. ha-card-border-color: var(--token-color-border-card)
  553. ha-card-border-width: var(--token-size-width-border-card)
  554. ha-card-border-style: none
  555. ha-card-border: none
  556. ha-card-box-shadow: var(--token-shadow-card-medium)
  557. ##################################################
  558. # Sections
  559. ha-view-sections-column-gap: var(--token-size-spacing-medium)
  560. ha-view-sections-column-min-width: var(--token-size-section-min-width)
  561. ##################################################
  562. # States
  563. state-icon-color: var(--token-color-icon-primary)
  564. state-on-color: var(--token-color-feedback-success)
  565. state-off-color: var(--token-color-feedback-error)
  566. ##################################################
  567. # Label-badge
  568. label-badge-text-color: var(--token-color-text-primary)
  569. label-badge-red: var(--token-color-background-label-badge-red)
  570. label-badge-blue: var(--token-color-background-label-badge-blue)
  571. label-badge-green: var(--token-color-background-label-badge-green)
  572. label-badge-yellow: var(--token-color-background-label-badge-yellow)
  573. label-badge-grey: var(--token-color-background-label-badge-grey)
  574. ##################################################
  575. # Chip
  576. ha-chip-text-color: var(--token-color-text-chip)
  577. ##################################################
  578. # Dialog
  579. mdc-dialog-scrim-color: var(--token-color-background-popup-scrim)
  580. ##################################################
  581. # Slider
  582. paper-slider-knob-color: var(--token-color-primary)
  583. paper-slider-knob-start-color: var(--paper-slider-knob-color)
  584. paper-slider-pin-color: var(--paper-slider-knob-color)
  585. paper-slider-active-color: var(--paper-slider-knob-color)
  586. paper-slider-secondary-color: var(--light-primary-color)
  587. ##################################################
  588. # Switch
  589. switch-checked-button-color: var(--primary-color)
  590. switch-checked-track-color: var(--switch-checked-button-color)
  591. switch-unchecked-button-color: var(--token-color-switch-button-unchecked)
  592. switch-unchecked-track-color: var(--token-color-switch-track-unchecked)
  593. ##################################################
  594. # Toggles
  595. paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  596. paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  597. paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  598. paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  599. mdc-checkbox-unchecked-color: var(--token-color-icon-secondary)
  600. mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color)
  601. ##################################################
  602. # List items
  603. mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover)
  604. ##################################################
  605. # Text Fields an Dropdown
  606. input-background-color: var(--token-color-background-input-base)
  607. input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
  608. input-fill-color: var(--input-background-color)
  609. input-ink-color: var(--token-color-text-primary)
  610. input-label-ink-color: var(--token-color-text-primary)
  611. input-disabled-fill-color: var(--input-background-token-color-disabled)
  612. input-disabled-ink-color: var(--disabled-text-color)
  613. input-disabled-label-ink-color: var(--disabled-text-color)
  614. input-idle-line-color: var(--background-color)
  615. input-dropdown-icon-color: var(--secondary-text-color)
  616. input-hover-line-color: var(--primary-color)
  617. mdc-select-idle-line-color: var(--color-background-base)
  618. mdc-text-field-idle-line-color: var(--mdc-select-idle-line-color)
  619. ##################################################
  620. # Editor
  621. code-editor-background-color: var(--token-color-background-base)
  622. codemirror-meta: var(--token-color-text-primary)
  623. codemirror-property: var(--accent-color)
  624. codemirror-atom: var(--codemirror-property)
  625. codemirror-string: var(--token-color-codemirror-string)
  626. codemirror-keyword: var(--token-color-codemirror-keyword)
  627. codemirror-number: var(--token-color-codemirror-number)
  628. ##################################################
  629. # RGB colors
  630. rgb-primary-color: var(--token-rgb-primary)
  631. rgb-accent-color: var(--token-rgb-primary)
  632. rgb-white-color: var(--token-rgb-white)
  633. rgb-purple-color: var(--token-rgb-purple)
  634. rgb-pink-color: var(--token-rgb-pink)
  635. rgb-red-color: var(--token-rgb-red)
  636. rgb-deep-purple-color: var(--token-rgb-deep-purple)
  637. rgb-indigo-color: var(--token-rgb-indigo)
  638. rgb-blue-color: var(--token-rgb-blue)
  639. rgb-light-blue-color: var(--token-rgb-light-blue)
  640. rgb-cyan-color: var(--token-rgb-cyan)
  641. rgb-teal-color: var(--token-rgb-teal)
  642. rgb-green-color: var(--token-rgb-green)
  643. rgb-light-green-color: var(--token-rgb-light-green)
  644. rgb-lime-color: var(--token-rgb-lime)
  645. rgb-yellow-color: var(--token-rgb-yellow)
  646. rgb-amber-color: var(--token-rgb-amber)
  647. rgb-orange-color: var(--token-rgb-orange)
  648. rgb-deep-orange-color: var(--token-rgb-deep-orange)
  649. rgb-brown-color: var(--token-rgb-brown)
  650. rgb-grey-color: var(--token-rgb-grey)
  651. rgb-blue-grey-color: var(--token-rgb-blue-grey)
  652. rgb-black-color: var(--token-rgb-black)
  653. rgb-disabled-color: var(--token-rgb-disabled)
  654. rgb-state-inactive-color: var(--token-rgb-state-inactive)
  655. ##################################################
  656. # Extentions
  657. ##################################################
  658.  
  659. ##################################################
  660. # HACS
  661. hacs-new-color: rgb(27, 153, 123)
  662. hacs-error-color: rgb(182, 46, 95)
  663. ##################################################
  664. # Mini graph card
  665. mcg-title-font-weight: 400
  666. ##################################################
  667. # Mushroom
  668. mush-title-font-weight: var(--title-font-weight)
  669. mush-title-font-size: var(--title-font-size)
  670. mush-rgb-white: var(--rgb-white-color)
  671. mush-rgb-purple: var(--rgb-purple-color)
  672. mush-rgb-pink: var(--rgb-pink-color)
  673. mush-rgb-red: var(--rgb-red-color)
  674. mush-rgb-deep-purple: var(--rgb-deep-purple-color)
  675. mush-rgb-indigo: var(--rgb-indigo-color)
  676. mush-rgb-blue: var(--rgb-blue-color)
  677. mush-rgb-light-blue: var(--rgb-light-blue-color)
  678. mush-rgb-cyan: var(--rgb-cyan-color)
  679. mush-rgb-teal: var(--rgb-teal-color)
  680. mush-rgb-green: var(--rgb-green-color)
  681. mush-rgb-light-green: var(--rgb-light-green-color)
  682. mush-rgb-lime: var(--rgb-lime-color)
  683. mush-rgb-yellow: var(--rgb-yellow-color)
  684. mush-rgb-amber: var(--rgb-amber-color)
  685. mush-rgb-orange: var(--rgb-orange-color)
  686. mush-rgb-deep-orange: var(--rgb-deep-orange-color)
  687. mush-rgb-brown: var(--rgb-brown-color)
  688. mush-rgb-grey: var(--rgb-grey-color)
  689. mush-rgb-blue-grey: var(--rgb-blue-grey-color)
  690. mush-rgb-black: var(--rgb-black-color)
  691. mush-rgb-disabled: var(--rgb-disabled-color)
  692.  
  693. ##################################################
  694. # Custom
  695. ##################################################
  696. app-header-selection-bar-color: rgb(var(--token-rgb-primary))
  697.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!