Comments (8)
I was able to get pretty far dynamically switching between dark and light mode by reassigning the variables inside a .dark-theme
class block:
.dark-theme {
--palette-background-background: $dark-background;
...
}
This got me very far without doubling the bundle size. Pretty much everything worked as needed, but a few components had colors slightly off. It turned out, the problems are all in places where Material components use is-dark
from the theme to pick different colors. There are over 10 different colors in around 5 different mixins that they use it for.
I think we could still make this approach work if we selectively call the 5ish component mixins that do special things based on the state of is-dark
, and still use the approach above for background/foreground palettes.
I would have to try this out to see what the actual size savings are, or if it's worth the extra work. Do you have thoughts on whether this would work?
from angular-material-css-vars.
@johannesjo could you explain the need for light/dark being built in? Wouldn't you just want to generate the vars, and then swap CSS variables out at runtime with the appropriate values?
...
Wait I think I understand. The light/dark theme mixins produce different backgrounds OUTSIDE of the accent. So as an admin theming your app, you would either specify if your theme was light or dark (swapping out appropriate backgrounds). Primary/accent/warn are still driven from defined color vars.
from angular-material-css-vars.
There is no "need" for it to be build in, but it is a core distinction for the angular material library and as this package is all about enabling custom user themes, it made sense to me, to include one as default. It should be pretty easy to deactivate during initialization though:
@mixin initMaterialCssVars(
$dark-theme-selector: false,
)
There is no super accessible mechanism yet to just use a dark theme though. I am open for suggestions how to handle this in a better manner.
from angular-material-css-vars.
I am closing this, but feel free to reopen this, if you were unable to come up with a solution.
from angular-material-css-vars.
from angular-material-css-vars.
Not sure to be honest. In theory this should work pretty well without setting --palette-background-background
as described above, if angular materials underlying color variable concepts would be used super strictly everywhere, but unfortunately they are not. They are conditional styles in addition to the color variables being applied. You can get an overview over those by search for is-dark
insidenode_modules/@angular/material/_theming.scss
.
All those places (and there are definitely some) would need to be patched out. Another approach might be not to use angular-material-theme
at all, but a custom implementation with just those places with conditional styles while always using the light theme as a default.
from angular-material-css-vars.
@henke-d please don't borrow threads. İt gets messy...
from angular-material-css-vars.
Not sure if this is helpful, but what we could do is making both light and dark optional like so:
@at-root {
@if $light-theme-selector {
@include angular-material-theme($theme);
}
@if $dark-theme-selector {
$mat-css-theme: $dark-theme !global;
#{$dark-theme-selector} {
@include angular-material-theme($dark-theme);
}
}
}
This would give you the option to half the size in case you only need one of the two. This should already work if only using the light theme but not for when you only want to use the dark theme.
from angular-material-css-vars.
Related Issues (20)
- mat-typography not working anymore
- var(--palette-primary-500-rgb) is not a color. Falling back to "dark" tone. HOT 8
- Is contrast currently broken? HOT 3
- More custom theme ability HOT 3
- V15 MDC Fixes HOT 32
- How to use it with Angular 14 HOT 6
- Opacity Broken in mat-css-color utility HOT 1
- Docs on $mat-css-dark-theme-selector and $mat-css-light-theme-selector not accurate HOT 3
- Legacy Checkbox - checkmark not displayed anymore HOT 1
- Material 15: Usage of default palettes HOT 3
- Foreground and Background mapping HOT 3
- Setting Variables and Styles with default material mixins HOT 4
- v5.0.0-next.0: SassError: Undefined mixin @include app-theme($mat-css-theme); HOT 3
- Allow setting theme on a specific element HOT 3
- Is it possible to disable "isDarkTheme" specific css? HOT 3
- Contrast color edge cases & slightly different dark text color HOT 1
- Checkbox check mark bad contrast in dark mode
- Angular 17 support
- mixin `mat-css-set-palette-defaults` not generating any code HOT 5
- Offer standalone friendly APIs
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-material-css-vars.