We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Owner
Name Graphite
Post link https://community.home-assistant.io/t/graphite-theme/796390
Funding https://buymeacoffee.com/griesel
Graphite Auto: modes: light: # Graphite is a contemporary theme that offers both a calm dark color scheme and a # clean light theme, featuring native device fonts and a cohesive design # language. Carefully crafted to be visually appealing and easy on the eyes, # Graphite ensures a consistent user experience throughout the entire Home # Assistant interface, including the administration panel and code editors. # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ # This file was generated at 2024-11-30 15:40:06 #------------------------------------------------------ # Color tokens token-rgb-primary: 255, 158, 0 token-rgb-black: 0, 0, 0 token-rgb-white: 240, 243, 255 token-rgb-purple: 129, 45, 250 token-rgb-pink: 204, 0, 136 token-rgb-red: 204, 0, 51 token-rgb-deep-purple: 98, 0, 234 token-rgb-indigo: 48, 63, 159 token-rgb-blue: 33, 150, 243 token-rgb-light-blue: 3, 169, 244 token-rgb-cyan: 0, 188, 212 token-rgb-teal: 0, 150, 136 token-rgb-green: 56, 142, 60 token-rgb-light-green: 139, 195, 74 token-rgb-lime: 205, 220, 57 token-rgb-yellow: 255, 235, 59 token-rgb-amber: 255, 193, 7 token-rgb-orange: var(--token-rgb-primary) token-rgb-deep-orange: 255, 87, 34 token-rgb-brown: 121, 85, 72 token-rgb-grey: 158, 158, 158 token-rgb-blue-grey: 96, 125, 139 token-rgb-disabled: 189, 189, 189 token-rgb-state-inactive: 176, 190, 197 token-color-primary: rgb(var(--token-rgb-primary)) token-color-primary-light: rgb(167 182 199) token-color-accent: var(--token-color-primary) token-color-disabled: rgb(173 176 184) token-color-feedback-info: rgb(39, 209, 246) token-color-feedback-warning: rgb(255, 219, 117) token-color-feedback-error: rgb(234, 114, 135) token-color-feedback-success: rgb(118, 214, 152) token-color-icon-primary: rgba(19, 21, 54, 0.87) token-color-icon-secondary: rgba(19, 21, 54, 0.8) token-color-icon-sidebar: rgba(19, 21, 54, 0.7) token-color-icon-sidebar-selected: var(--token-color-icon-primary) token-color-text-primary: rgba(19, 21, 54, 0.95) token-color-text-secondary: rgba(19, 21, 54, 0.8) token-color-text-disabled: rgba(19, 21, 54, 0.38) token-color-text-sidebar-selected: var(--token-color-text-primary) token-color-text-sidebar: var(--token-color-text-secondary) token-color-text-label-badge: rgba(19, 21, 54, 0.7) token-color-text-chip: var(--token-color-black) token-color-background-base: rgb(225, 226, 229) token-color-background-secondary: rgba(245, 245, 245, 1) token-color-background-sidebar: var(--token-color-background-base) token-color-background-input-base: rgba(255, 255, 255, 1) token-color-background-input-disabled: rgba(245, 245, 245, 1) token-color-background-label-badge: rgba(230, 230, 230, 1) token-color-background-card: rgba(255, 255, 255, 1) token-color-background-skrim: rgba(0, 0, 0, 0.5) token-color-background-divider: rgba(224, 224, 224, 1) token-color-background-scrollbar-thumb: rgba(200, 200, 200, 1) token-color-background-label-badge-red: var(--token-color-feedback-error) token-color-background-label-badge-green: rgba(78, 183, 128, 1) token-color-background-label-badge-blue: var(--token-color-feedback-info) token-color-background-label-badge-yellow: var(--token-color-feedback-warning) token-color-background-label-badge-grey: rgba(83, 90, 103, 1) token-color-background-popup-scrim: rgba(0, 0, 0, 0.5) token-color-border-card: rgba(224, 224, 224, 1) token-color-switch-button-unchecked: rgba(0, 0, 0, 0.5) token-color-switch-track-unchecked: rgba(0, 0, 0, 0.25) token-color-codemirror-string: rgb(0, 77, 153) token-color-codemirror-keyword: rgb(70, 112, 216) token-color-codemirror-number: rgb(204, 85, 0) token-shadow-card-medium: 0 2px 4px 0px rgba(0, 0, 0, 0.06) ################################################################################ # Size tokens ## Radius token-size-radius-small: 9px token-size-radius-medium: 16px token-size-radius-large: 18px token-size-radius-card: var(--token-size-radius-large) ## Border token-size-width-border-card: 0 ## Height token-size-height-slider: 4px token-size-height-navbar: 56px ## Font token-size-font-medium: 18px token-size-font-large: 28px token-size-font-title: var(--token-size-font-large) token-size-font-title-card: var(--token-size-font-medium) ## Spacing token-size-spacing-medium: 16px token-size-section-min-width: 320px ################################################################################ # Color tokens # Color tokens token-color-transparent: rgba(0, 0, 0, 0) token-color-black: rgb(0, 0, 0) token-color-white: rgb(255, 255, 255) ################################################################################ # Other tokens # Opacity tokens token-opacity-ripple-hover: 0.14 # Weight tokens ## Font token-weight-font-title-card: 600 # Font family tokens token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ############################################################################## # Definitions # Shapes mdc-shape-small: var(--token-size-radius-small) mdc-shape-medium: var(--token-size-radius-medium) mdc-shape-large: var(--token-size-radius-large) # Sizes header-height: var(--token-size-height-navbar) paper-slider-height: var(--token-size-height-slider) # Typography primary-font-family: var(--token-font-family-primary) paper-font-common-base_-_font-family: var(--token-font-family-primary) paper-font-common-code_-_font-family: var(--token-font-family-primary) paper-font-body1_-_font-family: var(--token-font-family-primary) paper-font-subhead_-_font-family: var(--token-font-family-primary) paper-font-headline_-_font-family: var(--token-font-family-primary) paper-font-caption_-_font-family: var(--token-font-family-primary) paper-font-title_-_font-family: var(--token-font-family-primary) ha-card-header-font-family: var(--token-font-family-primary) mdc-typography-font-family: var(--token-font-family-primary) mdc-typography-button-font-family: var(--token-font-family-primary) mdc-typography-body1-font-family: var(--token-font-family-primary) mdc-typography-button-font-weight: var(--token-weight-font-title) title-font-weight: var(--token-weight-font-title) title-font-size: var(--token-size-font-title) ha-heading-card-title-font-size: var(--token-size-font-title-card) ha-heading-card-title-font-weight: var(--token-weight-font-title-card) # Text primary-text-color: var(--token-color-text-primary) secondary-text-color: var(--token-color-text-secondary) text-primary-color: var(--token-color-text-primary) text-light-primary-color: var(--token-color-text-primary) disabled-text-color: var(--token-color-text-disabled) app-header-edit-text-color: var(--token-color-text-primary) # Main interface colors primary-color: var(--token-color-primary) dark-primary-color: var(--primary-color) light-primary-color: var(--token-color-primary-light) accent-color: var(--token-color-accent) divider-color: var(--token-color-background-divider) scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb) disabled-color: var(--token-color-disabled) # Feedback colors info-color: var(--token-color-feedback-info) success-color: var(--token-color-feedback-success) warning-color: var(--token-color-feedback-warning) error-color: var(--token-color-feedback-error) # Background lovelace-background: var(--token-color-background-base) primary-background-color: var(--token-color-background-base) secondary-background-color: var(--token-color-background-secondary) clear-background-color: var(--token-color-background-input-base) # Navbar app-header-background-color: var(--primary-background-color) app-header-text-color: var(--token-color-icon-primary) app-header-edit-background-color: var(--token-color-background-card) # Sidebar sidebar-icon-color: var(--token-color-icon-sidebar) sidebar-text-color: var(--sidebar-icon-color) sidebar-background-color: var(--token-color-background-sidebar) sidebar-selected-icon-color: var(--token-color-icon-sidebar-selected) sidebar-selected-text-color: var(--token-color-text-sidebar-selected) # Cards border-radius: var(--token-size-radius-card) card-background-color: var(--token-color-background-card) ha-card-background: var(--token-color-background-card) ha-card-border-radius: var(--token-size-radius-card) ha-card-border-color: var(--token-color-border-card) ha-card-border-width: var(--token-size-width-border-card) ha-card-border-style: none ha-card-border: none ha-card-box-shadow: var(--token-shadow-card-medium) # Sections ha-view-sections-column-gap: var(--token-size-spacing-medium) ha-view-sections-column-min-width: var(--token-size-section-min-width) # States state-icon-color: var(--token-color-icon-primary) state-on-color: var(--token-color-feedback-success) state-off-color: var(--token-color-feedback-error) # Label-badge label-badge-text-color: var(--token-color-text-primary) label-badge-red: var(--token-color-background-label-badge-red) label-badge-blue: var(--token-color-background-label-badge-blue) label-badge-green: var(--token-color-background-label-badge-green) label-badge-yellow: var(--token-color-background-label-badge-yellow) label-badge-grey: var(--token-color-background-label-badge-grey) # Chip ha-chip-text-color: var(--token-color-text-chip) # Dialog mdc-dialog-scrim-color: var(--token-color-background-popup-scrim) # Slider paper-slider-knob-color: var(--token-color-primary) paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-knob-color) paper-slider-active-color: var(--paper-slider-knob-color) paper-slider-secondary-color: var(--light-primary-color) # Switch switch-checked-button-color: var(--primary-color) switch-checked-track-color: var(--switch-checked-button-color) switch-unchecked-button-color: var(--token-color-switch-button-unchecked) switch-unchecked-track-color: var(--token-color-switch-track-unchecked) # Toggles paper-toggle-button-checked-button-color: var(--switch-checked-button-color) paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) mdc-checkbox-unchecked-color: var(--token-color-icon-secondary) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) # List items mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover) # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) input-disabled-fill-color: var(--input-background-token-color-disabled) input-disabled-ink-color: var(--disabled-text-color) input-disabled-label-ink-color: var(--disabled-text-color) input-idle-line-color: var(--background-color) input-dropdown-icon-color: var(--secondary-text-color) input-hover-line-color: var(--primary-color) mdc-select-idle-line-color: var(--color-background-base) mdc-text-field-idle-line-color: var(--mdc-select-idle-line-color) # Editor code-editor-background-color: var(--token-color-background-base) codemirror-meta: var(--token-color-text-primary) codemirror-property: var(--accent-color) codemirror-atom: var(--codemirror-property) codemirror-string: var(--token-color-codemirror-string) codemirror-keyword: var(--token-color-codemirror-keyword) codemirror-number: var(--token-color-codemirror-number) # RGB colors rgb-primary-color: var(--token-rgb-primary) rgb-accent-color: var(--token-rgb-primary) rgb-white-color: var(--token-rgb-white) rgb-purple-color: var(--token-rgb-purple) rgb-pink-color: var(--token-rgb-pink) rgb-red-color: var(--token-rgb-red) rgb-deep-purple-color: var(--token-rgb-deep-purple) rgb-indigo-color: var(--token-rgb-indigo) rgb-blue-color: var(--token-rgb-blue) rgb-light-blue-color: var(--token-rgb-light-blue) rgb-cyan-color: var(--token-rgb-cyan) rgb-teal-color: var(--token-rgb-teal) rgb-green-color: var(--token-rgb-green) rgb-light-green-color: var(--token-rgb-light-green) rgb-lime-color: var(--token-rgb-lime) rgb-yellow-color: var(--token-rgb-yellow) rgb-amber-color: var(--token-rgb-amber) rgb-orange-color: var(--token-rgb-orange) rgb-deep-orange-color: var(--token-rgb-deep-orange) rgb-brown-color: var(--token-rgb-brown) rgb-grey-color: var(--token-rgb-grey) rgb-blue-grey-color: var(--token-rgb-blue-grey) rgb-black-color: var(--token-rgb-black) rgb-disabled-color: var(--token-rgb-disabled) rgb-state-inactive-color: var(--token-rgb-state-inactive) ############################################################################## # Extentions # HACS hacs-new-color: rgb(27, 153, 123) hacs-error-color: rgb(182, 46, 95) # Mini graph card mcg-title-font-weight: 400 # Mushroom mush-title-font-weight: var(--title-font-weight) mush-title-font-size: var(--title-font-size) mush-rgb-white: var(--rgb-white-color) mush-rgb-purple: var(--rgb-purple-color) mush-rgb-pink: var(--rgb-pink-color) mush-rgb-red: var(--rgb-red-color) mush-rgb-deep-purple: var(--rgb-deep-purple-color) mush-rgb-indigo: var(--rgb-indigo-color) mush-rgb-blue: var(--rgb-blue-color) mush-rgb-light-blue: var(--rgb-light-blue-color) mush-rgb-cyan: var(--rgb-cyan-color) mush-rgb-teal: var(--rgb-teal-color) mush-rgb-green: var(--rgb-green-color) mush-rgb-light-green: var(--rgb-light-green-color) mush-rgb-lime: var(--rgb-lime-color) mush-rgb-yellow: var(--rgb-yellow-color) mush-rgb-amber: var(--rgb-amber-color) mush-rgb-orange: var(--rgb-orange-color) mush-rgb-deep-orange: var(--rgb-deep-orange-color) mush-rgb-brown: var(--rgb-brown-color) mush-rgb-grey: var(--rgb-grey-color) mush-rgb-blue-grey: var(--rgb-blue-grey-color) mush-rgb-black: var(--rgb-black-color) mush-rgb-disabled: var(--rgb-disabled-color) dark: # Graphite is a contemporary theme that offers both a calm dark color scheme and a # clean light theme, featuring native device fonts and a cohesive design # language. Carefully crafted to be visually appealing and easy on the eyes, # Graphite ensures a consistent user experience throughout the entire Home # Assistant interface, including the administration panel and code editors. # https://github.com/TilmanGriesel/graphite #------------------------------------------------------ # This file was generated at 2024-11-30 15:40:06 #------------------------------------------------------ # Color tokens token-rgb-primary: 229, 145, 9 token-rgb-black: 0, 0, 0 token-rgb-white: 240, 243, 255 token-rgb-purple: 189, 157, 255 token-rgb-pink: 255, 98, 192 token-rgb-red: 255, 97, 116 token-rgb-deep-purple: 166, 77, 255 token-rgb-indigo: 84, 132, 255 token-rgb-blue: 33, 150, 243 token-rgb-light-blue: 3, 169, 244 token-rgb-cyan: 0, 188, 212 token-rgb-teal: 107, 255, 237 token-rgb-green: 141, 253, 166 token-rgb-light-green: 156, 255, 166 token-rgb-lime: 205, 220, 57 token-rgb-yellow: 255, 235, 59 token-rgb-amber: 255, 211, 99 token-rgb-orange: var(--rgb-primary-color) token-rgb-deep-orange: 255, 87, 34 token-rgb-brown: 121, 85, 72 token-rgb-grey: 158, 158, 158 token-rgb-blue-grey: 96, 125, 139 token-rgb-disabled: 61, 65, 85 token-rgb-state-inactive: 123, 126, 139 token-color-primary: rgb(var(--token-rgb-primary)) token-color-primary-light: rgb(105 124 144) token-color-accent: var(--token-color-primary) token-color-disabled: rgba(255, 255, 255, 0.2) token-color-feedback-info: rgb(39, 209, 246) token-color-feedback-warning: rgb(255, 219, 117) token-color-feedback-error: rgb(234, 114, 135) token-color-feedback-success: rgb(118, 214, 152) token-color-icon-primary: rgba(228, 228, 231, 1) token-color-icon-secondary: rgb(138, 140, 153) token-color-icon-sidebar: rgba(147, 149, 159, 1) token-color-icon-sidebar-selected: rgba(174, 176, 183, 1) token-color-text-primary: rgba(228, 228, 231, 1) token-color-text-secondary: rgb(138, 140, 153) token-color-text-disabled: rgba(255, 255, 255, 0.5) token-color-text-sidebar-selected: rgba(214, 215, 219, 1) token-color-text-sidebar: var(--token-color-text-secondary) token-color-text-label-badge: rgb(198, 203, 210) token-color-text-chip: var(--token-color-white) token-color-background-base: rgba(22, 24, 29, 1) token-color-background-secondary: rgba(28, 29, 33, 1) token-color-background-sidebar: var(--token-color-background-base) token-color-background-input-base: rgba(46, 48, 56, 1) token-color-background-input-disabled: rgba(37, 37, 40, 0.5) token-color-background-label-badge: rgba(54, 55, 67, 1) token-color-background-card: rgba(37, 38, 45, 1) token-color-background-skrim: rgba(0, 0, 3, 0.9) token-color-background-divider: var(--token-color-background-sidebar) token-color-background-scrollbar-thumb: rgba(46, 48, 56, 1) token-color-background-label-badge-red: var(--token-color-feedback-error) token-color-background-label-badge-green: rgba(78, 183, 128, 1) token-color-background-label-badge-blue: var(--token-color-feedback-info) token-color-background-label-badge-yellow: var(--token-color-feedback-warning) token-color-background-label-badge-grey: rgba(83, 90, 103, 1) token-color-background-popup-scrim: rgba(4, 5, 7, 0.9) token-color-border-card: rgba(0, 0, 0, 0) token-color-switch-button-unchecked: rgba(255, 255, 255, 0.7) token-color-switch-track-unchecked: rgba(125, 128, 132, 0.4) token-color-codemirror-string: rgb(119, 196, 229) token-color-codemirror-keyword: rgb(140, 169, 255) token-color-codemirror-number: rgb(255, 91, 29) token-shadow-card-medium: 0 3px 13px 0 rgba(0, 0, 0, 0.07) ################################################################################ # Size tokens ## Radius token-size-radius-small: 9px token-size-radius-medium: 16px token-size-radius-large: 18px token-size-radius-card: var(--token-size-radius-large) ## Border token-size-width-border-card: 0 ## Height token-size-height-slider: 4px token-size-height-navbar: 56px ## Font token-size-font-medium: 18px token-size-font-large: 28px token-size-font-title: var(--token-size-font-large) token-size-font-title-card: var(--token-size-font-medium) ## Spacing token-size-spacing-medium: 16px token-size-section-min-width: 320px ################################################################################ # Color tokens # Color tokens token-color-transparent: rgba(0, 0, 0, 0) token-color-black: rgb(0, 0, 0) token-color-white: rgb(255, 255, 255) ################################################################################ # Other tokens # Opacity tokens token-opacity-ripple-hover: 0.14 # Weight tokens ## Font token-weight-font-title-card: 600 # Font family tokens token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ############################################################################## # Definitions # Shapes mdc-shape-small: var(--token-size-radius-small) mdc-shape-medium: var(--token-size-radius-medium) mdc-shape-large: var(--token-size-radius-large) # Sizes header-height: var(--token-size-height-navbar) paper-slider-height: var(--token-size-height-slider) # Typography primary-font-family: var(--token-font-family-primary) paper-font-common-base_-_font-family: var(--token-font-family-primary) paper-font-common-code_-_font-family: var(--token-font-family-primary) paper-font-body1_-_font-family: var(--token-font-family-primary) paper-font-subhead_-_font-family: var(--token-font-family-primary) paper-font-headline_-_font-family: var(--token-font-family-primary) paper-font-caption_-_font-family: var(--token-font-family-primary) paper-font-title_-_font-family: var(--token-font-family-primary) ha-card-header-font-family: var(--token-font-family-primary) mdc-typography-font-family: var(--token-font-family-primary) mdc-typography-button-font-family: var(--token-font-family-primary) mdc-typography-body1-font-family: var(--token-font-family-primary) mdc-typography-button-font-weight: var(--token-weight-font-title) title-font-weight: var(--token-weight-font-title) title-font-size: var(--token-size-font-title) ha-heading-card-title-font-size: var(--token-size-font-title-card) ha-heading-card-title-font-weight: var(--token-weight-font-title-card) # Text primary-text-color: var(--token-color-text-primary) secondary-text-color: var(--token-color-text-secondary) text-primary-color: var(--token-color-text-primary) text-light-primary-color: var(--token-color-text-primary) disabled-text-color: var(--token-color-text-disabled) app-header-edit-text-color: var(--token-color-text-primary) # Main interface colors primary-color: var(--token-color-primary) dark-primary-color: var(--primary-color) light-primary-color: var(--token-color-primary-light) accent-color: var(--token-color-accent) divider-color: var(--token-color-background-divider) scrollbar-thumb-color: var(--token-color-background-scrollbar-thumb) disabled-color: var(--token-color-disabled) # Feedback colors info-color: var(--token-color-feedback-info) success-color: var(--token-color-feedback-success) warning-color: var(--token-color-feedback-warning) error-color: var(--token-color-feedback-error) # Background lovelace-background: var(--token-color-background-base) primary-background-color: var(--token-color-background-base) secondary-background-color: var(--token-color-background-secondary) clear-background-color: var(--token-color-background-input-base) # Navbar app-header-background-color: var(--primary-background-color) app-header-text-color: var(--token-color-icon-primary) app-header-edit-background-color: var(--token-color-background-card) # Sidebar sidebar-icon-color: var(--token-color-icon-sidebar) sidebar-text-color: var(--sidebar-icon-color) sidebar-background-color: var(--token-color-background-sidebar) sidebar-selected-icon-color: var(--token-color-icon-sidebar-selected) sidebar-selected-text-color: var(--token-color-text-sidebar-selected) # Cards border-radius: var(--token-size-radius-card) card-background-color: var(--token-color-background-card) ha-card-background: var(--token-color-background-card) ha-card-border-radius: var(--token-size-radius-card) ha-card-border-color: var(--token-color-border-card) ha-card-border-width: var(--token-size-width-border-card) ha-card-border-style: none ha-card-border: none ha-card-box-shadow: var(--token-shadow-card-medium) # Sections ha-view-sections-column-gap: var(--token-size-spacing-medium) ha-view-sections-column-min-width: var(--token-size-section-min-width) # States state-icon-color: var(--token-color-icon-primary) state-on-color: var(--token-color-feedback-success) state-off-color: var(--token-color-feedback-error) # Label-badge label-badge-text-color: var(--token-color-text-primary) label-badge-red: var(--token-color-background-label-badge-red) label-badge-blue: var(--token-color-background-label-badge-blue) label-badge-green: var(--token-color-background-label-badge-green) label-badge-yellow: var(--token-color-background-label-badge-yellow) label-badge-grey: var(--token-color-background-label-badge-grey) # Chip ha-chip-text-color: var(--token-color-text-chip) # Dialog mdc-dialog-scrim-color: var(--token-color-background-popup-scrim) # Slider paper-slider-knob-color: var(--token-color-primary) paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-knob-color) paper-slider-active-color: var(--paper-slider-knob-color) paper-slider-secondary-color: var(--light-primary-color) # Switch switch-checked-button-color: var(--primary-color) switch-checked-track-color: var(--switch-checked-button-color) switch-unchecked-button-color: var(--token-color-switch-button-unchecked) switch-unchecked-track-color: var(--token-color-switch-track-unchecked) # Toggles paper-toggle-button-checked-button-color: var(--switch-checked-button-color) paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) mdc-checkbox-unchecked-color: var(--token-color-icon-secondary) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) # List items mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover) # Text Fields an Dropdown input-background-color: var(--token-color-background-input-base) input-background-token-color-disabled: rgba(var(--input-background-color), 0.5) input-fill-color: var(--input-background-color) input-ink-color: var(--token-color-text-primary) input-label-ink-color: var(--token-color-text-primary) input-disabled-fill-color: var(--input-background-token-color-disabled) input-disabled-ink-color: var(--disabled-text-color) input-disabled-label-ink-color: var(--disabled-text-color) input-idle-line-color: var(--background-color) input-dropdown-icon-color: var(--secondary-text-color) input-hover-line-color: var(--primary-color) mdc-select-idle-line-color: var(--color-background-base) mdc-text-field-idle-line-color: var(--mdc-select-idle-line-color) # Editor code-editor-background-color: var(--token-color-background-base) codemirror-meta: var(--token-color-text-primary) codemirror-property: var(--accent-color) codemirror-atom: var(--codemirror-property) codemirror-string: var(--token-color-codemirror-string) codemirror-keyword: var(--token-color-codemirror-keyword) codemirror-number: var(--token-color-codemirror-number) # RGB colors rgb-primary-color: var(--token-rgb-primary) rgb-accent-color: var(--token-rgb-primary) rgb-white-color: var(--token-rgb-white) rgb-purple-color: var(--token-rgb-purple) rgb-pink-color: var(--token-rgb-pink) rgb-red-color: var(--token-rgb-red) rgb-deep-purple-color: var(--token-rgb-deep-purple) rgb-indigo-color: var(--token-rgb-indigo) rgb-blue-color: var(--token-rgb-blue) rgb-light-blue-color: var(--token-rgb-light-blue) rgb-cyan-color: var(--token-rgb-cyan) rgb-teal-color: var(--token-rgb-teal) rgb-green-color: var(--token-rgb-green) rgb-light-green-color: var(--token-rgb-light-green) rgb-lime-color: var(--token-rgb-lime) rgb-yellow-color: var(--token-rgb-yellow) rgb-amber-color: var(--token-rgb-amber) rgb-orange-color: var(--token-rgb-orange) rgb-deep-orange-color: var(--token-rgb-deep-orange) rgb-brown-color: var(--token-rgb-brown) rgb-grey-color: var(--token-rgb-grey) rgb-blue-grey-color: var(--token-rgb-blue-grey) rgb-black-color: var(--token-rgb-black) rgb-disabled-color: var(--token-rgb-disabled) rgb-state-inactive-color: var(--token-rgb-state-inactive) ############################################################################## # Extentions # HACS hacs-new-color: rgb(27, 153, 123) hacs-error-color: rgb(182, 46, 95) # Mini graph card mcg-title-font-weight: 400 # Mushroom mush-title-font-weight: var(--title-font-weight) mush-title-font-size: var(--title-font-size) mush-rgb-white: var(--rgb-white-color) mush-rgb-purple: var(--rgb-purple-color) mush-rgb-pink: var(--rgb-pink-color) mush-rgb-red: var(--rgb-red-color) mush-rgb-deep-purple: var(--rgb-deep-purple-color) mush-rgb-indigo: var(--rgb-indigo-color) mush-rgb-blue: var(--rgb-blue-color) mush-rgb-light-blue: var(--rgb-light-blue-color) mush-rgb-cyan: var(--rgb-cyan-color) mush-rgb-teal: var(--rgb-teal-color) mush-rgb-green: var(--rgb-green-color) mush-rgb-light-green: var(--rgb-light-green-color) mush-rgb-lime: var(--rgb-lime-color) mush-rgb-yellow: var(--rgb-yellow-color) mush-rgb-amber: var(--rgb-amber-color) mush-rgb-orange: var(--rgb-orange-color) mush-rgb-deep-orange: var(--rgb-deep-orange-color) mush-rgb-brown: var(--rgb-brown-color) mush-rgb-grey: var(--rgb-grey-color) mush-rgb-blue-grey: var(--rgb-blue-grey-color) mush-rgb-black: var(--rgb-black-color) mush-rgb-disabled: var(--rgb-disabled-color)
The text was updated successfully, but these errors were encountered:
No branches or pull requests
General information
Owner
Name
Graphite
Post link
https://community.home-assistant.io/t/graphite-theme/796390
Funding
https://buymeacoffee.com/griesel
Screenshot(s)
Source
The text was updated successfully, but these errors were encountered: