Donkere modus en kleurenpaletten

De donkere modus van Addofy schakelt CSS-variabelen om. Gebruik ze en je eigen schermen volgen het thema automatisch. Daarbovenop kun je een compleet kleurenpalet toevoegen.

Donkere modus voor je schermen

body.adba .myplugin-panel {
	background: var(--adba-surface);
	color: var(--adba-text);
	border: 1px solid var(--adba-border);
	border-radius: var(--adba-radius);
}

Voor kleuren die een eigen donkere waarde nodig hebben, gebruik je body.adba.adba-theme-dark en, voor het automatische thema, @media (prefers-color-scheme: dark) { body.adba.adba-theme-auto ... }.

Zet die stylesheet in de wachtrij via enqueue_external() met de dependency adba-module-darkmode-css. Een scherm van jou dat WooCommerce-admincomponenten gebruikt, kan meedoen met de donkere stijlen van WooCommerce via adba_darkmode_wc_fragments.

De tokens die je kunt gebruiken staan op de pagina CSS-tokens.

Kleurenpaletten (sinds 2.12.0)

De kleuren van de donkere en lichte modus komen uit een palet: vijf basiskleuren voor één schema. Sinds 2.25.0 horen paletten bij een familie met een donkere en een lichte variant. Addofy levert drie families mee:

• classic: de standaard. Donker classic (de grijze en blauwe donkere modus van vóór 2.12.0) en licht default.
• vibrant: grijs met oranje, paars en geel. Donker vibrant en licht vibrant-light.
• graphite: rustig, alleen oranje. Donker graphite en licht graphite-light.

De sitebeheerder kiest één familie onder Addofy > Voorkeuren. Gebruikers kiezen alleen licht, donker of automatisch; hun thema kiest de variant, en met automatisch volgt die het besturingssysteem zonder herladen.

Je eigen palet registreren

Een plugin of thema voegt met één aanroep een eigen familie toe. Addofy leidt elk kleurtoken af van de vijf basiskleuren en verschuift tekst- en randkleuren tot ze WCAG AA halen: 4,5:1 voor tekst, 3:1 voor randen en focus. De instellingen tonen welke tokens zijn verschoven.

// Registreert acme (donker) en acme-light, op elk moment vóór het eerste adminscherm.
adba_register_palette( 'acme', array(
	'label' => __( 'Acme', 'acme' ),
	'dark'  => array(
		'colors' => array(
			'background' => '#14161f',
			'text'       => '#f5f5f5',
			'accent'     => '#00c2a8', // links, focus, schakelaars, tellers
			'accent_2'   => '#3d5afe', // primaire knop, huidig menu-item; '' voor geen
			'hover'      => '#ffd166', // hover van links, iconknoppen, tabs en de primaire knop
		),
		// Optioneel: losse kleurtokens zelf zetten (toegestane lijst hieronder).
		'tokens' => array( '--adba-sidebar-bg' => '#0e1017' ),
	),
	'light' => array(
		'colors' => array(
			'background' => '#fafafa',
			'text'       => '#14161f',
			'accent'     => '#007a6a',
			'accent_2'   => '#3d5afe',
			'hover'      => '#3d5afe',
		),
		// Optioneel: een hovervulling van de primaire knop die afwijkt van de hover van links.
		'tokens' => array( '--adba-hover-fill' => '#ffd166' ),
	),
) );

// Hetzelfde via de action, één palet per keer; family koppelt ze.
add_action( 'adba_register_palettes', function ( \AddoBack\Design\PaletteRegistry $palettes ) {
	$palettes->add( 'acme', array( 'label' => 'Acme', 'scheme' => 'dark', 'colors' => array( /* ... */ ) ) );
	$palettes->add( 'acme-day', array( 'label' => 'Acme', 'scheme' => 'light', 'family' => 'acme', 'colors' => array( /* ... */ ) ) );
} );

Laat je light weg, dan leidt Addofy die af: achtergrond en tekst wisselen van plek, de accenten blijven en de donkere hoverkleur blijft de hovervulling van de primaire knop. De kaart zegt dan "Light automatisch". Is de donkere tekstkleur grijs, of moet de afleiding de tekstkleur of meer dan twee basiskleuren verschuiven, dan gebruikt de familie Classic licht en zegt de kaart "Alleen donker". De oudere vorm met scheme blijft werken.

Wat elke basiskleur wordt

Basiskleur	Wordt
background	--adba-gray-50 (pagina), de grijsschaal gemengd richting text, vlakken net lichter (donker) of wit (licht).
text	--adba-gray-900 en de tekst op lichte of donkere vlakken.
accent	--adba-accent, --adba-ring, --adba-accent-text (lichter of donkerder gemaakt voor 4,5:1 op een tint), --adba-on-accent.
accent_2	--adba-primary, --adba-accent-2, het huidige zijbalkitem (donker), het ingedrukte segment, de tint van de geselecteerde rij. Leeg: de tekstkleur vult de primaire knop en het huidige item krijgt een accentstreep.
hover	--adba-hover (links, iconen) en, tenzij het palet --adba-hover-fill zet, de hovervulling van de primaire knop. --adba-on-hover is de tekst op die vulling.

Token-overrides

Token-overrides accepteren alleen kleurtokens, met een waarde als #rgb, #rrggbb, een strikte rgb() of rgba(), of transparent. Al het andere wordt weggelaten, en gelogd als WP_DEBUG aan staat. De toegestane tokens zijn:

