Resolve #3485155 "Add additional colour"

css/xnavigation-core.css

+/* Core */
+
+#admin-toolbar .xnavigation-core .toolbar-menu--level-2 {
+  box-shadow: none;
+}
+
+#admin-toolbar .xnavigation-core .toolbar-button {
+  color: white;
+}
+
+#admin-toolbar .xnavigation-core .toolbar-menu__link,
+#admin-toolbar .xnavigation-core + nav#menu-footer.admin-toolbar__footer .toolbar-button {
+  color: white;
+}
+
+#admin-toolbar .xnavigation-core,
+#admin-toolbar .xnavigation-core .admin-toolbar__header,
+#admin-toolbar .xnavigation-core .toolbar-button,
+#admin-toolbar .xnavigation-core > nav,
+#admin-toolbar .xnavigation-core + nav,
+#admin-toolbar .xnavigation-core .toolbar-popover__wrapper,
+#admin-toolbar .xnavigation-core .toolbar-menu__item--level-1,
+#admin-toolbar .xnavigation-core .toolbar-menu--level-2,
+#admin-toolbar .xnavigation-core + nav .toolbar-popover__wrapper,
+#admin-toolbar .xnavigation-core + nav#menu-footer.admin-toolbar__footer .toolbar-button {
+  background: #064771;
+}
+
+#admin-toolbar .xnavigation-core .toolbar-popover__header {
+  color: #0678be;
+}
+
+#admin-toolbar .xnavigation-core .toolbar-block:nth-last-child(n+2)::after {
+  border-top: 2px solid #0965a1;
+}
+
+#admin-toolbar .xnavigation-core button,
+#admin-toolbar .xnavigation-core + nav .toolbar-popover__wrapper button {
+  background: #0678be;
+}
+
+#admin-toolbar .xnavigation-core + nav {
+  border-top-color: #0965a1;
+}
+
+#admin-toolbar #menu-builder.xnavigation-core,
+#admin-toolbar .xnavigation-core + nav#menu-footer {
+  border-right-color: #0965a1;
+}

css/xnavigation-night.css

+/* Night */
+
+#admin-toolbar .xnavigation-night .toolbar-menu--level-2 {
+  box-shadow: none;
+}
+
+#admin-toolbar .xnavigation-night .toolbar-button {
+  color: #7B6D62; /* was white */
+}
+
+#admin-toolbar .xnavigation-night .toolbar-menu__link,
+#admin-toolbar .xnavigation-night + nav#menu-footer.admin-toolbar__footer .toolbar-button {
+  color:  #597276; /* was #9498A1 */
+}
+
+#admin-toolbar .xnavigation-night,
+#admin-toolbar .xnavigation-night .admin-toolbar__header,
+#admin-toolbar .xnavigation-night .toolbar-button,
+#admin-toolbar .xnavigation-night > nav,
+#admin-toolbar .xnavigation-night + nav,
+#admin-toolbar .xnavigation-night .toolbar-popover__wrapper,
+#admin-toolbar .xnavigation-night .toolbar-menu__item--level-1,
+#admin-toolbar .xnavigation-night .toolbar-menu--level-2,
+#admin-toolbar .xnavigation-night + nav .toolbar-popover__wrapper,
+#admin-toolbar .xnavigation-night + nav#menu-footer.admin-toolbar__footer .toolbar-button {
+  background: #0E191F /* Was #122537; */
+}
+
+#admin-toolbar .xnavigation-night .toolbar-popover__header {
+  color: #2B3C43 /* Was #74563B; */
+}
+
+#admin-toolbar .xnavigation-night .toolbar-block:nth-last-child(n+2)::after {
+  border-top: 2px solid #423A37 /* Was #2D4459; */
+}
+
+#admin-toolbar .xnavigation-night button,
+#admin-toolbar .xnavigation-night + nav .toolbar-popover__wrapper button {
+  background: #597276 /* Was #74563B; */
+}
+
+#admin-toolbar .xnavigation-night + nav {
+  border-top-color: #423A37 /* Was #2D4459; */
+}
+
+#admin-toolbar #menu-builder.xnavigation-night,
+#admin-toolbar .xnavigation-night + nav#menu-footer {
+  border-right-color: #423A37 /* Was #2D4459; */
+}

css/xnavigation-pahoe.css

