Is there a way to switch between different ag-grid themes using SCSS when loading them?

I have attempted to include the following code in my main.scss file:

@import '~ag-grid-community/src/styles/ag-grid';
@import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham';
@import '~ag-grid-community/src/styles/ag-theme-balham-dark/sass/ag-theme-balham-dark';

My intention is to conditionally apply either ag-theme-balham or ag-theme-balham-dark to the div containing ag-grid.

However, when both themes are loaded through SCSS, it appears that one overrides the other due to them building on some common theme files with variables. As a result, my grid ends up being light even though I can see in the Chrome inspector that the surrounding div has the class "ag-theme-balham-dark", despite being imported last.

If I remove the import of the light theme first, I am able to achieve a dark grid successfully.

Switching to ag-grid's CSS rather than SCSS does work, but the whole purpose of using SCSS was to be able to override certain theme variables.

csssassag-grid

Answer №1

In order to address this issue, I opted not to utilize their pre-made themes and instead created custom themes from scratch. The process of creating these custom themes is straightforward, as you can leverage the default variables as a foundation.

@import '~ag-grid-community/src/styles/ag-grid';
@import '~ag-grid-community/src/styles/ag-theme-balham/vars/ag-theme-balham-vars';
@import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-common';

.ag-theme-balham {
  // $ag-params contains all values for the light theme
  @include ag-theme-balham($ag-params);
}

