Skip to content

Enhancement: Dark Mode#435

Open
baltinerdist wants to merge 22 commits intoamtgard:masterfrom
baltinerdist:feature/dark-mode
Open

Enhancement: Dark Mode#435
baltinerdist wants to merge 22 commits intoamtgard:masterfrom
baltinerdist:feature/dark-mode

Conversation

@baltinerdist
Copy link
Copy Markdown
Contributor

@baltinerdist baltinerdist commented Apr 3, 2026 •
edited
Loading

Summary

  • Adds comprehensive dark mode support across the entire ORK, activated via a toggle button in the nav bar or automatically via prefers-color-scheme: dark
  • Introduces CSS custom properties (--ork-*) for all colors, with light/dark value sets in orkui.css
  • Converts hardcoded hex colors to CSS variables across all templates, stylesheets, and inline styles
  • Adds What's New modal entry for 3.5.1 Owl (dark mode) and names the 3.5.0 release "Dragon"

Pages and components covered

Revised-frontend profiles: Player (Playernew), Kingdom (Kingdomnew), Park (Parknew), Unit

Reports: Active players, attendance, new player attendance, dues, top parks, ladder grid (knight group palettes — Battle/Sword/Crown/Flame/Serpent)

Admin: Admin dashboard (.adm-* card/table/input/toggle system, .cp-* award admin modals), new player attendance, top parks

Events: Event create, event detail (checkin lock, heraldry upload modal, flatpickr calendar title, attendance edit modal)

Attendance: Park attendance (form cards, chart cards, edit modal, Quick Add popup), Kingdom attendance

Other: Login form, search, player status reconciliation (.psr-*), player reconcile table (.rc-*), searchable award dropdown (.aw-*)

Key changes

  • orkui.css: ~1,400 lines of dark mode variable definitions and overrides (DataTables, jQuery UI, information tables, nav, footer, global elements)
  • revised.css: ~2,700 lines of dark mode support for all revised-frontend components (heroes, cards, stat rows, tabs, modals, tables, charts, maps, autocomplete, award dropdown, admin card/table system)
  • reports.css: ~800 lines of dark mode for Highcharts, report tables, filter controls, and stat cards
  • default.tpl: Theme toggle button in nav, early data-theme attribute injection to prevent flash
  • default.theme: Dark mode overrides for nav bar, dropdowns, search, footer, What's New modal
  • revised.js: orkInitTheme() function for theme state management and toggle wiring
  • All .tpl files: Hardcoded inline color/background values replaced with var(--ork-*) equivalents; prefers-color-scheme fallback blocks for all components
  • whats_new_content.php: 3.5.1 Owl What's New entry; 3.5.0 renamed to Dragon

