Hello
The Translations of the Colors in the Colors Settings for Themes in the Admin-Panel are working omly partly.
The first Layer is working, The second to. But the colors themself only appear in French no matter which Language, even if I rename the language Folder.
Here is a Screenshot.
I'm a little confused what you mean the "colors" are changing no matter the language.
de.json and changing those into German. The labels aren't changing because it's missing the proper JSON keys to actually render as that, which defaults back to French.Edited on Jan 19, 2026 By Gavin .
What is not understandable at Translation?
I am trying to Translate it to German as there are others try to Tanslate i it to chinese or englisch. Why should anyone do that if it only get displayed in french.
BtW. The Colors and their functions not self-explaining.
Never mind, I understand what you mean, the configurations for the themes aren't selecting the right file when translating I had to see for myself to understand what you are asking. Yeah it's doing the same thing. I'm looking into the code to see where the the translation is going wrong
With the color changes, it changes the the pages look base on the default theme, light theme, and dark theme both foreground and background.
Maybe because there isn't a translation for it, I found here its located in the app/Config/ThemeColorsConfig.php. Basically modify the language files won't do anything because the languages are static.
/**
* Définition complète de TOUTES les 29 variables CSS
*
* Structure pour chaque variable :
* - css_vars: Variables CSS générées (nouveau + ancien format)
* - default: Valeur par défaut (utilisée si non définie dans theme.json)
* - category: Catégorie pour l'organisation UI
* - label: Libellé pour l'admin
* - description: Description pour l'admin
*
* ⚠️ IMPORTANT : Ajouter une ligne ici suffit pour qu'elle soit
* automatiquement gérée partout dans l'application !
*
* @return array
*/
public static function getAllVariables(): array
{
return [
// ==========================================
// COULEURS PRINCIPALES (6)
// ==========================================
'primary_color' => [
'css_vars' => ['--color-primary', '--primary-color'],
'default' => '#007bff',
'category' => 'system',
'label' => 'Couleur primaire',
'description' => 'Couleur principale du thème (boutons, liens)',
'generate_variants' => true, // Générer dark, darker, rgb
],
'secondary_color' => [
'css_vars' => ['--color-secondary', '--secondary-color'],
'default' => '#6c757d',
'category' => 'system',
'label' => 'Couleur secondaire',
'description' => 'Couleur secondaire du thème',
'generate_variants' => true, // Générer dark, rgb
],
'success_color' => [
'css_vars' => ['--color-success', '--success-color'],
'default' => '#28a745',
'category' => 'system',
'label' => 'Couleur succès',
'description' => 'Messages de succès, confirmations',
'generate_variants' => true,
],
'danger_color' => [
'css_vars' => ['--color-danger', '--danger-color'],
'default' => '#dc3545',
'category' => 'system',
'label' => 'Couleur danger',
'description' => 'Erreurs, suppressions, avertissements critiques',
'generate_variants' => true,
],
'warning_color' => [
'css_vars' => ['--color-warning', '--warning-color'],
'default' => '#ffc107',
'category' => 'system',
'label' => 'Couleur avertissement',
'description' => 'Avertissements, alertes non critiques',
'generate_variants' => true,
],
'info_color' => [
'css_vars' => ['--color-info', '--info-color'],
'default' => '#17a2b8',
'category' => 'system',
'label' => 'Couleur info',
'description' => 'Messages informatifs, astuces',
'generate_variants' => true,
],
// ==========================================
// BACKGROUNDS LIGHT MODE (5)
// ==========================================
'bg_primary' => [
'css_vars' => ['--bg-primary'],
'default' => '#ffffff',
'category' => 'background_light',
'label' => 'Fond principal (clair)',
'description' => 'Fond principal des pages en mode clair',
],
'bg_secondary' => [
'css_vars' => ['--bg-secondary'],
'default' => '#f8f9fa',
'category' => 'background_light',
'label' => 'Fond secondaire (clair)',
'description' => 'Fond des cartes et sections en mode clair',
],
'bg_tertiary' => [
'css_vars' => ['--bg-tertiary'],
'default' => '#e9ecef',
'category' => 'background_light',
'label' => 'Fond tertiaire (clair)',
'description' => 'Fond des éléments au survol en mode clair',
],
'bg_dark' => [
'css_vars' => ['--bg-dark'],
'default' => '#2c3e50',
'category' => 'background_light',
'label' => 'Fond sombre (clair)',
'description' => 'Fond des headers/footers en mode clair',
],
'bg_darker' => [
'css_vars' => ['--bg-darker'],
'default' => '#1a252f',
'category' => 'background_light',
'label' => 'Fond très sombre (clair)',
'description' => 'Fond des éléments nécessitant un fort contraste',
],
// ==========================================
// TEXTES LIGHT MODE (5)
// ==========================================
'text_primary' => [
'css_vars' => ['--text-primary'],
'default' => '#212529',
'category' => 'text_light',
'label' => 'Texte principal (clair)',
'description' => 'Texte principal en mode clair',
],
'text_secondary' => [
'css_vars' => ['--text-secondary'],
'default' => '#6c757d',
'category' => 'text_light',
'label' => 'Texte secondaire (clair)',
'description' => 'Texte secondaire, métadonnées',
],
'text_light' => [
'css_vars' => ['--text-light'],
'default' => '#adb5bd',
'category' => 'text_light',
'label' => 'Texte clair',
'description' => 'Texte sur fond sombre',
],
'text_muted' => [
'css_vars' => ['--text-muted'],
'default' => '#868e96',
'category' => 'text_light',
'label' => 'Texte discret (clair)',
'description' => 'Texte peu important, désactivé',
],
'text_white' => [
'css_vars' => ['--text-white'],
'default' => '#ffffff',
'category' => 'text_light',
'label' => 'Texte blanc',
'description' => 'Texte blanc sur fond sombre',
],
// ==========================================
// BORDURES (3)
// ==========================================
'border_color' => [
'css_vars' => ['--border-color'],
'default' => '#dee2e6',
'category' => 'borders',
'label' => 'Bordure normale',
'description' => 'Couleur des bordures par défaut',
],
'border_color_light' => [
'css_vars' => ['--border-color-light'],
'default' => '#e9ecef',
'category' => 'borders',
'label' => 'Bordure claire',
'description' => 'Bordures subtiles, séparateurs légers',
],
'border_color_dark' => [
'css_vars' => ['--border-color-dark'],
'default' => '#ced4da',
'category' => 'borders',
'label' => 'Bordure foncée',
'description' => 'Bordures marquées, encadrements',
],
// ==========================================
// DARK MODE - BACKGROUNDS (5)
// ==========================================
'dark_bg_primary' => [
'css_vars' => ['--dark-bg-primary'],
'default' => '#1a1a1a',
'category' => 'background_dark',
'label' => 'Fond principal (sombre)',
'description' => 'Fond principal en mode sombre',
],
'dark_bg_secondary' => [
'css_vars' => ['--dark-bg-secondary'],
'default' => '#121212',
'category' => 'background_dark',
'label' => 'Fond secondaire (sombre)',
'description' => 'Fond des cartes en mode sombre',
],
'dark_bg_tertiary' => [
'css_vars' => ['--dark-bg-tertiary'],
'default' => '#2a2a2a',
'category' => 'background_dark',
'label' => 'Fond tertiaire (sombre)',
'description' => 'Fond au survol en mode sombre',
],
'dark_bg_dark' => [
'css_vars' => ['--dark-bg-dark'],
'default' => '#0d0d0d',
'category' => 'background_dark',
'label' => 'Fond très sombre',
'description' => 'Fond des headers/footers en mode sombre',
],
'dark_bg_darker' => [
'css_vars' => ['--dark-bg-darker'],
'default' => '#050505',
'category' => 'background_dark',
'label' => 'Fond ultra sombre',
'description' => 'Fond des modals, overlays',
],
// ==========================================
// DARK MODE - TEXTES (5)
// ==========================================
'dark_text_primary' => [
'css_vars' => ['--dark-text-primary'],
'default' => '#e0e0e0',
'category' => 'text_dark',
'label' => 'Texte principal (sombre)',
'description' => 'Texte principal en mode sombre',
],
'dark_text_secondary' => [
'css_vars' => ['--dark-text-secondary'],
'default' => '#b0b0b0',
'category' => 'text_dark',
'label' => 'Texte secondaire (sombre)',
'description' => 'Texte secondaire en mode sombre',
],
'dark_text_light' => [
'css_vars' => ['--dark-text-light'],
'default' => '#808080',
'category' => 'text_dark',
'label' => 'Texte clair (sombre)',
'description' => 'Texte peu contrasté en mode sombre',
],
'dark_text_muted' => [
'css_vars' => ['--dark-text-muted'],
'default' => '#606060',
'category' => 'text_dark',
'label' => 'Texte discret (sombre)',
'description' => 'Texte désactivé en mode sombre',
],
'dark_text_white' => [
'css_vars' => ['--dark-text-white'],
'default' => '#ffffff',
'category' => 'text_dark',
'label' => 'Texte blanc (sombre)',
'description' => 'Texte blanc pur en mode sombre',
],
];
}
Edited on Jan 19, 2026 By Gavin .
The Translation is part of the englisch translation, the german translation an as I can tell it (json files in the RC Files) in the French to. but as you can se it none of them get displayed.
It is Part of the References in rhe Translation Statistiks and the Editor to.
"colors": {
"title": "Dekorationsfarben",
"primary_colors": "Primäre Farben",
"system": "System-Farben",
"borders": "Umrandungen",
"background": {
"light": "Hintergrund Farben (heller Modus)",
"dark": "Hintergrund Farben (dunkler Modus)",
"primary": "Primärer Hintergrund",
"secondary": "Sekundärer Hintergrund",
"tertiary": "Tertiärer Hintergrund"
},
"text": {
"light": "Schrift Farben (heller Modus)",
"dark": "Schrift Farben (dunkler Modus)",
"primary": "Primäre Schrift",
"secondary": "Sekundäre Schrift",
"primary_dark": "Primäre Schrift (dunkel)",
"secondary_dark": "Sekundäre Schrift (dunkel)"
},
"bg_dark": "Dunkler Hintergrund (heller Modus)",
"bg_darker": "Dunklerer Hintergrund (heller Modus)",
"text_light": "Helle Schrift",
"text_muted": "Inaktive Schrift (heller Modus)",
"text_white": "Weisse Schrift",
"border_normal": "Normale Umrandung",
"border_light": "Helle Umrandung",
"border_dark": "Dunkle Umrandung",
"dark_bg_tertiary": "Tertiärer Hintergrund (dunkler Modus)",
"dark_bg_dark": "Dunkler Hintergrund (dunkler Modus)",
"dark_bg_darker": "Dunklerer Hintergrund (dunkler Modus)",
"dark_text_light": "Helle Schrift (dunkler Modus)",
"dark_text_muted": "Inaktive Schrift (dunkler Modus)",
"dark_text_white": "Weisse Schrift(dunkler Modus)",
"no_changes": "Keine Änderungen der Farben festgestellt",
"saved": "Farben erfolgreich gespeichert",
"save": "Farben speichern"
},
Yes, but the code I gave you doesn't touch that file that is why it won't translate everything. So @Fred would have to pull the language from languages/admin.json in read it. Overall, its not reading if for anything because it's not working for me in English and it wouldn't matter if you change it to German or Chinese, it is static only to French because the code only allows French text and doesn't get translated.
Edited on Jan 19, 2026 By Gavin .
No need to panic, guys, you're both 50/50 right. I've corrected everything so it can be translated 😉
Gavin
JPRuehmann