Problem/Motivation

Currently, the module sets a class="dark" attribute on the <html> element while also relying on data attributes (e.g., data-dark-mode-source). This combines two approaches, resulting in redundancy and potential conflicts.

A cleaner, more consistent approach would be to rely solely on a custom data attribute on the <html> element (e.g., data-dmt-mode="dark" or data-dmt-mode="light").

Benefits of using a dedicated data attribute:

  • Clearer semantics: communicates explicitly whether dark or light mode is active.
  • Avoids CSS selector conflicts with existing or future theme classes that may also use dark.
  • Provides a single, extensible source of truth for dark mode state (easy to query in JavaScript and CSS).
  • Makes it easier for contrib themes and custom code to extend or hook into the dark mode toggle logic.
  • Improves maintainability by reducing reliance on generic CSS classes with overloaded meaning.

Steps to reproduce

  1. Enable the Dark Mode Toggle module.
  2. Inspect the <html> element when toggling dark mode.
  3. Observe that the class="dark" attribute is added, rather than a unified data attribute.

Proposed resolution

Replace the use of class="dark" on the <html> element with a single custom data attribute, e.g., <html data-dmt-mode="dark"> or <html data-dmt-mode="light">

Remaining tasks

  • Update module code to set data-dmt-mode instead of class="dark". For naming consistency, rename the attribute data-dark-mode-source to data-dmt-source.
  • Update the README.md accordingly, instructing users to use the [data-dmt-mode="dark"] attribute.
  • Update the FunctionalJavascript, and add Unit and Kernel tests to confirm correct behavior.

User interface changes

No visible UI changes to end users.
Developers inspecting the DOM will see data-dmt-mode instead of a dark class attribute.

API changes

  • CSS/JS APIs should now target [data-dmt-mode="dark"] instead of .dark.
  • Any documented references to the dark class should be updated to reference the new attribute.

Data model changes

None. No changes will be made to the stored configuration or database schema.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

watergate created an issue. See original summary.

watergate’s picture

Issue summary: View changes
watergate’s picture

Issue summary: View changes

watergate changed the visibility of the branch 2.x to hidden.

watergate’s picture

Issue summary: View changes

watergate’s picture

Title: Use data-dark-mode attribute instead of class for dark mode toggle » Use data-dmt-mode attribute instead of class for dark mode toggle
watergate’s picture

Assigned: watergate » Unassigned

  • watergate committed 2605afcd on 2.x
    [#3549597] feat: Use data-dmt-mode attribute instead of class for dark...
watergate’s picture

Status: Active » Fixed

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

watergate’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.