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
- Enable the Dark Mode Toggle module.
- Inspect the
<html>element when toggling dark mode. - 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-modeinstead ofclass="dark". For naming consistency, rename the attributedata-dark-mode-sourcetodata-dmt-source. - Update the
README.mdaccordingly, 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.
Issue fork dark_mode_toggle-3549597
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
Comment #2
watergate commentedComment #3
watergate commentedComment #5
watergate commentedComment #7
watergate commentedComment #8
watergate commentedComment #10
watergate commentedComment #12
watergate commented