Light versus dark is a design decision, not a shopping category. A newsroom wants a long line of text a guest will finish. A FiveM hub wants a night surface that matches the client they just alt-tabbed from. A support desk wants a reply box nobody loses at 14:00 in an office. Those are different contrast problems. XenForo 2.3 will serve both halves from one style if you let it. It will not tell you which half should greet a stranger.
This is the design article: contrast, gaming versus news versus support, variation-aware chips versus hard hex, when light should be the default, when dark should, and when both is the only honest answer. It is not how to enable the 2.3 variation switch. That sibling already owns Enable variations, the footer gadget, prefers-color-scheme, cookies, and the 2.3.8 note that preference survives logout. Read it for the mechanism. Do not expect this piece to re-teach the ACP path. It is not the upgrade-safe customization process. It is not the brand system. It is not a reason to buy FiveStyle or a second SKU named Dark.
Contrast is the product
Members say “dark mode.” What they need is enough contrast to finish the post. Official colour machinery still starts at Color palette chips and Basic colors roles. textColor on a content background is the pair that matters. Everything else — header, unread, quote, editor chrome — is that pair repeated.
Official Light / Dark style type is not “this is the dark theme.” It tells xf-intensify / xf-mix / xf-diminish which way to push. If the type is Light, intensify darkens. If the type is Dark, intensify lightens. Get this backwards and every hover goes the wrong way. The switcher article said that as a setup warning. Here it is a design warning: a “dark” page whose type is still Light will intensify into mud. A “light” page typed Dark will bleach its own buttons.
Hard hex does not participate. #1a1a1a in extra.less is the same on both halves. Official Less helpers xf-intensify and xf-diminish are variation-aware. @xf-textColor is a role that can hold two values once variations are on. Design rule:
| You wrote | What the eye gets | What you should have written |
|---|---|---|
#fff on a card both variations use |
A flashbang on dark; OK on light | @xf-contentBg or the Paper chip |
#111 on body text |
Invisible on dark Paper | @xf-textColor |
A raw rgba(0,0,0,.08) overlay |
Invisible on night surfaces | xf-diminish / a variation-aware border |
| Vendor screenshot hex pasted into extra.less | A brand fork | Palette chip, then a role |
If you cannot name the role, you are painting. Painting is how dark mode “breaks” and light mode looks dirty after a rebrand.
Aim for contrast you can verify with a guest window, not a score you invent. This article will not publish a WCAG number we did not measure on your palette. Operational test: body text on content background, unread title on row background, link on both, button label on button fill, quote bar on quote fill, editor toolbar on editor chrome — both variations. If any pair fails, fix the chip or the type switch before you write more extra.less.
Three boards, three defaults
Do not pick a default variation because Twitter is dark now. Pick it because of the room you run.
News, docs, and anything meant to be read
A newsroom article, a knowledge base page, a policy, a 1,800-word patch note: these are paper jobs. Light Paper, dark Ink, a measure the eye can hold at 11:00 at a kitchen table. Dark-as-default on a magazine is costume. Offer dark as the alternate for night readers. Keep the default light so a search guest sees a document, not a club.
Quotes, code, and tables need extra care on both halves. A light page with mid-grey quotes fails. A dark page with #222 quotes on #1a1a1a paper fails harder. Point those surfaces at chips. Check the compressed article on page 2 of comments — the newsroom already told you the OP stays. The OP must still contrast.
Gaming and FiveM hubs
Players alt-tab from a dark client. A white flash is a slap. Dark-as-default is reasonable. It is still not permission to ship grey-on-grey node titles or a FiveStyle-era header with unreadable unread dots.
Gaming dark that works:
- Night Paper that is not
#000. A lifted slate keeps shadows and unread states visible. - Ink that is off-white, not
#fffon every meta line (pure white fatigue is real on a 4K monitor at 01:00). - Steel (links, CTAs) a step lighter than the light-variation Steel so a link is not a dark blue hole.
- Node icons checked on read and unread. 2.3 SVG +
.m-faContent— nodes. A white icon on a white unread fill is a variation bug.
Gaming dark that fails: black paper, neon accents, every prefix a different glow, a ticker in 2014 yellow. That is a loading screen, not a forum. The roleplay architecture article already said do not buy a skin to get a #0b0f14 header. Build the dark half with chips.
Offer light as alternate. Support staff and daylight browsers exist even on a FiveM board. A member who files a ban appeal at work should not have to fight your night club.
Support, tickets, and office hours
A ticket queue is a work surface. Light default. Dark alternate if you must. Editor chrome is the usual miss: toolbar still Light-typed on a dark page, or textarea ink matching the textarea paper. If staff live in the editor, test the editor first, not the logo.
Login and lost-password forms often still look like Default even after you rebranded Board. If a second style is selectable, a guest in trouble may not be on your dark half. Turn the chooser off. One style, two variations.
When light wins, when dark wins, when both win
| Situation | Default variation | Alternate | Why |
|---|---|---|---|
| Magazine, docs, school, civic | Light | Dark | Reading is the product |
| FiveM / night-time game hub | Dark | Light | Client match; staff still get daylight |
| Support / tickets / billing | Light | Dark optional | Office hours, forms, mail |
| Mixed city + news | Light, or follow OS | The other half | Guests from search should see paper |
| You cannot staff contrast QA | Light only | Off | One readable surface beats two broken ones |
| You can staff both and members asked | Either, plus the switch | The other | 2.3’s whole point |
“Follow OS” is a member expectation the switcher article already treated honestly: 2.3 hooks prefers-color-scheme; the short official styles page does not document a labelled tri-state. Do not invent one here. Design implication: if first paint follows the OS, both halves must be finished before you enable that behaviour. Shipping a polished light and a leftover dark is how a night-time laptop flashes a broken theme and the member blames XenForo.
If the matrix (style × variation × guest/Registered/staff) is too wide, turn off user style selection and serve one style with two variations. If even that is too wide, serve one variation well. That is an allowed design choice. It is better than two unreadable palettes and a third-party switcher.
Variation-aware colour versus a second style
Older shops sold Roleplay Dark and Roleplay Light, Empire and Dark Empire, as if night mode were a second SKU. It is not. Two complete styles are two outdated-template lists and two brand books. Official 2.3 variations were invented so you stop doing that.
Design consequences:
- Jobs stay. Paper is still Paper. You change the value, not the role.
- A property that is not variation-aware is a single value on both halves. That is when a light-only border survives on a dark thread. Either pick a token that works on both surfaces, or find the variation-aware control the vendor already exposed. Do not fork the template to invent a second border — that is the customization article’s merge queue.
extra.lessis never variation-aware by itself. Tokens andxf-intensify/xf-diminish, or you write both colours on purpose.- HTML widgets, notices, and landing HTML with inline colour will not flip. Classes + chips, or accept a one-theme poster.
HTML email is a style, not a variation. Dark public default does not make dark mail a good idea. Point mail at a light style. The branding article owns that pointer. Design sentence: mail is always a paper job.
Intensify and diminish as design tools
Official helpers xf-intensify and xf-diminish are not decoration functions. They are how a hover, a border, or a quote bar stays related to Paper when Paper has two values. On a light variation, intensify darkens a chip. On a dark variation, intensify lightens it. That is the whole trick. A hover that used darken(#eee, 8%) is a light-only hover. A hover that intensifies @xf-contentBg still exists at 01:00.
Design uses:
- Quote bar: diminish the content background, do not pick a third grey.
- Unread row: intensify Paper one step, not a hardcoded
#f3f3f3. - Button hover: intensify the button fill chip.
- Overlay scrim: a token with opacity that still contrasts Ink, not
rgba(0,0,0,.6)that vanishes on night Paper.
You write these in extra.less only when a property cannot. Most of the time the CSS-type group already exposes hover. Open the group. If there is one value, both variations share it — pick a token that survives, or accept the share. The switcher article already tabulated variation-aware versus one value. This article only insists you design the shared value, not hope.
What “works” looks like, surface by surface
You do not need a new testing matrix — the switcher article already printed one. This is the design failure on each row.
| Surface | Light failure | Dark failure |
|---|---|---|
| Forum list | Washed unread; grey on grey | Unread = paper; icons vanish |
| Thread body | Long line, low ink contrast | #fff fatigue; quote = paper |
| Editor | Fine (this is Default’s home) | Toolbar/textarea same colour |
| Member card | Banner text on photo | Banner CSS not a chip |
| Conversations | Unread = paper | Unread = paper (same bug, inverted) |
| Notices / widgets | Inline hex | Inline hex, worse |
| Login | Second style, not Board |
Same |
| Rarely a problem | Dark brick, or client invert |
Three sessions still apply: guest, throwaway Registered, staff. Staff-only ACP greys do not count. The mistakes article already told you that if you only test as admin, you ship admin’s board.
First paint: a dark-preferring laptop should not flash Paper-white if you claimed to follow OS. A light-preferring office laptop should not flash night. If you cannot get first paint honest, default to the variation your primary audience needs and let the gadget override. Honest is better than a white flash then a correction.
Gaming skins versus a dark variation
The FiveStyle review is the historical skin. Current RM gaming parents (Legend, Gamez, Pad in the August 2026 snapshot) are looks. None of them excuse a second style named Dark if the package already ships variations.
If a vendor still ships two complete styles instead of one style with two palettes, you are buying two merge jobs. Prefer the 2.3 package that documents variations. If you already own a pair, pick one as parent, enable variations, copy the dark chips into alternate, retire the sibling. The switcher article already gave that sunset. Design addendum: copy jobs, not every neon the old dark SKU used. A sunset is a chance to throw away the glow.
UI.X 2 ships light + dark as a framework story. That is a parent choice (and an add-on tax, and a rebuild that can hit too many open files). It is not automatically better contrast than Default’s variations plus your chips. Default plus a finished alternate beats a paid dark that fails the editor.
Discourse, phones, and the rest of the world
Discourse has its own colour scheme. If you run both, share jobs (paper, ink, steel), not a promise that both defaults match. A light XenForo newsroom next to a dark Discourse is fine if both are readable and the mark agrees. A dark XenForo and a default Discourse “because we didn’t get to it” is the fake-site feeling again.
Phones: official notices can hide below a width. Dark chrome plus a scrolling ticker is how a small screen becomes unusable. If the board is a reading product, light default on mobile is not cowardice. Responsive is already the core layout — do not install a mobile-only style. The switcher article already killed that idea.
PWA status bar: meta theme colour should not lie. Pick a value that is honest for the default variation.
Lifted slate, not OLED black
“True black” looks expensive on a phone ad. On a forum it hides unread, shadows, and the difference between a quote and the post. Design the dark Paper chip as a lifted slate: dark enough that a game player feels at home, light enough that a 1 px border and an unread row can still exist. Pure #000 is a last resort for a hero on a landing page, not for textColor’s neighbour.
The same is true in reverse. Light Paper is not #fff if your Steel link is a mid blue that disappears on pure white in sun glare. A slightly warm or cool paper — still obviously paper — gives Ink and Steel somewhere to sit. You will not get a named “cream” property. You will get a Neutral chip you own.
Member chrome you do not paint
You control chips. You do not control every byte a member pastes.
Signatures. Animated GIFs and white-on-transparent PNGs explode on the dark half. Staff rule: text + one link, or a mark that includes its own paper. The branding staff page already vetoes signature packs.
User banners and group colours. A rainbow that worked on light Default becomes a highlighter set on night Paper. Two banners (member, staff) on Steel / Ink. The ranks article owns the ladder; this article owns the veto.
Quotes of old hex. Members will paste #fff from Discord. You cannot stop them. You can stop staff HTML — notices, widgets, landing pages — from doing the same.
BB-code tables and pre. Core Less usually handles these if you did not override them with hex. If a table header is unreadable on only one half, you overrode a single-value property. Revert, then use a token.
Avatars and photos. You will not make every screenshot variation-aware. Give the frame contrast (border on a chip) so a pale screenshot does not vanish into Paper on light or a dark screenshot into night Paper.
Mixed board: city plus newsroom
Many FiveM hubs also publish patch notes. Mixed is the hard case. Default light and you slap the night-time player. Default dark and the search guest who opened a 2,000-word policy gets a club.
Honest mixed pattern:
- One style, both variations finished.
- Default follows what most first-time sessions are. If analytics say guests arrive on
/forums/news/from search, default light. If they arrive from Discord on the forum list at 22:00, default dark. The GA4 article is how you know; do not invent a number. - Featured cards and article bodies must pass contrast on both halves. A masonry cover that is a dark screenshot needs a caption in Ink, not in a hex that only works at night.
- The ticker stays off unless wipe week. Mixed boards already have two jobs. Motion is a third.
If you cannot finish both halves this month, default to the guest you cannot talk to (search, light, paper). Regulars will find the gadget. Strangers will not file a ticket titled “I thought the site was broken.”
Accessibility without a fake score
This article will not publish a WCAG ratio we did not run on your chips. It will tell you where contrast fails on forums even when a logo looks fine.
- Placeholder text in the editor and search box is the first thing to disappear on a dark half.
- Disabled buttons that used opacity on light become invisible on dark. Check Post reply after you submit once.
- Focus rings. If you removed outlines in extra.less because they were “ugly,” keyboard users on both halves are lost. Restore a ring that uses Steel, not a 1 px grey.
- Red error text on a red-tinted dark paper. Danger is a chip with a job, not
#f00on#300. - Link vs Ink. Underlines or a Steel that is clearly not body text. Dark mode that relies on hue alone fails for a lot of eyes.
If a member tells you they cannot read the board, believe them. Flip the other variation in front of them. If both fail, your Ink/Paper pair is wrong. If only one fails, that half is unfinished — do not tell them to “use the other theme.”
A decision hour
You are about to announce “we have dark mode” or “we redesigned.”
- Write the board type in one word: news, game, support, mixed.
- Pick the default from the table above. Do not pick “both” as a default. Both is a switch. One half still loads first.
- Confirm variations are already enabled on the public child. If they are not, stop and do the switcher article. Come back.
- Recolour chips for the default half until body, unread, link, button, quote, editor pass the eye test.
- Recolour the other half. Same jobs. Different values. Style types Light / Dark correct.
- Search extra.less, widgets, notices, landing HTML for
#. Fix or delete. - Mail still light.
- Guest OS-light and OS-dark. Guest flip. Registered flip. Staff last.
- If either half fails and you cannot staff a fix this week, turn that half off (or leave variations disabled and ship one readable surface). Announce a finished theme, not a broken switch.
Step 9 is the design maturity test. Shipping a toy dark mode is worse than shipping paper.
What this is not
It is not a ranked “best dark theme 2026.” It is not permission to fork PAGE_CONTAINER for a hero that is dark after 18:00. It is not a second language pack. It is not “install Style B for mobile.” It is not a third-party switcher. It is not the performance article — though a huge extra.less of duplicated light/dark hex will cost you a global CSS invalidate.
Vendor dark, Default dark, and “it looks fine on my laptop”
Three ways a dark half arrives. They are not equal.
Default’s alternate, chips you set. You own both values. Contrast bugs are your chips. This is the cheapest honest dark mode.
A 2026 gaming parent (Legend, Gamez, Pad) with variations. The vendor set the first dark Paper. You still override on the child if unread vanishes. You still check the editor. You do not assume a $30 skin finished QA for your notice HTML.
A leftover Dark style from 2021. Sunset it. Copy jobs into alternate. Retire the sibling. The FiveStyle path is the same even if the zip had a different name.
“It looks fine on my laptop” is how staff ship a dark half that fails on a cheap phone in a kitchen. Test a mid-range phone, a bright office monitor, and the 4K set a night player actually uses. The switcher matrix is the list. This paragraph is why you do not skip the phone: OLED plus #000 Paper plus #fff Ink is a migraine, not a brand.
Checklist
- Board type named (news / game / support / mixed) and a default variation chosen
- Mechanism already done per the switcher article — this page did not re-teach it
- Style type Light on the light half, Dark on the dark half
- Body / unread / link / button / quote / editor checked on both halves
- No hard hex on shared surfaces; tokens and
xf-intensify/xf-diminish - One public style; no Dark sibling SKU
- HTML email stays a paper job
- First paint honest, or documented that it is not
- Gaming neon vetoed; news measure respected
- If QA is thin, one finished surface rather than two broken ones
Takeaways
- Light versus dark is contrast for a job: paper for news and support, night surfaces for game hubs, both when you can staff both.
- Official style type Light/Dark exists so intensify/mix/diminish know which way to push. Hex in extra.less does not know.
- 2.3 variations are the design system. Two paid styles are a 2.2 habit. How to flip the switch is already written.
- Mail is always light. The brand stays the same chips on both halves.
- A finished single surface beats a fashionable broken pair.
Pick the default the stranger needs. Make the other half honest or omit it. Then stop decorating and go publish something worth reading in either light.