ActiveReports 18 .NET Edition
Developers / Create Applications / Apply Themes to WebDesigner and Js Viewer Components
In This Topic
    Apply Themes to WebDesigner and Js Viewer Components
    In This Topic

    Apply Themes to WebDesigner

    Use the Applications UI

    Use Theme Picker to select a System Theme or from the pre-defined themes in the application.

    Theme Picker
    Use API

    Enable/Disable Theme Picker in the UI

    You can choose to show or hide Theme Picker in the UI, which lists all the available themes. Use 'picker' API as shown to hide the theme picker:

    Copy Code 
    <script>
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { picker: { enabled: false }
});
< /script>

    Apply default theme

    Use 'default' API as shown to set a default theme from built-in themes.

    Copy Code 
    <script>
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { default: 'defaultDark'}
});
< /script>

    The built-in themes to choose from are: activeReports, activeReportsDark, defaultDark, darkOled, highContrast, highContrastDark.

    Provide options to select from an array of themes

    You can use either built-in themes or pass the theme object as option to choose in a Theme Picker.  Use 'list' API as shown:

    Copy Code 
    <script>
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
      themes: { list: ['default','defaultDark']}
});
< /script>

    A theme object can be created as shown in section 'Add Custom Themes'.

    Apply dark theme if detected on system

    You can choose whether the WebDesigner application should automatically detect and switch to a dark theme based on system settings. Use 'detectDarkTheme' API as shown to enable dark theme detection and set it:

    Copy Code 
    <script>
const designer = GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
     themes: { detectDarkTheme: true }
});
< /script>


    Apply Themes to Js Viewer using API

    Apply a default theme

    Use 'theme' API as shown to set a default theme from built-in themes.

    Copy Code 
    <script>
 var viewer = GrapeCity.ActiveReports.JSViewer.create({
            theme: GrapeCity.ActiveReports.JSViewer.Themes.darkOled
        });
 viewer.openReport("Report.rdlx");
 }