.ag-theme-balham-dark {
  $background: #2d3436;
  $foreground: #F5F5F5;

   // override the default params with the dark values
  $dark-params: map-merge($ag-params, (
      background-color: $background,
      foreground-color: $foreground,
      secondary-foreground-color: $foreground,
      odd-row-background-color: darken($background, 3),
      header-background-color: darken(#636e72, 30),
      header-foreground-color: $foreground,
      header-cell-hover-background-color: lighten($background, 5),
      header-cell-moving-background-color: lighten($background, 5),
      border-color: #424242,
      hover-color: lighten($background, 7)
    ));

    @include ag-theme-balham($dark-params);
}

https://stackblitz.com/edit/ag-grid-scss-themes?embed=1&file=src/styles.scss

Depending on your usage of features in ag-grid, you may need to override additional $ag-params values. For this example, only the necessary overrides were implemented.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning Images in Bootstrap 4

I'm encountering an issue with Bootstrap 4. The left box isn't aligning properly with the right box. This involves both HTML and CSS. How can I go about resolving this issue? <section> <div class="container"> <div class="row"& ...

htmlcssbootstrap-4

Using FlexBox for Vertical Alignment of Elements

Experimenting with FlexBox (for demonstration purposes only). I am facing a challenge in vertically centering text within the parent .top-nav-bar. While using justify-content: space-between, I have successfully aligned two elements horizontally, but I am s ...

cssflexbox

Preventing the collapse of the right column in a 2-column layout with Bootstrap 3

I've recently begun exploring Bootstrap and am attempting to achieve the following: (Left column - larger) Heading Heading 2 Heading Image Heading Image Heading Address (Right column - smaller) Heading Paragraph List items My issue ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Using the clip-path property to determine the content padding within a div

I am encountering an obstacle while attempting to insert icons into a polygon-shaped div. The problem lies with the padding, as the icons get cut off by the borders of the polygon. #container { width: 200px; height: 200px; border: 2px solid blac ...

htmlcss

What could be causing this TypeError to appear in my Angular unit testing?

this.columnDefs.forEach((columnDef) => { columnDef.floatingFilter = this.hasFloatingFilter; }); this.gridApi.setColumnDefs(this.columnDefs); ERROR: 'ERROR', TypeError: this.gridApi.setColumnDefs is not a function TypeError: this.gridApi.set ...

angulartypescripttypeerrorag-grid

Vue does not support compiling .scss files that contain comments with the syntax "//"

Vue.js is a new concept to me and I'm still trying to wrap my head around it. Within my .scss file, there's a commented line that looks like this: // overflow: hidden; Surprisingly, keeping this line resulted in an error: Unknown word T ...

vue.jswebpacksass

Problems with Bootstrap affix scrolling in Internet Explorer and Firefox

I'm encountering an issue with the sidebar on my website. I've implemented Bootstrap affix to keep it fixed until the end of the page, where it should move up along with the rest of the content at a specific point... Everything seems to be worki ...

javascriptjquerycsstwitter-bootstrapaffix

How to display an unordered list horizontally in HTML

I'm working on a screen that has filters displayed vertically, but I want to align them horizontally and have the filter options arranged in two columns. I've tried using CSS properties like spacing, clear, and display block, but the checkboxes/l ...

javascriptjqueryhtmlcss

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap

Can someone help me troubleshoot the issue with my submit button's onclick function?

I am currently working on a project where I have a content box enclosed in a div tag. Within this content box, there are paragraphs with unique IDs for individual styling rules. I have set margins, padding, and other styles accordingly. At the bottom of th ...

javascripthtmlcss

Including a .css file in ejs

I'm currently developing an application using Node.js (express) with EJS, and I'm facing an issue while including a .css file in it. When I tried the same setup as a standalone HTML-CSS project, it worked perfectly fine. How can I include the CSS ...

cssnode.jsexpressejs

What is the method of adding a child to the outerHTML of the parent element instead of within it?

Is there a way to use the outerHTML method on a parent element to append a child element so that the icons appear outside of the targeted element rather than inside it? The current code snippet shows the icons inside the box, but I want them to be placed o ...

javascripthtmlcss

The ng-class condition is in flux, however, the new style is not being

Attempting to modify the background of the pane in an Ionic application based on the condition of the ng-class as shown. Changing the condition in the code and refreshing the page manually works correctly, but updating the condition from user input does ...

javascriptcssangularjsionic-framework

I am running into issues getting Tailwind CSS to work in my project. Despite following the installation instructions in the documentation and trying to learn this new CSS framework, it doesn't seem to

//I followed the instructions in the tailwind documentation to install and set up everything. However, when I try to use tailwind utility classes in my HTML file, they don't seem to work. Can someone please assist me with this issue? // Here is my sr ...

htmlcssreactjsvue.jstailwind-css

The alignment of justify-space-around and justify-content-center in Bootstrap 4 appears to be misaligned

I've been struggling to find a solution to this issue. My goal is to align the centered elements between two lines, similar to what Bootstrap's documentation shows. There doesn't appear to be any excess margin or padding causing alignment is ...

htmlcssbootstrap-4

Unifying flex and position:fixed

I'm having difficulties when it comes to displaying a modal dialog with a fixed position within a flex layout. The header and footer of the dialog need to be set in height, while the content section should have overflow with scrollbars. I chose the fl ...

htmlcssflexbox

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

*edited format I came across a PHP code for a calendar on the internet and I am currently working on implementing an onclick event that captures the date selected by a user as a variable (which will be used later in a database query). At this point, my g ...

phpjquerycssarrays

Encountering issues with loading styles in Vue single file components

While working on my project at this link, I encountered an issue with displaying a styled modal. Despite trying to import the styles using: <style scoped> @import "../styles/modal-style.css"; </style> and even directly pasting the co ...

javascriptcssvue.jsvuejs2vue-component

What is the best method for applying a gradient color to the parent class in CSS using pseudo classes (before and after)?

"Is there a way to overlay gradient colors on pseudo-classes (before and after) while working with parent classes in CSS? I am attempting to create arrow shapes using div elements and the 'after' class. The div's background color consis ...

htmlcss

What could be causing the background color opacity of the HTML hr tag to decrease?

I am trying to modify the height and background color of the <hr> HTML tag. However, even though the height and color are changing, it appears that the background color opacity is decreasing slightly. What could be causing this issue? Here is my cod ...

htmlcssbootstrap-5