• de grijsschaal --adba-gray-25 tot --adba-gray-900
• --adba-bg, --adba-surface, --adba-surface-muted, --adba-surface-hover, --adba-segmented-on
• --adba-border, --adba-border-input, --adba-text, --adba-text-muted, --adba-badge-neutral
• --adba-accent, --adba-accent-text, --adba-ring, --adba-on-accent
• --adba-accent-2, --adba-accent-2-text, --adba-on-accent-2
• --adba-hover, --adba-hover-fill, --adba-on-hover, --adba-row-selected
• --adba-primary, --adba-primary-text
• --adba-success, --adba-warning, --adba-danger, --adba-info, de vier --adba-*-text-statuskleuren, --adba-on-danger, --adba-on-warning
• --adba-knob, de kleuren --adba-toast-*, --adba-sidebar-* en --adba-topbar-*
• --adba-overlay, --adba-shadow-color en --adba-shadow-strong

Welk palet actief is

Per schema is de volgorde:

1. Constante of omgevingsvariabele ADBA_PALETTE_DARK of ADBA_PALETTE_LIGHT (een palet-id).
2. Constante of omgevingsvariabele ADBA_PALETTE (een familie).
3. Een opgeslagen palet voor dat schema (palette.dark of palette.light), geschreven door oudere versies en door wp adba palette set <familie> --scheme=....
4. De instelling palette.family. Op multisite: netwerk (afgedwongen), site, netwerk (standaard).
5. classic.

Een palet-id staat voor zijn familie; een onbekend id valt terug op de standaard. De filter adba_active_palette beslist als laatste, per schema, rol of site. adba_palette_tokens past de afgeleide tokens aan vlak voor de uitvoer. Een update van vóór 2.25.0 maakt van het opgeslagen donkere palet de familie; een lichte keuze anders dan default blijft als override staan.

Kosten en uitvoer

De ingebouwde default en classic zitten in de stylesheet en kosten niets. Elk ander palet, de lichte varianten van vibrant en graphite inbegrepen, voegt één inline set regels toe met alleen de tokens die afwijken, een effen focusring en zijn hovervulling. Die komt na de core-stylesheet (licht, donker, automatisch en de Customizer) en wordt gecachet in de object cache als die er is. Een lichte variant met een eigen primair vlak zet ook het WordPress-accent (--wp-admin-theme-color, --wp-components-color-accent).

De body krijgt adba-palette-{id} voor het actieve lichte en donkere palet en adba-palette-family-{family}, zodat je CSS elk van beide kan targeten. TinyMCE en het canvas van de blokeditor nemen hun donkere kleuren uit het actieve palet; in licht krijgen links in TinyMCE het accent van een licht palet anders dan Classic. De theme-color-meta en de menu-iconen volgen beide varianten.

Controleer beide varianten van een familie vanaf de opdrachtregel:

wp adba palette check <familie>

Pluginkleuren: de automatische scan (sinds 2.31.5)

Plugins die Addofy niet kennen hebben nog vaste kleuren: een wit paneel, grijze tekst, een lichte rand. De experimentele module Pluginkleuren lost het meeste daarvan op zonder handwerk. Zet hem aan onder Addofy > Instellingen > Modules > Experimenteel.

• Wanneer hij scant: op de achtergrond (Action Scheduler, of WP-Cron zonder), nooit tijdens een paginaverzoek. Alle actieve plugins één keer als de module aangaat, een plugin bij activeren of bijwerken, en opnieuw als zijn hoofdbestand verandert.
• Wat hij doet: hij leest de stylesheets van de plugin (niet die voor de website, rechts-naar-links of een eigen donkere stylesheet) en schrijft per stylesheet één override naar uploads/addofy-colors/. Vaste achtergrond-, tekst- en randkleuren worden Addofy-tokens (--adba-surface, --adba-text, --adba-border, de grijsschaal en de statuskleuren), zodat ze light, dark, automatisch en het palet volgen.
• Wat hij laat staan: donkere vlakken zoals tooltips, witte tekst op gekleurde knoppen, gekleurde vlakken en merkkleuren, voorbeelden van documenten en e-mails, en selectors die Addofy zelf stijlt. Pluginbestanden veranderen nooit.
• Waar het laadt: een override laadt alleen naast de stylesheet van de plugin waar hij bij hoort, achter body.adba. Uitgesloten schermen, de veilige modus en de schermen van een compatibiliteitsadapter blijven zoals ze zijn.

Gereedschap > Pluginkleuren toont elke plugin met zijn status. Zet daar een plugin uit als zijn schermen er zonder scan beter uitzien, of scan hem opnieuw. Hetzelfde vanaf de opdrachtregel: wp adba colors scan|list|enable|disable|clear.

Gebruikt je plugin de tokens van Addofy al? Houd hem buiten de scan:

add_filter( 'adba_colorscan_plugins', function ( array $plugins ) {
	unset( $plugins['myplugin'] );
	return $plugins;
} );

adba_colorscan_token beslist per kleur (geef null terug om hem te houden), adba_colorscan_css past de gegenereerde CSS aan en adba_colorscan_done draait na elke scan.

Gerelateerd

• CSS-tokens
• Hooks voor shell, adminbalk en voorkeuren: adba_register_palettes, adba_active_palette en adba_palette_tokens.