</script>

    The built-in themes to choose from are: activeReports, activeReportsDark, defaultDark, darkOled, highContrast, highContrastDark.


    Apply same theme as designer

    Use ‘theme’ API as shown to set the designer’s theme to the viewer on preview.

    Copy Code 
    <script>
     var viewer = null;
     GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
         themes: {
             default: 'DarkGreen',            
         },
         appBar: {
             openButton: { visible: true },
             saveButton: { visible: true },
             saveAsButton: { visible: true }
         },
   
         preview: {
             openViewer: (options) => {
                 if (viewer) {
                     viewer.openReport(options.documentInfo.id);
                     return;
                 }
                 viewer = GrapeCity.ActiveReports.JSViewer.create({
                     element: '#' + options.element,
                     theme: options.theme,
                     reportService: {
                         url: 'api/reporting',
                     },
                     reportID: options.documentInfo.id                    
                 });
             }
         }
     });
 </script>

    Add Custom Themes in WebDesigner and Js Viewer using API

    You can setup your own theme in WebDesigner and Js Viewer.

    In WebDesigner, you can create a color theme object using: GrapeCity.ActiveReports.DesignerThemes.color.rgba() or GrapeCity.ActiveReports.DesignerThemes.color.hex(). And then pass the theme to the WebDesigner using the Themes API.

    In Js Viewer, you can create a color theme object using: GrapeCity.ActiveReports.ViewerThemes.color.rgba() and GrapeCity.ActiveReports.ViewerThemes.color.hex(). And then pass the theme to the Js Viewer using the theme API.

    Note: If you create a theme using the WebDesigner API, you can pass the same theme to the Js Viewer. You can't pass the theme created using the Js Viewer API to the WebDesigner.

    The following image and example snippet shows setting theme colors, drop shadow, and border radius, and apply it to the WebDesigner and its preview.

    Custom theme in ActiveReports WebDesigner

    Copy Code 
     <script>
     var viewer = null;
     var DarkGreenTheme = {
         name: "DarkGreen",
         accent: GrapeCity.ActiveReports.DesignerThemes.color.rgba(0, 100, 0, 255),
         accentText: GrapeCity.ActiveReports.DesignerThemes.color.rgba(0, 100, 0, 255),
         accentSecondary: GrapeCity.ActiveReports.DesignerThemes.color.rgba(0, 100, 0, 255),
         accentWarning: GrapeCity.ActiveReports.DesignerThemes.color.rgba(0, 100, 0, 255),
         accentError: GrapeCity.ActiveReports.DesignerThemes.color.rgba(0, 100, 0, 255),
         colorContrast: GrapeCity.ActiveReports.DesignerThemes.color.rgba(255, 255, 255, 255),
         colorContrastText: GrapeCity.ActiveReports.DesignerThemes.color.rgba(255, 255, 255, 255),
         backgroundBody: GrapeCity.ActiveReports.DesignerThemes.color.rgba(0, 0, 0, 255),
         backgroundPanels: GrapeCity.ActiveReports.DesignerThemes.color.rgba(30, 30, 30, 255),
         shadow: "0 0 10px 1px rgba(0, 0, 0, 0.2)",
         shadowBorder: "0 0 10px 1px rgba(0, 0, 0, 0.1)",
         overlay: GrapeCity.ActiveReports.DesignerThemes.color.rgba(0, 0, 0, 38),
         textColor: GrapeCity.ActiveReports.DesignerThemes.color.rgba(255, 255, 255, 255),
         borderRadius: 4,
         elemBackground: GrapeCity.ActiveReports.DesignerThemes.color.rgba(191, 127, 74, 13),
         elemBackgroundHover: GrapeCity.ActiveReports.DesignerThemes.color.rgba(191, 127, 74, 39),
         btnGroupHeader: GrapeCity.ActiveReports.DesignerThemes.color.rgba(246, 229, 215, 255),
         btnGroupHeaderHover: GrapeCity.ActiveReports.DesignerThemes.color.rgba(242, 218, 198, 255),
         dropdownBackground: GrapeCity.ActiveReports.DesignerThemes.color.rgba(255, 255, 255, 255),
         dropdownBorder: GrapeCity.ActiveReports.DesignerThemes.color.rgba(230, 207, 190, 191),
         bindingModified: GrapeCity.ActiveReports.DesignerThemes.color.rgba(77, 202, 125, 255),
         bindingBound: GrapeCity.ActiveReports.DesignerThemes.color.rgba(254, 207, 0, 255),
         backgroundPanelsSection: GrapeCity.ActiveReports.DesignerThemes.color.rgba(255, 222, 191, 64),
         backgroundPanelsBorder: GrapeCity.ActiveReports.DesignerThemes.color.rgba(230, 207, 190, 191),
     };
     GrapeCity.ActiveReports.Designer.create('#ar-web-designer', {
         themes: {
             default: 'DarkGreen',
             list: [DarkGreenTheme]
         },
         appBar: {
             openButton: { visible: true },
             saveButton: { visible: true },
             saveAsButton: { visible: true }
         },
   
         preview: {
             openViewer: (options) => {
                 if (viewer) {
                     viewer.openReport(options.documentInfo.id);
                     return;
                 }
                 viewer = GrapeCity.ActiveReports.JSViewer.create({
                     element: '#' + options.element,
                     theme: DarkGreenTheme,
                     reportService: {
                         url: 'api/reporting',
                     },
                     reportID: options.documentInfo.id                    
                 });
             }
         }
     });
 </script>

    The following image and example snippet shows setting theme colors, drop shadow, and border radius, and pass it to the Js Viewer using the 'theme' API.

    Custom theme in ActiveReports Js Viewer

    Copy Code 
    <script type="text/javascript">
    let viewer;
    function loadViewer() {
        var DarkGreenTheme = {
            name: "DarkGreen",
            accent: GrapeCity.ActiveReports.ViewerThemes.color.rgba(0, 100, 0, 255),
            accentText: GrapeCity.ActiveReports.ViewerThemes.color.rgba(0, 100, 0, 255),
            accentSecondary: GrapeCity.ActiveReports.ViewerThemes.color.rgba(0, 100, 0, 255),
            accentWarning: GrapeCity.ActiveReports.ViewerThemes.color.rgba(0, 100, 0, 255),
            accentError: GrapeCity.ActiveReports.ViewerThemes.color.rgba(0, 100, 0, 255),
            colorContrast: GrapeCity.ActiveReports.ViewerThemes.color.rgba(255, 255, 255, 255),
            colorContrastText: GrapeCity.ActiveReports.ViewerThemes.color.rgba(255, 255, 255, 255),
            backgroundBody: GrapeCity.ActiveReports.ViewerThemes.color.rgba(0, 0, 0, 255),
            backgroundPanels: GrapeCity.ActiveReports.ViewerThemes.color.rgba(30, 30, 30, 255),
            shadow: "0 0 10px 1px rgba(0, 0, 0, 0.2)",
            shadowBorder: "0 0 10px 1px rgba(0, 0, 0, 0.1)",
            overlay: GrapeCity.ActiveReports.ViewerThemes.color.rgba(0, 0, 0, 38),
            textColor: GrapeCity.ActiveReports.ViewerThemes.color.rgba(255, 255, 255, 255),
            borderRadius: 4,
            elemBackground: GrapeCity.ActiveReports.ViewerThemes.color.rgba(191, 127, 74, 13),
            elemBackgroundHover: GrapeCity.ActiveReports.ViewerThemes.color.rgba(191, 127, 74, 39),
            btnGroupHeader: GrapeCity.ActiveReports.ViewerThemes.color.rgba(246, 229, 215, 255),
            btnGroupHeaderHover: GrapeCity.ActiveReports.ViewerThemes.color.rgba(242, 218, 198, 255),
            dropdownBackground: GrapeCity.ActiveReports.ViewerThemes.color.rgba(255, 255, 255, 255),
            dropdownBorder: GrapeCity.ActiveReports.ViewerThemes.color.rgba(230, 207, 190, 191),
            bindingModified: GrapeCity.ActiveReports.ViewerThemes.color.rgba(77, 202, 125, 255),
            bindingBound: GrapeCity.ActiveReports.ViewerThemes.color.rgba(254, 207, 0, 255),
            backgroundPanelsSection: GrapeCity.ActiveReports.ViewerThemes.color.rgba(255, 222, 191, 64),
            backgroundPanelsBorder: GrapeCity.ActiveReports.ViewerThemes.color.rgba(230, 207, 190, 191),
        };
        viewer = GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewerContainer',
            theme: DarkGreenTheme
        });
        viewer.openReport("Report.rdlx");
    }
</script>