Bug fixes included

  • Quick Add modal (Attendance park) was fully white in dark mode
  • Ladder grid Master rank indicator (#7c3aed) was unreadable on dark backgrounds — changed to #c4b5fd
  • prefers-color-scheme gaps filled in Login, Eventnew, and Player Status Reconciliation templates (system-dark users with no explicit preference set now see full dark mode)

Test plan

  • Toggle dark mode via nav button — verify all pages render correctly
  • Verify prefers-color-scheme: dark auto-detection works when no explicit theme is set
  • Check Player, Kingdom, Park, and Unit profile pages (heroes, cards, tabs, modals)
  • Check Reports pages (charts, tables, filters, ladder grid knight groups)
  • Check Login, Search, Attendance (park/kingdom), and Event pages
  • Check Admin dashboard (stat cards, data tables, form inputs, toggles)
  • Verify DataTables (pagination, search, sorting) render correctly in dark mode
  • Verify modals (edit, add member, heraldry upload, Quick Add, award admin) render correctly
  • Verify searchable award dropdown (.aw-*) renders correctly in dark mode
  • Test light mode is unaffected (no regressions)
  • Test mobile responsive layouts in dark mode
  • Verify What's New modal appears on first login after update
  • Verify Release Notes page shows 3.5.1 Owl and 3.5.0 Dragon in correct order

🤖 Generated with Claude Code

@baltinerdist
Copy link
Copy Markdown
Contributor Author

baltinerdist commented Apr 14, 2026

Pushed fe2263f — dark mode polish based on comprehensive QA:

Fixed

  • .kn-modal-title heading reset — Kingdomnew modal titles (Add Award, Make a Recommendation, Add/Edit Park, Edit Officers, Kingdom Administration, Markdown Reference, Confirm, Create Player, Move/Merge/Claim, Add Tournament) were inheriting the global orkui.css h1–h6 gray box (background:#eee; border:1px solid #ccc; text-shadow). Added a universal reset matching the existing .pk-modal-title / .pn-modal-title pattern.
  • .pronoun-custom-btn — was hardcoded background:#f7fafc; color:#4a5568; border:#e2e8f0. Switched to var(--ork-bg-secondary/--ork-text-secondary/--ork-border) so it themes correctly in both modes.
  • .kn-award-type-btn.kn-active — hardcoded background:#ebf4ff; color:#2c5282. Added html[data-theme=\"dark\"] variant (rgba(99,179,237,0.15) with #90cdf4 text).
  • Unit_create disclaimer modal — the confirm dialog and info banner use inline styles (background:#fff, background:#ebf8ff, etc.) that can't be overridden by class-based rules. Added an html[data-theme=\"dark\"] <style> block at the top of the template with targeted !important overrides for #uc-legacy-confirm, its inner card, the Go Back button, and the blue info banner.

Verified clean (no fixes needed)
Ran a multi-page QA pass across Home, Playernew (all tabs), Kingdomnew, Parknew, Reports/roster, Reports/guilds, Search (index/unit), Admin index, Admin/player, Attendance/park, Login, and Login/forgotpassword in both themes. Everything else renders correctly — no contrast issues, no leftover white/light backgrounds, no console errors.

Login as any user via the existing bypass, toggle the header theme button, check the affected modals.

Avery Krouse and others added 19 commits April 15, 2026 12:51
@claude
Enhancement: Dark Mode
769ab70 
Implements a full dark mode across all ORK3 pages with toggle persistence.

- Add CSS custom property architecture (--ork-* vars) in orkui.css so dark mode
  vars are available on every page (home, reports, legacy templates, revised-frontend)
- Add html[data-theme="dark"] overrides and @media (prefers-color-scheme: dark) block
- revised.css: convert all base element rules (.kn-stat-card, .kn-card, .kn-tabs,
  .kn-tab-nav, .kn-park-tile, calendar, map sidebar, modals) from hardcoded #fff to
  CSS vars so dark mode redefines at root — no per-component override wars
- Kingdomnew, Parknew, Playernew templates: inline style specificity fixes scoped
  with #theme_container for officer/sidebar accent link colors; hero stat numbers use
  extracted hue vars
- default.theme: FOUC-prevention inline script in <head> sets data-theme before
  render; #ork-theme-toggle button in nav; self-contained toggle JS with sun/moon
  SVG icons and localStorage persistence for all non-revised-frontend pages
- default.tpl (home page): hm-* classes converted to CSS vars; dark mode card/stat
  text with subtle shadow
- reports.css: DataTables rows, pagination, filter cards, sidebar all dark mode aware
- revised.js: orkIsDarkMode(), orkInitTheme(), orkUpdateThemeIcon() helpers; hero
  color extraction adjusted for dark vs light; toggle reapplies all hero colors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
Enhancement: Dark mode compatibility across all pages
2efe9d1 
Add comprehensive dark mode support using CSS custom properties.
Covers DataTables, reports, search, attendance, login, admin pages,
and revised-frontend profiles (Player, Kingdom, Park, Unit).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@claude
Enhancement: Add What's New entry for Dark Mode (3.5.1 Owl) and renam…
ba30813 
…e 3.5.0 to Dragon

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
Enhancement: Dark mode compatibility across new upstream pages and mo…
8a4856a 
…dals

- revised.css: fix stray conflict marker in @media block; add .aw-* award
  dropdown dark mode (the white dropdown visible in screenshot)
- Admin_index.tpl: dark mode for .cp-* award admin modals
- Eventnew_index.tpl: dark mode for event icon buttons, checkin lock warning,
  heraldry upload modal, flatpickr title, and .att-edit-* attendance modal
- Eventcreate_index.tpl: dark mode for flatpickr calendar title
- Playernew_reconcile.tpl: dark mode for .rc-* reconcile table and autocomplete
- Login_index.tpl: dark mode for form panel, inputs, OAuth button, notices
- Reports_laddergrid.tpl: dark mode for knight group palette (Battle/Sword/
  Crown/Flame/Serpent), knight cell highlights, hover states, filter pills,
  sticky player column, and range slider track
- Attendance_kingdom.tpl + Attendance_park.tpl: dark mode for form cards,
  chart cards, and edit attendance modal
- Reports_player_status_reconciliation.tpl: dark mode for .psr-* section
  headers, bulk bar, and status indicators

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
Bugfix: Dark mode for Quick Add modal and Master rank indicator
0823239 
- Attendance_park.tpl: add dark mode for .att-qa-modal, table headers/cells,
  select inputs, and empty state (Quick Add popup was white on dark pages)
- Reports_laddergrid.tpl: fix .lg-cell-master color (#c4b5fd) — was rendering
  bright violet #7c3aed against dark backgrounds

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
Bugfix: Fill prefers-color-scheme gaps in Login, Eventnew, and PSR te…
c3bc6a3 
…mplates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
Enhancement: Dark mode for .adm-* admin/data-table component system
3d00f54 
Adds html[data-theme="dark"] overrides and prefers-color-scheme fallbacks
for all .adm-* classes in revised.css: cards, table headers/rows/hover,
form inputs/selects, toggle track, icon buttons, footer, ghost button,
page title, and breadcrumb.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@kenwalker @claude
Enhancement: Dark mode polish across kingdom, park, and search pages
e20ba38 
- Fix h1-h6 heading dark backgrounds and URL input field styling
- Bump accent lightness vars for better contrast with purple heraldries
- Fix kn/pk-table headers, body text, and row hover in dark mode
- Fix kn/pk load-more and pagination buttons (white bg → dark card)
- Fix park events calendar dark mode (bg, borders, buttons, day numbers)
- Fix event filter chips (Kingdom/Park/Park Days) in dark mode
- Fix event list links using consistent blue instead of HSL-derived warm tones
- Fix map/hero button color bleeding from global dark anchor rule
- Fix kingdom About section body text invisible in dark mode
- Fix admin modal: Park Titles new row, award alias/custom award forms, operations section
- Fix class masters report filter pills in dark mode
- Fix player search row hover color (was bright blue, now subtle dark)
- Add dark mode for pk-recs DataTable (headers, rows, pagination)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@kenwalker @claude
Enhancement: Dark mode polish and bug fixes across reports, units, an…
2cf585d 
…d player tools

- Dark mode: guild filter pills, event attendance table/filter, park distance matrix (table chrome + legend badges + cell text), new player attendance chart tooltips/axes
- Dark mode: roles & permissions player picker, claim park modal text, create event markdown hints modal, flatpickr time picker, gear dropdown, merge player summary/warning, award rec buttons
- Dark mode: player status reconciliation section headers, DataTables search inputs across multiple report pages
- Dark mode: FullCalendar list view (park/kingdom), add event markdown help overlay
- Dark mode: unit list New Unit button switched to rp-btn-ghost for header consistency
- Bugfix: PSR report cache now busted after player status change (passes ScopeType/ScopeId from JS)
- Bugfix: player details cache busted on status change
- Bugfix: Unit page arrow key nav first item stays highlighted (focusIdx > 0 → >= 0)
- Bugfix: merge/move player autocomplete dropdown positioning and overflow clipping
- Enhancement: arrow key navigation for merge player modals (kingdom and park contexts)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@kenwalker @claude
Enhancement: Dark mode fixes — CSS comment corruption, modal styling,…
f83dd63 
… admin pages

- Fix unclosed CSS block comment in Kingdomnew and Parknew that silently
  nullified ALL dark mode rules in both templates (Python @media strip left
  the /* header comment without a closing */)
- Fix Playernew orphaned comment header left by same strip script
- Add dark mode for Park attendance modal (pk-att-*): table headers, qa
  inputs/selects, entered-today table, scope buttons, feedback banners,
  edit-row highlight, inline select/credits
- Add dark mode for Add Award modal: Awards/Officer Titles toggle, rank
  pill states (held/suggested/selected), officer chips, form feedback
- Add pn-rank-pill variant states (held/suggested/selected) for Player
  page Recommend an Award modal
- Add date input (type=date) to pn-acct-field base rule so it gets
  consistent border/padding/bg styling
- Add dark mode for Admin index page: trend stat cards, section dividers,
  action cards with icon color tints, report list, kingdom overview table
- Add dark mode for Admin/permissions global page: kingdom tiles, table,
  role badges, revoke buttons, explainer, autocomplete
- Fix rp-section-heading and rp-row-summary totals row in park attendance
  explorer report
- Add kn-bare-heading to bare h4 elements in Parknew sidebar cards and
  event modal; fix kn-report-group h5 dark mode background reset

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@kenwalker @claude
Enhancement: Dark mode Option 1 refactor — strip @media blocks, JS th…
3a7a451 
…eme engine

Complete the Option 1 dark mode architecture: JS sets data-theme="dark" for
both manual dark and OS-auto-dark, eliminating all @media (prefers-color-scheme)
parallel rule sets.

CSS changes:
- Remove all @media (prefers-color-scheme: dark) blocks from orkui.css,
  reports.css, and all default/revised-frontend templates (~100KB of
  duplicate rules removed)
- orkui.css: rewrite dark mode as html[data-theme="dark"] selectors;
  add datepicker hover/highlight/active states; paginate_button.current
- reports.css: rewrite dark mode; add paginate_button.current override
  scoped to .rp-table-area; add jQuery UI datepicker ID-scoped rules
- Attendance, Reports, Search, Event templates: strip @media blocks

JS changes (revised.js + default.theme):
- orkInitTheme(): detect OS preference via matchMedia when no stored pref
- Toggle cycle: null→dark→light→auto, keyed off localStorage not data-theme
- orkUpdateThemeIcon(): read localStorage so auto mode always shows the
  auto half-circle icon (not moon) regardless of OS dark preference
- Add matchMedia change listener for live OS preference updates
- Apply hero gradient recolor on theme change

Template additions:
- Login_forgotpassword.tpl: full dark mode CSS for fp-* form classes
- default.tpl: fix hm-kingdom-card.hm-pinned border to use --ork-link
- Eventnew_index.tpl: dark mode for event detail page components
- Eventcreate_index.tpl: strip @media block
- Playernew_reconcile.tpl: strip @media block

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@kenwalker @claude
Update: Clarify dark mode toggle description in What's New
715bfee 
Describe the three-mode cycle with icon names so users know what
the half-circle auto icon means.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@kenwalker @claude
Bugfix: Replace malformed auto-mode SVG with correct half-circle icon…
b9c91f1 
… in theme toggle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@kenwalker @claude
Enhancement: Sort kingdom lists by meaningful name, ignoring common p…
dff77cb 
…refixes like 'The Kingdom of'

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
Bugfix: Dark mode polish for kn modal titles, pronoun button, award t…
1c737ab 
…ype toggle, unit disclaimer

- Add .kn-modal-title heading reset so Kingdom modal titles no longer inherit the global h3 gray box from orkui.css
- Switch .pronoun-custom-btn to CSS custom properties so it themes correctly in dark
- Add dark variant for .kn-award-type-btn.kn-active (was hardcoded light blue)
- Override Unit_create disclaimer modal inline styles under html[data-theme="dark"]

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@kenwalker @claude
Bugfix: Dark mode for Create Company modal in Unit list and Search un…
02e913e 
…it pages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@kenwalker @claude
Bugfix: Dark mode for autocomplete selection highlight on Player and …
fdb73e5 
…Park award modals

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@claude
Bugfix: Dark mode for .unimplemented blocks and .info-container h3 te…
e4737f5 
…xt shadow

On Admin/player (and other legacy admin pages that use orkui.css primitives) the .unimplemented wrapper kept its hardcoded light #f8f8f8 background, which lit up a white band around the Dues notice and the Dues Paid / Dues Semesters rows in dark mode. Add a scoped html[data-theme="dark"] override for the .unimplemented selector group so those blocks pick up a matching dark gray.

The same pages also showed embossed-looking section headers because the existing html[data-theme="dark"] .info-container h3 rule overrode the background and color but let the global h3 "text-shadow: 0px 2px 3px #fff" bleed through. Reset text-shadow in the dark override so section titles render flat.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@claude
Enhancement: Bold heraldry in Park/Kingdom heroes with auto-trim on u…
8dc800c 
…pload

Park and Kingdom profile heroes now render heraldry as a large, borderless
image with layered drop-shadow instead of the bordered 110px tile. Shield
height 156px desktop / 128px tablet / 96px mobile. Subtle radial vignette
behind the image keeps JPG heraldry from looking pasted onto the blue hero.
Admin edit button reanchored to the flex item as a blurred pill.

Added fully-transparent-edge trim to the upload pipeline so uploaded
heraldry fills the shield slot instead of leaving empty margins:

- Common::gd_trim_transparent (PHP/GD) — pixel-exact imagecrop, preserves
  aspect ratio and alpha. Returns original resource if nothing to trim.
- store_heraldry now trims every PNG heraldry before write, covering all
  Set*Heraldry paths (browser upload, URL fetch, base64).
- trimTransparentEdges (JS) — canvas drawImage blit with matching src/dst
  dimensions (no resampling). Runs before resizeImageToLimit in the kn/pk
  upload handlers so smaller payloads go over the wire.
- heraldry-trim-backfill.php — one-shot CLI to retroactively trim existing
  heraldry files, sharing the same GD helper. --dry-run, --only, --verbose.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Avery Krouse and others added 3 commits April 15, 2026 12:59
@claude
Enhancement: Dark mode for PR amtgard#454 additions + What's New QoL …
4aaf5d0 
…notes

Upstream master brought in new UI (Achievement/Association award type
buttons, association helper note, email spell-checker banner, Event RSVP
sign-in credits + waivered column, attendance stat-card tooltips, and
weekly/monthly view toggle). This commit adds the matching dark-mode
overrides and adds a quality-of-life bullet to the 3.5.1 What's New
modal with a longer release-notes-only breakdown.

- revised.css: dark mode for .esc-suggestion banner, #*-award-givenby-note
  (inline-style overrides with !important), and .pk-att-ac-inactive-badge
- reports.css: dark mode for .rp-stat-tip-icon / .rp-stat-tip-text
  (inverted to light chip on dark bg) and .rp-view-btn weekly/monthly toggle
- Eventnew_index.tpl: dark mode for #ev-rsvp-credits input, its label,
  and the .ev-rsvp-th-tip waivered tooltip
- whats_new_content.php: add short "Quality of Life Updates" bullet shown
  in the modal plus six notes_only entries with detailed bullets that
  only render on the Release Notes page
- default.theme: skip items flagged notes_only when rendering the modal

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@claude
Bugfix: Use FA5-compatible icons for 3.5.1 release notes; drop herald…
7b75e99 
…ry bullet

fa-wand-magic-sparkles is FA6 only and rendered as a missing glyph under
the FA 5.8.2 stylesheet. Swap to FA5 icons across the new release-notes
items and remove the heraldry upload bullet per request.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@claude
Bugfix: Swap fa-spell-check (Pro-only) for fa-keyboard in release notes
7c64683 
fa-spell-check is not included in Font Awesome 5.8.2 Free, so the
Typo-Catching Email Field item rendered with an empty icon box.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@baltinerdist @kenwalker