• + D
  • Light
  • Dark
  • System
logoData Den
  • Overview
    • Installation
    • License
    • Support
    • Options
  • Layout
    • Theme
    • Custom CSS
    • CSS Variables
  • Features
    • Column pinning
    • Data Loader
    • Drag And Drop
    • Filtering
      • Header filters
      • Quick filter
    • Pagination
    • Resizing
    • Sorting
    • Editing
  • Api
    • Data Loader
    • Filter renderer

Data Grid Theme

Explore various themes to change the look and feel of your data grid, ensuring it aligns with your application design.

Explore various themes to change the look and feel of your data grid, ensuring it aligns with your application design.


Custom theme

You can use CSS variables to create a custom theme. Below you will find an example of the styles we used to create the dark theme in our documentation.

  • CSS
        
            
    .dark .data-den-grid {
      --data-den-grid-border-color: rgb(82 82 82);
      --data-den-cell-hover-bg: rgb(82 82 82);
      --data-den-cell-active-bg: rgb(38 38 38);
      --data-den-cell-pinned-border-color: rgb(229 229 229);
      --data-den-header-cell-bg: rgb(38 38 38);
      --data-den-header-menu-bg: rgb(64 64 64);
      --data-den-header-menu-item-hover-bg: rgb(82 82 82);
      --data-den-header-menu-item-color: rgb(229 229 229);
      --data-den-header-cell-active-bg: rgb(38 38 38);
      --data-den-row-cell-bg: rgb(64 64 64);
      --data-den-pagination-button-bg: rgb(38 38 38);
      --data-den-header-filter-select-bg: rgb(38 38 38);
    }
  
        
    
Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
Join our mailing list now
© 2024 Copyright: MDBootstrap.com

Access restricted

To view this section you must have an active PRO account

Log in to your account or purchase an Data Den subscription if you don't have one.

Buy Data Den PRO