[1 / 7] - Profile theming (foundation)

[TheSCREWEDSoftware]

Split from the main PR: #197

Split by Claude

Adds the Dark/Light mode toggle, remembered per-user in the WP DB, across all user + AC admin pages (light stays default). Ships the shared CSS and the character-colour helper (class/faction colours, level badges) that the other branches build on.

Summary by CodeRabbit

Release Notes

• New Features

  • Dark mode toggle added to admin bar for authenticated users
  • Theme system implemented with light and dark mode support across admin interface

• Style

  • Character list rows redesigned with improved layout and styling
  • Mail return interface overhauled with grid-based structure
  • Item restoration page styling enhanced
  • Comprehensive dark mode styling applied throughout admin components

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a per-user admin dark mode toggle stored in acore_dark_mode user meta, toggled via AJAX from the admin bar. Introduces an AcoreCharColors PHP utility class for WoW class/race color and expansion data. Overhauls main.css with a unified character row system, a grid-based mail return layout, and an item restoration page layout. Delivers two new CSS files (dark-mode.css, theme.css) providing comprehensive dark theming across admin UI, Bootstrap components, WP 2FA, myCRED, and plugin-specific pages.

Changes

Dark Mode Toggle + Character Row Theming

Layer / File(s)	Summary
AcoreCharColors utility class src/acore-wp-plugin/src/Utils/AcoreCharColors.php	New static class with lookup constants for WoW class/race names, per-class color palettes, race-to-faction mapping, a rowStyle() inline CSS builder, and level-to-expansion slug/label helpers.
Shared character row, mail return, and profile/item restore layouts src/acore-wp-plugin/web/assets/css/main.css	Replaces old per-page character order/unstuck CSS with a unified .acore-char-list/button.acore-char-row system; rewrites mail return to a #mail-return-layout grid with .mail-items-grid and .mail-item-slot; adds profile sub-page containers and #item-restore-layout with a sidebar+card grid including Wowhead anchor overlay handling.
DarkMode PHP hooks, AJAX toggle, and JS generator src/acore-wp-plugin/src/Hooks/Various/DarkMode.php, src/acore-wp-plugin/src/boot.php	Registers admin bar node with sun/moon icon, appends acore-dark-mode body class, enqueues stylesheets with nonce-keyed inline JS, injects late admin_head inline style blocks, implements wp_ajax_acore_toggle_dark_mode to flip user meta and return JSON, provides the JS click-handler generator, and conditionally injects theme.css on the WP 2FA setup wizard. Both new files are required in boot.php.
CSS custom properties and theme.css dark overrides src/acore-wp-plugin/web/assets/css/theme.css	Defines :root light palette and body.acore-dark-mode dark palette including --q0..--q7 item-quality variables; adds scoped dark rules for danger buttons, item-restore quality borders, security page tables, mail return surfaces, embedded/standalone WP 2FA controls, myCRED log/history, TOTP key box, .acore-2fa-disabled/.acore-2fa-required-note components, connection table highlighting, admin-bar toggle, form inputs, primary/secondary buttons, and myCRED tab/checkbox overrides.
dark-mode.css supplemental overrides src/acore-wp-plugin/web/assets/css/dark-mode.css	Provides additional dark-mode rules for profile/security/item-restore headings and tables, the expansion selector UI, Bootstrap CSS variable overrides, global WP container colors, character list rows, form controls, table striping, button and notice variants, myCred widgets, Scroll of Resurrection page, expansion level badges, and the Mail Return UI.

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant AdminBar as WP Admin Bar
  participant InlineJS as acore_dark_mode_js
  participant AjaxHandler as wp_ajax_acore_toggle_dark_mode
  participant UserMeta as WP User Meta

  User->>AdminBar: Click dark mode toggle
  AdminBar->>InlineJS: click event on `#acore-dark-mode-toggle`
  InlineJS->>AjaxHandler: POST action=acore_toggle_dark_mode + nonce
  AjaxHandler->>AjaxHandler: check_ajax_referer()
  AjaxHandler->>UserMeta: get_user_meta(acore_dark_mode)
  UserMeta-->>AjaxHandler: current value ('0' or '1')
  AjaxHandler->>UserMeta: update_user_meta(flipped value)
  AjaxHandler-->>InlineJS: JSON {dark: true/false}
  InlineJS->>AdminBar: toggle body.acore-dark-mode class
  InlineJS->>AdminBar: update icon (☀/🌙) and title text

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

🐇 Hippity-hoppity, dark or light?
A moon and a sun toggle left and right!
The rabbit dons dark mode with a click,
CSS variables do the trick.
Colors for classes, factions galore —
AzerothCore's never looked better before! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 23.08% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title '[1 / 7] - Profile theming (foundation)' accurately describes the PR's primary objective of introducing foundational profile theming functionality with a dark/light mode system.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/acore-wp-plugin/src/Utils/AcoreCharColors.php`:
- Around line 84-93: The rowStyle() method in AcoreCharColors.php is including
inline border declarations (border-top, border-right, border-bottom,
border-left) that override the active-state border styling rules defined in
main.css. Remove all border-related properties from the sprintf statement in the
rowStyle() method, keeping only the CSS custom properties declarations
(--cls-light, --cls-dark, --faction-color). This allows the stylesheet to
control the border styling for active and inactive states without inline style
conflicts.

In `@src/acore-wp-plugin/web/assets/css/dark-mode.css`:
- Around line 114-124: The `.acore-expansion-option input[type="radio"]`
selector hides the radio inputs for visual purposes, but there is no visible
focus indicator for keyboard users to know which option has focus. Add focus
styling for these hidden radio inputs using the `:focus-visible` pseudo-class
selector on the `.acore-expansion-option input[type="radio"]` element, and apply
visible focus styles (such as outline or border) to the associated visible
option container element. The same focus styling should be applied to all
similar hidden radio input patterns mentioned in the file (at the locations
indicated).

In `@src/acore-wp-plugin/web/assets/css/main.css`:
- Around line 691-695: The `.item-restore-grid` class currently hard-codes a
4-column layout that overflows on narrow screens. Add media queries below this
rule to make the grid responsive: for tablets and smaller devices, reduce to 3
columns using an appropriate mobile breakpoint, then further reduce to 2 columns
for even smaller screens, and finally to 1 column for the smallest mobile
widths. Adjust the grid-template-columns property at each breakpoint while
keeping the gap value consistent across all sizes.

In `@src/acore-wp-plugin/web/assets/css/theme.css`:
- Around line 590-596: The CSS rule for the `#search-submit` input selector in the
dark-mode section is too broadly scoped and will affect search buttons on
unrelated admin pages beyond just the myCRED page. Modify the selector by
nesting it under the .mycred-log-page class so that the background, border, and
color overrides for body.acore-dark-mode `#wpbody-content` input#search-submit
only apply when on the myCRED log page, consistent with the surrounding rules in
the stylesheet.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 77febdb6-202d-40c0-b6cf-b1fe4887cbcd

📥 Commits

Reviewing files that changed from the base of the PR and between 94af292 and d56d53d.

📒 Files selected for processing (6)

• src/acore-wp-plugin/src/Hooks/Various/DarkMode.php
• src/acore-wp-plugin/src/Utils/AcoreCharColors.php
• src/acore-wp-plugin/src/boot.php
• src/acore-wp-plugin/web/assets/css/dark-mode.css
• src/acore-wp-plugin/web/assets/css/main.css
• src/acore-wp-plugin/web/assets/css/theme.css

[TheSCREWEDSoftware]

The reviews are valid for this, but the are fixed in the on the way to latest PR and including he last PR #205