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.

    Docs     ### Getting Started

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

### Basics

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

### Features

- [ Accessibility ](https://laravel-datatables.com/docs/feature-accessibility)
- [ Aggregate Columns ](https://laravel-datatables.com/docs/feature-aggregate-columns)
- [ Bulk Actions ](https://laravel-datatables.com/docs/feature-bulk-actions)
- [ Column Reordering ](https://laravel-datatables.com/docs/feature-column-reordering)
- [ Column Visibility ](https://laravel-datatables.com/docs/feature-column-visibility)
- [ Custom Controls ](https://laravel-datatables.com/docs/feature-custom-controls)
- [ Custom Filters ](https://laravel-datatables.com/docs/feature-custom-filters)
- [ Exporting ](https://laravel-datatables.com/docs/feature-exporting)
- [ Freeze Columns and Headers ](https://laravel-datatables.com/docs/feature-freeze-columns-and-headers)
- [ Inline Editing ](https://laravel-datatables.com/docs/feature-inline-editing)
- [ Pagination ](https://laravel-datatables.com/docs/feature-pagination)
- [ Responsive Mobile ](https://laravel-datatables.com/docs/feature-responsive-mobile)
- [ Row Actions ](https://laravel-datatables.com/docs/feature-row-actions)
- [ 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/feature-sorting-and-searching)
- [ State Persistence ](https://laravel-datatables.com/docs/feature-state-persistence)
- [ Value Preparation ](https://laravel-datatables.com/docs/feature-value-preparation)

### Customization

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

### 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.

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.

Application layout blade

HTML

     `        ` 

```

```

Theme Initialization Strategy
-----------------------------

Use one consistent source of truth at app boot, then apply it before first paint to avoid theme flash. Append the following javascript snippet to the end of your main app.js file in resources/js. Of course you can add this snippet anywhere so long as it gets executed on page load.

resources/js/app.js

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');    } else if (themeCookie && themeCookie.split('=')[1] === 'dark') {        document.documentElement.classList.add('dark');    } else if (themeCookie && themeCookie.split('=')[1] === 'light') {        document.documentElement.classList.remove('dark');    }}initializeTheme();document.addEventListener('livewire:navigated', initializeTheme);` 

```
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');
    } else if (themeCookie && themeCookie.split('=')[1] === 'dark') {
        document.documentElement.classList.add('dark');
    } else if (themeCookie && themeCookie.split('=')[1] === 'light') {
        document.documentElement.classList.remove('dark');
    }
}

initializeTheme();
document.addEventListener('livewire:navigated', initializeTheme);
```

User Theme Toggle
-----------------

A user toggle should update both root class and persisted preference so future visits preserve the selected mode. Append the following javascript snippet to the end of your main app.js file in resources/js.

resources/js/app.js

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

Basics

Use Datatables for Laravel's built-in Styling support.](https://laravel-datatables.com/docs/basic-styling) 

   © 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)