DEV Community

Cover image for Switch themes like a fox 🦊 based on Ambient Light 💡 in your Angular Apps

Switch themes like a fox 🦊 based on Ambient Light 💡 in your Angular Apps

Siddharth Ajmera 🇮🇳 on March 23, 2020

DISCLAIMER: This is a continuation of this article where I write about implementing a theme switch in an Angular App. If you haven't already read ...
Collapse
 
stephaneeybert profile image
Stephane Eybert • Edited

Hello !
Very interesting article. I implemented it in a PWA I'm doing. I can see your stackblitz is showing the AmbientLightSensor class is undefined. The same was happening in my VSCode IDE I can say.

I could solve it by adding the following source code above the service class:
declare global {
interface Window {
AmbientLightSensor: any;
}
}
And injecting the window: Window object in the constructor, I then could do:
const sensor: any = new this.window.AmbientLightSensor();

Kind Regards,
Stephane Eybert

Collapse
 
x777 profile image
YD

Cool. But looks like not a native so not easy to use for everyone.

Collapse
 
siddajmera profile image
Siddharth Ajmera 🇮🇳 Angular

Hi YD,

Thank you for the feedback 🙂

What exactly did you mean by "not a native" though? Did you mean native as in native to the platform?

I do agree that browser support is not so good at the moment. But it is improving day by and will hopefully land sometime soon.

That being said, did you find any issues following the article? If yes, please comment with the section(s) so that I could update them and make it better. 🙂

Again, thank you soo much for sharing your thoughts and starting this dialog. 🙌🏻😃

Collapse
 
x777 profile image
YD

Yes, I mean only supporting for common use.