Merge pull request #386 from pulibrary/384-support-dark-disclosure-bt…

…n-system-dark-mode [#384] Support Dark system mode for the disclosure icon
pulibrary · Jul 18, 2024 · 47f904c · 47f904c
2 parents 82c193a + b3f1891
commit 47f904c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "@honeybadger-io/vue": "^6.1.7",
     "axios": "^1.5.1",
     "class-transformer": "^0.5.1",
-    "lux-design-system": "^5.2.14",
+    "lux-design-system": "^5.2.15",
     "typescript-eslint": "^7.8.0",
     "vue": "^3.3.4"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -101,4 +101,15 @@ a:focus {
   list-style-type: none;
   margin: 0;
 }
+/** Support Dark system mode for the disclosure icon */
+/** The Light system mode is supported by the default values in lux */
+@media (prefers-color-scheme: dark) {
+  .lux-disclosure .lux-icon svg path {
+    stroke-width: 3;
+    stroke: var(--white);
+  }
+  .lux-disclosure button .lux-icon {
+    border: 2px solid white;
+  }
+}
 </style>
diff --git a/src/main.ts b/src/main.ts
@@ -1,8 +1,8 @@
 import { createApp } from 'vue';
+import 'lux-design-system/dist/style.css';
 import App from './App.vue';
 import HoneybadgerVue from '@honeybadger-io/vue';
 import config from './config';
-import 'lux-design-system/dist/style.css';
 
 const app = createApp(App);
 

diff --git a/yarn.lock b/yarn.lock
@@ -1716,10 +1716,10 @@ lru-cache@^10.2.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.2.tgz#48206bc114c1252940c41b25b41af5b545aca878"
   integrity sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==
 
-lux-design-system@^5.2.14:
-  version "5.2.14"
-  resolved "https://registry.yarnpkg.com/lux-design-system/-/lux-design-system-5.2.14.tgz#ed1f5021be1e5578d085bbc5b44705b118c6bf21"
-  integrity sha512-WH1Ds0pXQgsdudHtd6KNsbO1jMFGk39mFavOb4ofKp2imVtxRi0hNB8nOIdtw8czx5eYJar0yClukLzu4DJZ6g==
+lux-design-system@^5.2.15:
+  version "5.2.15"
+  resolved "https://registry.yarnpkg.com/lux-design-system/-/lux-design-system-5.2.15.tgz#ae55558dc57fbea365b83b1d6dfe5f0e0c6a464e"
+  integrity sha512-b7KTB5mjWdZp7rfis4uO3NjV/oYFinlziitaiiXZpvZ7cqLanNgFt6cLvJLfolOjUQ/XvmKV3FNACDSyjBeeDQ==
   dependencies:
     core-js "^3.8.3"
     register-service-worker "^1.7.2"