Solarized Light theme

snwtoy · February 9, 2018, 9:04am

Inspired by the dark solarized theme by forsquirel in the other thread.

update: Fixed the tables in dev tools

  solarized-light:
    # Main colors
    primary-color: '#586e75'                                                        # Header
    accent-color: '#fdf6e3'                                                         # Accent color
    dark-primary-color: '#586e75'                                                   # Hyperlinks                                         
    light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
                                                                                
    # Text colors                                                                  
    primary-text-color: '#657b83'                                                   # Primary text colour, here is referencing dark-primary-color
    text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
    secondary-text-color: '#93a1a1'                                                 # For secondary titles in more info boxes etc.
    disabled-text-color: '#7F848E'                                                  # Disabled text colour
    label-badge-border-color: 'green'                                               # Label badge border, just a reference value   

    # Background colors                                                            
    primary-background-color: '#fdf6e3'                                             # Settings background
    secondary-background-color: '#eee8d5'                                           # Main card UI background  
    divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider 
      

    # Table rows                                                                   
    table-row-background-color: '#fdf6e3'                                           # Table row
    table-row-alternative-background-color: '#eee8d5'                               # Table row alternative
                                                                                
    # Nav Menu                                                                   
    paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
    paper-listbox-background-color: 'var(--accent-color)'                           # Navigation menu background
    paper-grey-50: 'var(--primary-text-color)'                                   
    paper-grey-200: 'var(--accent-color)'                                           # Navigation menu selection
                                                                                
    # Paper card                                                               
    paper-card-header-color: 'var(--dark-primary-color)'                            # Card header text colour
    paper-card-background-color: 'var(--accent-color)'                              # Card background colour
    paper-dialog-background-color: '#fdf6e3'                                        # Card dialog background colour
    paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
    paper-item-icon-active-color: '#b58900'                                         # Icon color active
    paper-item-icon_-_color: 'green'           
    paper-item-selected_-_color: 'var(--accent-color)'
    paper-item-selected_-_background-color: '#cb4b16'                               # Popup item select                      
    paper-tabs-selection-bar-color: 'green'

    # Labels 
    label-badge-red: '#586e75'                                                      # References the brand colour label badge border
    label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
    label-badge-background-color: 'var(--accent-color)'                             # Same, but can also be set to transparent here

    # Switches
    paper-toggle-button-checked-button-color: '#268bd2'
    paper-toggle-button-checked-bar-color: 'var(--primary-color)'
    paper-toggle-button-checked-ink-color: '#268bd2'
    paper-toggle-button-unchecked-button-color: 'var(--secondary-background-color)'
    paper-toggle-button-unchecked-bar-color: 'var(--secondary-text-color)'
    paper-toggle-button-unchecked-ink-color: 'var(--secondary-background-color)'  

    # Sliders
    paper-slider-knob-color: 'var(--secondary-text-color)'
    paper-slider-knob-start-color: 'var(--secondary-text-color)'
    paper-slider-pin-color: 'var(--secondary-text-color)'
    paper-slider-active-color: 'var(--secondary-text-color)'
    paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
    paper-slider-secondary-color: 'var(--secondary-background-color)'
    paper-slider-disabled-active-color: 'var(--disabled-text-color)'
    paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

    # Google colors
    google-red-500: '#dc322f'
    google-green-500: '#859900'

thundergreen · February 9, 2018, 9:21am

Very Nice will definitely add this to my setup

onlytobeking · March 1, 2018, 3:07pm

does anyone know if it is possible to use subtle gradients? I would really, really like a gradient here in the main top bar:

patrick_jane · October 23, 2018, 10:26am

Very nice theme, I just installed it. However for the the navigation bar texts are not white, but grey instead, which makes them barely visible. Is this because of changes in HA since you posted this? How can I fix it?

[Album] Imgur

ktaog6 · November 20, 2018, 10:05am

u can set text-primary-color: “#F1F1F1”

maartenpaauw · October 19, 2019, 10:00am

This theme is now available at HACS!

Feel free to check it out at GitHub: https://github.com/home-assistant-community-themes/solarized-light

ktaog6 · October 23, 2019, 11:47pm

Good Job:)

Sebastian_R · January 3, 2020, 3:07pm

Possible to make the tiles transparent?

ffeingol · August 23, 2020, 4:56am

Overall I like the theme, but my cards are all white, not the same color as the background. I’ve cleared cache etc. Should the cards be white or match the background color?

snwtoy · August 23, 2020, 10:18pm

You can check out my latest bugfixed version of the theme here - the tiles should not be white (currently tested on Home Assistant 0.111.4):

github.com

AaronMountford/solarized-light/blob/e02dcd83284ac13ea0937b20df5f99fba73954d7/themes/solarized_light.yaml

---
#
# Solarized Light Theme
#
solarized-light:
  # Mode base usage:
  # $base03:    #002b36;                                   [DARk]background
  # $base02:    #073642;                                   [DARK]background highlights
  # $base01:    #586e75;  optional emphasized content      [DARK]comments / secondary content
  # $base00:    #657b83;  body text / default code / primary content
  # $base0:     #839496;                                   [DARK]body text / default code / primary content
  # $base1:     #93a1a1;  comments / secondary content     [DARK]optional emphasized content
  # $base2:     #eee8d5;  background highlights
  # $base3:     #fdf6e3;  background
  # $yellow:    #b58900;
  # $orange:    #cb4b16;
  # $red:       #dc322f;
  # $magenta:   #d33682;
  # $violet:    #6c71c4;
  # $blue:      #268bd2;

This file has been truncated. show original

I have been working with Marteen to sync this back to the source, but have run into a few issues with the code validation.