BuyLog In
Ticket T472558
Visible to All Users

How to switch themes in Angular 2

created 8 years ago

Hello,

We are using DevExtreme(Angular 2 version) in a project and I would like to let the user choose size of the datagrids and other ui controls. E.g switch between the light stylesheet and compact version.
In a similar way as you have with the theme selector on this page:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/Data_Grid/RecordPaging/Angular/Light/

Do you know how this could be implemented?

Thanks in advance!

Regards,
Joachim

Sign in to comment on this post

Answers approved by DevExpress Support

created 8 years ago (modified 8 years ago)

Hello Joachim,
You can add a widget like dxSelectBox with the predefined themes. Once an item is selected, call the DevExpress.ui.themes.current('NewThemeName') method to apply a new theme.
To call this method, you need to import the 'themes' module as follows:

JavaScript
import DxThemes from 'devextreme/ui/themes';

Then, use it like this:

JavaScript
DxThemes.current("generic.dark");

I've attached an example where I switch to the "dark" theme from the "light" theme.

    Show previous comments (9)
    Alex Skorkin (DevExpress) 8 years ago

      This setting is not saved anywhere. You need to implement setting storing on your own.

      VR VR
      Viktor Rennemark 8 years ago

        Okay, I see
        Thanks!

        Alex Skorkin (DevExpress) 8 years ago

          You are always welcome, Joachim.

          Sign in to comment on this post

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.