{"repo":"johannesjo/angular-material-css-vars","free":true,"listed":false,"github":"https://github.com/johannesjo/angular-material-css-vars","clone":"git clone https://github.com/johannesjo/angular-material-css-vars.git","description":"Little library to use css variables with @angular/material","language":"SCSS","stars":198,"topics":["angular","hacktoberfest"],"license":"MIT","category":"ui-components","readme_excerpt":"You want to style your angular material dynamically with all the colors in the rainbow? Look no further! Check out the Demo! Setup 1. Install: 2. If @angular/material is already configured remove @include mat.core() from your main stylesheet file if present. 3. Add this to your main stylesheet instead: 4. Add to your main module: In standalone workspaces, add the following to your app.config.ts : 5. If you want to adjust the theme at runtime, you can use MaterialCssVarsService : This library only supports M2. If you want to use M3, you can use the angular-material-runtime-theme library instead. More information can be found in the following issue. Additional Features - Auto or manually set contrast color via - setAutoContrastEnabled(bool) - setContrastColorThreshold(hueVal: HueValue) - Helper to set all variables - setVariable(cssVarName: MaterialCssVariables, value: string) - You can use the MaterialCssVariables enum from here to make sure you get the variable name right. - Rudimentary dark theme support via body class - setDarkTheme(isDark: boolean) Utility There are also several utility functions and mixins. There are also some additional hacks (e.g. adding a color to the elevation shadow) available in case you need them. Initialization Options You can provide different options before initialization to change the body class used for the dark theme and to provide different default styles: Set default (fallback palettes) There are two ways to set the default fallback theme. ","default_branch":null,"files":null,"tree":[],"storefront":"/r/johannesjo","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/johannesjo/angular-material-css-vars/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}