feat: background color visibility

team-apm · Dec 16, 2023 · 5aa002b · 5aa002b
1 parent 70ec180
commit 5aa002b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/src/renderer/main.css b/src/renderer/main.css
@@ -17,11 +17,25 @@ th {
 .nav-tabs .nav-link {
   color: var(--bs-body-color);
 }
-.btn-primary {
-  --bs-btn-disabled-bg: #0b5ed7;
-  --bs-btn-disabled-border-color: #0a58ca;
-  --bs-btn-bg: #0b5ed7;
-  --bs-btn-border-color: #0a58ca;
-  --bs-btn-hover-bg: #0a58ca;
-  --bs-btn-hover-border-color: #0a53be;
+@media (prefers-color-scheme: dark) {
+  .btn-primary {
+    --bs-btn-disabled-bg: #0b5ed7;
+    --bs-btn-disabled-border-color: #0a58ca;
+    --bs-btn-bg: #0b5ed7;
+    --bs-btn-border-color: #0a58ca;
+    --bs-btn-hover-bg: #0a58ca;
+    --bs-btn-hover-border-color: #0a53be;
+  }
+}
+.list-group-item-light {
+  background-color: var(--bs-tertiary-bg);
+}
+.list-group-item-light.list-group-item-action:hover {
+  background-color: var(--bs-tertiary-bg);
+}
+.badge {
+  background-color: var(--bs-list-group-bg);
+  color: var(--bs-list-group-color);
+  border: var(--bs-list-group-border-width) solid
+    var(--bs-list-group-border-color);
 }
diff --git a/src/renderer/main/index.html b/src/renderer/main/index.html
@@ -158,7 +158,7 @@
 										<span id="aviutl-installed-version"></span>
 										<button
 											type="button"
-											class="btn btn-primary dropdown-toggle"
+											class="btn btn-primary dropdown-toggle rounded-start-0 rounded-bottom-0"
 											id="install-aviutl"
 											data-bs-toggle="dropdown"
 											aria-expanded="false"
@@ -180,7 +180,7 @@
 										<span id="exedit-installed-version"></span>
 										<button
 											type="button"
-											class="btn btn-primary dropdown-toggle"
+											class="btn btn-primary dropdown-toggle rounded-0"
 											id="install-exedit"
 											data-bs-toggle="dropdown"
 											aria-expanded="false"
@@ -516,11 +516,11 @@
 											<div class="d-none">
 												<div
 													id="sort-template"
-													class="sort rounded-pill d-inline-block px-2 mx-1 my-auto list-group-item-secondary small border"
+													class="sort rounded-pill d-inline-block px-2 mx-1 my-auto small border"
 												></div>
 												<div
 													id="tag-template"
-													class="badge list-group-item-secondary d-block border fw-normal"
+													class="badge list-group-item-light d-block fw-normal"
 												></div>
 												<li
 													id="list-template"

diff --git a/src/renderer/main/package.ts b/src/renderer/main/package.ts
@@ -324,9 +324,9 @@ async function setPackagesList(instPath: string) {
       selectedEntryType = entryType.scriptSite;
       li.getElementsByTagName('input')[0].checked = true;
       for (const tmpli of Array.from(packagesList.getElementsByTagName('li'))) {
-        tmpli.classList.remove('list-group-item-secondary');
+        tmpli.classList.remove('list-group-item-light');
       }
-      li.classList.add('list-group-item-secondary');
+      li.classList.add('list-group-item-light');
       replaceText('install-package', 'インストール');
     });
     name.innerText = webpage.developer;
@@ -337,7 +337,7 @@ async function setPackagesList(instPath: string) {
       .cloneNode(true) as HTMLSpanElement;
     typeItem.removeAttribute('id');
     typeItem.classList.replace(
-      'list-group-item-secondary',
+      'list-group-item-light',
       'list-group-item-success',
     );
     typeItem.innerText = 'スクリプト配布サイト';