Resolve #3478945 "Separate color schemes"

css/xnavigation.css

-#admin-toolbar .xnavigation-blackstone .toolbar-menu--level-2 {
-  box-shadow: none;
-}
-
-#admin-toolbar .xnavigation-blackstone .toolbar-button {
-  color: white;
-}
-
-#admin-toolbar .xnavigation-blackstone .toolbar-menu__link,
-#admin-toolbar .xnavigation-blackstone + nav#menu-footer.admin-toolbar__footer .toolbar-button {
-  color: #797167;
-}
-
-#admin-toolbar .xnavigation-blackstone,
-#admin-toolbar .xnavigation-blackstone .admin-toolbar__header,
-#admin-toolbar .xnavigation-blackstone .toolbar-button,
-#admin-toolbar .xnavigation-blackstone > nav,
-#admin-toolbar .xnavigation-blackstone + nav,
-#admin-toolbar .xnavigation-blackstone .toolbar-popover__wrapper,
-#admin-toolbar .xnavigation-blackstone .toolbar-menu__item--level-1,
-#admin-toolbar .xnavigation-blackstone .toolbar-menu--level-2,
-#admin-toolbar .xnavigation-blackstone + nav .toolbar-popover__wrapper,
-#admin-toolbar .xnavigation-blackstone + nav#menu-footer.admin-toolbar__footer .toolbar-button {
-  background: #1D1E1C;
-}
-
-#admin-toolbar .xnavigation-blackstone .toolbar-popover__header {
-  color: #4E4943;
-}
-
-#admin-toolbar .xnavigation-blackstone .toolbar-block:nth-last-child(n+2)::after {
-  border-top: 2px solid #43352C;
-}
-
-#admin-toolbar .xnavigation-blackstone button,
-#admin-toolbar .xnavigation-blackstone + nav .toolbar-popover__wrapper button {
-  background: #594739;
-}
-
-#admin-toolbar .xnavigation-blackstone + nav {
-  border-top-color: #43352C;
-}
-
-#admin-toolbar #menu-builder.xnavigation-blackstone,
-#admin-toolbar .xnavigation-blackstone + nav#menu-footer {
-  border-right-color: #43352C;
-}
-
-/* Slate */
-
-#admin-toolbar .xnavigation-slate .toolbar-menu--level-2 {
-  box-shadow: none;
-}
-
-#admin-toolbar .xnavigation-slate .toolbar-button {
-  color: white;
-}
-
-#admin-toolbar .xnavigation-slate .toolbar-menu__link,
-#admin-toolbar .xnavigation-slate + nav#menu-footer.admin-toolbar__footer .toolbar-button {
-  color: #9498A1;
-}
-
-#admin-toolbar .xnavigation-slate,
-#admin-toolbar .xnavigation-slate .admin-toolbar__header,
-#admin-toolbar .xnavigation-slate .toolbar-button,
-#admin-toolbar .xnavigation-slate > nav,
-#admin-toolbar .xnavigation-slate + nav,
-#admin-toolbar .xnavigation-slate .toolbar-popover__wrapper,
-#admin-toolbar .xnavigation-slate .toolbar-menu__item--level-1,
-#admin-toolbar .xnavigation-slate .toolbar-menu--level-2,
-#admin-toolbar .xnavigation-slate + nav .toolbar-popover__wrapper,
-#admin-toolbar .xnavigation-slate + nav#menu-footer.admin-toolbar__footer .toolbar-button {
-  background: #122537;
-}
-
-#admin-toolbar .xnavigation-slate .toolbar-popover__header {
-  color: #74563B;
-}
-
-#admin-toolbar .xnavigation-slate .toolbar-block:nth-last-child(n+2)::after {
-  border-top: 2px solid #2D4459;
-}
-
-#admin-toolbar .xnavigation-slate button,
-#admin-toolbar .xnavigation-slate + nav .toolbar-popover__wrapper button {
-  background: #74563B;
-}
-
-#admin-toolbar .xnavigation-slate + nav {
-  border-top-color: #2D4459;
-}
-
-#admin-toolbar #menu-builder.xnavigation-slate,
-#admin-toolbar .xnavigation-slate + nav#menu-footer {
-  border-right-color: #2D4459;
-}

xnavigation.libraries.yml

 xnavigation:
   version: 1.x
-  css:
-    theme:
-      css/xnavigation.css: {}
   js:
     js/xnavigation.js: { }
   dependencies:
     - core/jquery
     - core/drupal
+
+xnavigation.blackstone:
+  version: 1.x
+  css:
+    theme:
+      css/xnavigation-blackstone.css: {}
+
+xnavigation.slate:
+  version: 1.x
+  css:
+    theme:
+      css/xnavigation-slate.css: {}

xnavigation.module

 <?php
 
 use Drupal\Core\Routing\RouteMatchInterface;
+use const var_dump as var_dumpAlias;
 
 /**
  * Implements hook_help().
@@ -36,14 +37,26 @@ function xnavigation_preprocess_block(&$variables) {
  * Implements hook_page_attachments().
  */
 function xnavigation_page_attachments(array &$attachments) {
-  $attachments['#attached']['library'][] = 'xnavigation/xnavigation';
-
   // Load the xNavigation settings.
   $config = \Drupal::config('xnavigation.settings');
   // Get the selected color scheme.
-
   $color_scheme = $config->get('color_scheme') ?? 'blackstone';
 
+  // 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;
+  }
+
   // Pass the color scheme setting to JavaScript.
   $attachments['#attached']['drupalSettings']['xNavigation']['color_scheme'] = $color_scheme;
 }