Dark Mode - Datatables for Laravel                  [               Datatables for Laravel  ](/) 

  Toggle main menu         [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing)        Search  ⌘ K   [ Log in ](/login) 

  [Docs](https://laravel-datatables.com/docs) [Demos](/demos) [Blog](https://laravel-datatables.com/blog) [Pricing](/pricing) 

 Search docs and demos  

Type at least 2 characters to search.

    Documentation menu      ### Getting Started

- [ Installation ](https://laravel-datatables.com/docs)
- [ Dark Mode ](https://laravel-datatables.com/docs/dark-mode)

### Basics

- [ Creating a Table ](https://laravel-datatables.com/docs/creating-a-table)
- [ Displaying Columns ](https://laravel-datatables.com/docs/displaying-columns)
- [ Data Sources ](https://laravel-datatables.com/docs/data-sources)
- [ Internationalisation ](https://laravel-datatables.com/docs/internationalisation)
- [ Multi-Language ](https://laravel-datatables.com/docs/multi-language)
- [ Styling ](https://laravel-datatables.com/docs/styling)

### Customization

- [ Columns ](https://laravel-datatables.com/docs/customization-columns)
- [ Cell Renderer ](https://laravel-datatables.com/docs/customization-cell-renderer)
- [ Value Formatter ](https://laravel-datatables.com/docs/customization-value-formatter)
- [ Filters ](https://laravel-datatables.com/docs/customization-filters)
- [ Pagination ](https://laravel-datatables.com/docs/customization-pagination)
- [ Sorting Icons ](https://laravel-datatables.com/docs/customization-sorting-icons)
- [ Row Actions ](https://laravel-datatables.com/docs/customization-row-actions)
- [ Multi Row Actions ](https://laravel-datatables.com/docs/customization-multi-row-actions)
- [ Loading Indicator ](https://laravel-datatables.com/docs/customization-loading-indicator)
- [ Exporting ](https://laravel-datatables.com/docs/customization-exporting)
- [ Components ](https://laravel-datatables.com/docs/customization-components)
- [ Data Sources ](https://laravel-datatables.com/docs/customization-data-sources)
- [ State Persistence ](https://laravel-datatables.com/docs/customization-state-persistence)

### Features

- [ Accessibility ](https://laravel-datatables.com/docs/feature-accessibility)
- [ Actions and Forms ](https://laravel-datatables.com/docs/actions-and-forms)
- [ Aggregate Columns ](https://laravel-datatables.com/docs/feature-aggregate-columns)
- [ Column Reordering ](https://laravel-datatables.com/docs/feature-column-reordering)
- [ Column Visibility ](https://laravel-datatables.com/docs/feature-column-visibility)
- [ Custom Filters ](https://laravel-datatables.com/docs/feature-custom-filters)
- [ Custom Controls ](https://laravel-datatables.com/docs/feature-custom-controls)
- [ Exporting ](https://laravel-datatables.com/docs/feature-exporting)
- [ Freeze Columns and Headers ](https://laravel-datatables.com/docs/feature-freeze-columns-and-headers)
- [ Pagination ](https://laravel-datatables.com/docs/feature-pagination)
- [ Responsive Mobile ](https://laravel-datatables.com/docs/feature-responsive-mobile)
- [ Row Grouping ](https://laravel-datatables.com/docs/feature-row-grouping)
- [ Row Selection ](https://laravel-datatables.com/docs/feature-row-selection)
- [ Sorting and Searching ](https://laravel-datatables.com/docs/sorting-and-searching)
- [ State Persistence ](https://laravel-datatables.com/docs/feature-state-persistence)
- [ Value Preparation ](https://laravel-datatables.com/docs/feature-value-preparation)

### Cell Renderer

- [ Action Buttons ](https://laravel-datatables.com/docs/renderer-action-buttons)
- [ Avatar ](https://laravel-datatables.com/docs/renderer-avatar)
- [ Checkmark ](https://laravel-datatables.com/docs/renderer-checkmark)
- [ Color Sample ](https://laravel-datatables.com/docs/renderer-color-sample)
- [ Email Link ](https://laravel-datatables.com/docs/renderer-email-to-link)
- [ External Link ](https://laravel-datatables.com/docs/renderer-external-link)
- [ Friendly Timestamp ](https://laravel-datatables.com/docs/renderer-friendly-timestamp)
- [ Image ](https://laravel-datatables.com/docs/renderer-image)
- [ Long Text ](https://laravel-datatables.com/docs/renderer-long-text)
- [ Phone Link ](https://laravel-datatables.com/docs/renderer-phone-link)
- [ Progress Bar ](https://laravel-datatables.com/docs/renderer-progress-bar)
- [ Status Badge ](https://laravel-datatables.com/docs/renderer-status-badge)
- [ URL Link ](https://laravel-datatables.com/docs/renderer-url-link)
- [ Wire Link ](https://laravel-datatables.com/docs/renderer-wire-link)

### Value Formatter

- [ Compact Number ](https://laravel-datatables.com/docs/formatter-compact-number)
- [ Currency ](https://laravel-datatables.com/docs/formatter-currency)
- [ Duration ](https://laravel-datatables.com/docs/formatter-duration)
- [ Friendly Filesize ](https://laravel-datatables.com/docs/formatter-friendly-filesize)
- [ Friendly Timestamp ](https://laravel-datatables.com/docs/formatter-friendly-timestamp)
- [ Locale Timestamp ](https://laravel-datatables.com/docs/formatter-locale-timestamp)
- [ Number ](https://laravel-datatables.com/docs/formatter-number)
- [ Percent ](https://laravel-datatables.com/docs/formatter-percent)

  Dark Mode
=========

Datatables for Laravel supports light and dark UI through theme-aware classes in package views and styles. Dark mode is activated by toggling the dark class on the root HTML element.

1. Root Theme State
-------------------

The package follows your application's root theme state. If your layout sets html.dark, datatable controls and table regions render in dark mode automatically.

 Root layout HTML     `        ` 

 ```

```

2. Theme Initialization Strategy
--------------------------------

Use one consistent source of truth at app boot, then apply it before first paint to avoid theme flash.

 Theme initializer JAVASCRIPT     `function initializeTheme() {    const themeCookie = document.cookie        .split('; ')        .find((row) => row.startsWith('theme='));    if (!themeCookie && window.matchMedia('(prefers-color-scheme: dark)').matches) {        document.documentElement.classList.add('dark');        return;    }    if (themeCookie && themeCookie.split('=')[1] === 'dark') {        document.documentElement.classList.add('dark');    } else {        document.documentElement.classList.remove('dark');    }}` 

 ```
function initializeTheme() {
    const themeCookie = document.cookie
        .split('; ')
        .find((row) => row.startsWith('theme='));

    if (!themeCookie && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        document.documentElement.classList.add('dark');
        return;
    }

    if (themeCookie && themeCookie.split('=')[1] === 'dark') {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
}
```

3. User Theme Toggle
--------------------

A user toggle should update both root class and persisted preference so future visits preserve the selected mode.

 Toggle example JAVASCRIPT     `function setTheme(nextTheme) {    document.documentElement.classList.toggle('dark', nextTheme === 'dark');    document.cookie = `theme=${nextTheme}; path=/; max-age=31536000; samesite=lax`;}` 

 ```
function setTheme(nextTheme) {
    document.documentElement.classList.toggle('dark', nextTheme === 'dark');
    document.cookie = `theme=${nextTheme}; path=/; max-age=31536000; samesite=lax`;
}
```

 Related documentation

 [Styling](https://laravel-datatables.com/docs/styling) [Components](https://laravel-datatables.com/docs/components) 

   © 2026 Copyright (C)  [ Morrow IT Consulting & Services ](https://morrow-it.services)  

 [Terms of Service](https://laravel-datatables.com/legal/terms) [Privacy](https://laravel-datatables.com/legal/privacy) [Legal Disclosure](https://laravel-datatables.com/legal/disclosure)