#LIGHT DARK MODE SWITCH HOW TO#
#LIGHT DARK MODE SWITCH CODE#

* Apply and persist in the configuration the theme mode chosen by the user within the application. This.removeLocalStorageItem(ThemeService.SETTINGS_KEY) ** Apply the theme mode according to the user's operating system preferences. */ private stopSystemModeSynchronization(): void * Stop observing and reflecting in the application the user's preferences about the theme in the operating system (dark or light). If ((! structionSubject) & ( ))ДЇromEvent( (ThemeService.SYSTEM_DARK_MODE_MEDIA_QUERY), 'change').pipe(Д¬onst mediaqueryListEventMediaQueryListEvent: MediaQueryListEvent = e as MediaQueryListEvent Д¬onst darkMode = (mediaqueryListEventMediaQueryListEvent) ? mediaqueryListEventMediaQueryListEvent.matches : this.isSystemDark() * private startSystemModeSynchronization(): void * If the user decides to change the theme through the operating system, the changes will be immediately reflected in the application. * Observe and apply any future changes of user preferences of the theme mode through the operating system (dark or light). ** Apply the theme mode stored in the settings. tKendoUiControlsMode( 'kendoui-light.css') (, ThemeService.LIGHT_MODE_CSS_CLASS_NAME) tKendoUiControlsMode( 'kendoui-dark.css') */ private setMode(darkMode: boolean): void ( this.kendouiStylesheetHtmlElement, 'href', stylesheetFilePath) */ private setKendoUiControlsMode(stylesheetFilePath: string): void * stylesheetFilePath Kendo UI components css style sheet file path. * Set stylesheet url for Kendo UI components. */Д¬onst result: boolean = ?.matchMedia(ThemeService.SYSTEM_DARK_MODE_MEDIA_QUERY).matches!

** Check if the user Operative System theme preference is dark mode. ttings = this.getLocalStorageItem(ThemeService.SETTINGS_KEY) This.renderer = rendererFactory.createRenderer( null, null) */ constructor( private document: Document,

#LIGHT DARK MODE SWITCH CODE#

If you want to get a sample project with dark mode to hack on top of it, check out this minimal React app I built with all the code showcased on this article.Import rendererFactory Creates and initializes a custom renderer that implements the Renderer2 base class. The dark mode implementation on my website (sorry for the low frame rateВ рџ…).

Gif showcasing switching from light to dark mode I got this feature on my own website/portfolio and this is how it looks:

#LIGHT DARK MODE SWITCH HOW TO#

Moreover, this kind of feature is a great example of hook implementations and how to use the latest features of React to build amazing things. We successfully added support for dark mode in our React application without having done any fundamental changes! I really hope this post will inspire others to add this feature to their own website or app in order to make them more easy on the eye when used during night time. In the example above, the Wrapper component uses the colors of the theme for the fonts and the background, when switching from light to dark these CSS properties will change and hence the background will go from gray to black and the font from black to white. As a result, all our styled components using that theme will end up using the dark theme, and thus our entire application is now in dark mode. This will switch the theme that is passed in the Emotion Theme Provider from light to dark. Considering weвЂ™re in the default state (light mode), clicking this button will call the toggle function provided through the ThemeContext which will set the local storage variable dark to true and the themeState dark variable to true.

Light dark mode switch