Git Product home page Git Product logo

ha-theme_m3-d06-tealblue's Introduction

hacs release downloads

Material 3 Theme for Home Asistant: D06, Teal Blue

What is it

A Material 3 based extended Dark & Light theme for Home Assistant.

This theme not only defines Material 3 dark and light mode colors, but also adapts some of the Home Assistant colors in dark mode as advised by Material 3:

  • The error, warning, success and info colors
  • The energy dashboard colors
  • The label badge (red, blue, green, yellow, grey) colors
  • The state climate colors
  • The state (on, off, home, not home, unknown, idle) colors

All these colors have been desaturated a bit and given more brightness to have a better match with the dark mode.

The theme also defines some Neumorphic shadow colors for dark and light mode.

For the manual: see https://material3-themes-manual.amoebelabs.com/

For more theme examples, check the overview of all the 22 examples
And to implement them in your cards: look at how to use these Material 3 themes in a Home Assistant card

Installation via HACS

This Theme is in the default theme repository of HACS

Manual Installation

Get the yaml file and put int into your themes folder.

If you have the following in your configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes/

The theme will be automatically available once you have reloaded the themes using the Home Assistant 'Developer Tools' > 'Services' > 'frontend.reload_themes' service.

Theme Preview:

Below the definition of the theme, generated and displayed using the Swiss Army Knife custom card for Home Assistant (NYR).

m3-06-palettes

m3-06-surfaces

m3-06-light

m3-06-dark

Some real-world screenshots:

A Light and Dark example made with the Swiss Army Knife custom card.

Note that the card background in the light theme is white instead of the lightest theme background. Will be corrected...

m3-06-sake12-light

m3-06-sake12-dark

ha-theme_m3-d06-tealblue's People

Contributors

amoebelabs avatar wrt54g avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

wernerhp

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.