+/* Pahoe */
+
+#admin-toolbar .xnavigation-pahoe .toolbar-menu--level-2 {
+  box-shadow: none;
+}
+
+#admin-toolbar .xnavigation-pahoe .toolbar-button {
+  color: white;
+}
+
+#admin-toolbar .xnavigation-pahoe .toolbar-menu__link,
+#admin-toolbar .xnavigation-pahoe + nav#menu-footer.admin-toolbar__footer .toolbar-button {
+  color: white /* OLD #9498A1; */
+}
+
+#admin-toolbar .xnavigation-pahoe,
+#admin-toolbar .xnavigation-pahoe .admin-toolbar__header,
+#admin-toolbar .xnavigation-pahoe .toolbar-button,
+#admin-toolbar .xnavigation-pahoe > nav,
+#admin-toolbar .xnavigation-pahoe + nav,
+#admin-toolbar .xnavigation-pahoe .toolbar-popover__wrapper,
+#admin-toolbar .xnavigation-pahoe .toolbar-menu__item--level-1,
+#admin-toolbar .xnavigation-pahoe .toolbar-menu--level-2,
+#admin-toolbar .xnavigation-pahoe + nav .toolbar-popover__wrapper,
+#admin-toolbar .xnavigation-pahoe + nav#menu-footer.admin-toolbar__footer .toolbar-button {
+  background: #33363F; /* OLD #122537 */
+}
+
+#admin-toolbar .xnavigation-pahoe .toolbar-popover__header {
+  color: #656772 /* OLD #74563B; */
+}
+
+#admin-toolbar .xnavigation-pahoe .toolbar-block:nth-last-child(n+2)::after {
+  border-top: 2px solid #57463A; /* OLD #2D4459 */
+}
+
+#admin-toolbar .xnavigation-pahoe button,
+#admin-toolbar .xnavigation-pahoe + nav .toolbar-popover__wrapper button {
+  background: #656772 /* OLD #74563B; */
+}
+
+#admin-toolbar .xnavigation-pahoe + nav {
+  border-top-color: #57463A; /* OLD #2D4459 */
+}
+
+#admin-toolbar #menu-builder.xnavigation-pahoe,
+#admin-toolbar .xnavigation-pahoe + nav#menu-footer {
+  border-right-color: #57463A; /* OLD #2D4459 */
+}

js/xnavigation.js

 (function (Drupal) {
   Drupal.behaviors.xNavigationBehavior = {
     attach: function (context, settings) {
-
       // Ensure the behavior runs only once.
       const menuBuilder = context.querySelector('#menu-builder');
       if (menuBuilder) {
         const colorScheme = settings.xNavigation.color_scheme || 'default';
 
-        if (colorScheme === 'blackstone') {
-          menuBuilder.classList.add('xnavigation-blackstone');
-        } else if (colorScheme === 'slate') {
-          menuBuilder.classList.add('xnavigation-slate');
+        // Map of color schemes to their classes.
+        const colorClasses = {
+          'blackstone': 'xnavigation-blackstone',
+          'core': 'xnavigation-core',
+          'night': 'xnavigation-night',
+          'pahoe': 'xnavigation-pahoe',
+          'slate': 'xnavigation-slate',
+        };
+
+        // Add the class if the color scheme exists in the map.
+        if (colorClasses[colorScheme]) {
+          menuBuilder.classList.add(colorClasses[colorScheme]);
         }
       }
     }

src/Form/SettingsForm.php

@@ -36,6 +36,9 @@ class SettingsForm extends ConfigFormBase {
       '#title' => $this->t('Color scheme'),
       '#options' => [
         'blackstone' => $this->t('Blackstone'),
+        'core' => $this->t('Core'),
+        'night' => $this->t('Night'),
+        'pahoe' => $this->t('Pahoe'),
         'slate' => $this->t('Slate'),
       ],
       '#default_value' => $config->get('color_scheme') ?? 'blackstone', // Default value

xnavigation.libraries.yml

@@ -12,6 +12,24 @@ xnavigation.blackstone:
     theme:
       css/xnavigation-blackstone.css: {}
 
+xnavigation.core:
+  version: 1.x
+  css:
+    theme:
+      css/xnavigation-core.css: {}
+
+xnavigation.night:
+  version: 1.x
+  css:
+    theme:
+      css/xnavigation-night.css: {}
+
+xnavigation.pahoe:
+  version: 1.x
+  css:
+    theme:
+      css/xnavigation-pahoe.css: {}
+
 xnavigation.slate:
   version: 1.x
   css:

xnavigation.module

@@ -45,17 +45,13 @@ function xnavigation_page_attachments(array &$attachments) {
   // Attach the site-wide library.
   $attachments['#attached']['library'][] = 'xnavigation/xnavigation';
 
-  // Dynamically add the CSS file based on the selected color scheme.
-  switch ($color_scheme) {
-    case 'slate':
-      $attachments['#attached']['library'][] = 'xnavigation/xnavigation.slate';
-      break;
-
-    case 'blackstone':
-    default:
-      $attachments['#attached']['library'][] = 'xnavigation/xnavigation.blackstone';
-      break;
-  }
+  $attachments['#attached']['library'][] = match ($color_scheme) {
+    'core' => 'xnavigation/xnavigation.core',
+    'night' => 'xnavigation/xnavigation.night',
+    'pahoe' => 'xnavigation/xnavigation.pahoe',
+    'slate' => 'xnavigation/xnavigation.slate',
+    default => 'xnavigation/xnavigation.blackstone',
+  };
 
   // Pass the color scheme setting to JavaScript.
   $attachments['#attached']['drupalSettings']['xNavigation']['color_scheme'] = $color_scheme;