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

    Themes in WebDesigner

    Apply Theme using the application's UI

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

    Theme Picker
    Manage Themes using WebDesigner 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 system theme

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

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


    Themes in Js Viewer

    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 using respective APIs as explained in the text that follows.

    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>
    See Also
    WebDesigner API
    Blazor WebDesigner API
    Js Viewer API