1 var models = window['powerbi-client'].models;
2  var embedConfig = {
3  type: 'report',                         // Specifies the type of embedded object (report in this case).
4  id: '<report-id>',                      // Unique ID of the report to embed.
5  embedUrl: '<embed-url>',                // The URL to embed the report from Power BI.
6  accessToken: '<access-token>',          // The token for authentication and authorization.
7  settings: {
8    panes: {                              // Custom settings to control UI elements.
9      filters: { visible: false },        // Hides the filter pane.
10      pageNavigation: { visible: false }  // Hides the page navigation.
11          }
12      }
13  };
14
15  var reportContainer = document.getElementById('reportContainer');   // HTML container to embedded the report.
16  var report = powerbi.embed(reportContainer, embedConfig);           // Embeds the report into the container.

1 var customTheme = {
2    "name": "Custom Dark Mode", // Name of the theme for identification
3    "dataColors": ["#1b1f23", "#21262d", "#30363d"], // Colors for data visuals (e.g., charts and graphs)
4    "background": "#0d1117", // Background color of the report canvas
5    "foreground": "#c9d1d9", // Text color for report elements (e.g., titles, labels)
6    "tableAccent": "#58a6ff" // Accent color for table visuals (e.g., highlights, headers)
7};
8
9// Apply the custom theme to the embedded Power BI report
10report.setTheme(customTheme)
11    .then(() => {
12        // Callback for successful theme application
13        console.log("Theme applied successfully");
14    })
15    .catch(error => {
16        // Handle any errors that occur during theme application
17        console.error("Error applying theme:", error);
18    });

1 // Add an event listener to the element with the ID "toggleTheme".
2// This listens for a "click" event, triggering the provided callback function when the button is clicked.
3document.getElementById('toggleTheme').addEventListener('click', () => {
4    
5    // Check if the "dark-mode" class is currently applied to the body element.
6    // If it is present, use the "lightTheme", otherwise, use the "darkTheme".
7    var theme = document.body.classList.contains('dark-mode') ? lightTheme : darkTheme;
8    
9    // Apply the selected theme to the embedded Power BI report using the "setTheme" method.
10    report.setTheme(theme);
11    
12    // Toggle the "dark-mode" class on the body element.
13    // This switches the visual mode of the application (e.g., toggling between light and dark modes).
14    document.body.classList.toggle('dark-mode');
15});

1// Fetch the theme JSON from an external file
2fetch('/themes/darkTheme.json') // Replace with the actual path to your theme file
3  .then(response => response.json()) // Parse the JSON response
4  .then(theme => {
5      // Apply the fetched theme to the report
6      report.setTheme(theme)
7          .then(() => {
8              console.log('External theme applied successfully');
9          })
10          .catch(error => {
11              console.error('Error applying external theme:', error);
12          });
13  })
14  .catch(error => {
15      console.error('Error fetching theme:', error); // Handle fetch errors
16  });