Add dark mode compatibility

archesproject · Dec 4, 2024 · 4d64158 · 4d64158
1 parent 082e889
commit 4d64158
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git a/arches_references/src/arches_references/components/editor/ItemHeader.vue b/arches_references/src/arches_references/components/editor/ItemHeader.vue
@@ -42,7 +42,6 @@ const iconLabel = (item: ControlledListItem) => {
             :href="item.uri"
             rel="noreferrer"
             target="_blank"
-            style="font-size: small; color: blue; text-decoration: underline"
         >
             {{ item.uri }}
         </a>
@@ -68,4 +67,10 @@ h3 {
     font-size: small;
     font-weight: 200;
 }
+
+a {
+    font-size: small;
+    color: var(--p-text-color);
+    text-decoration: underline;
+}
 </style>
diff --git a/arches_references/src/arches_references/components/editor/ReferenceNodeLink.vue b/arches_references/src/arches_references/components/editor/ReferenceNodeLink.vue
@@ -19,7 +19,7 @@ const { $gettext } = useGettext();
         }}<a
             :href="arches.urls.graph_designer(node.graph_id)"
             target="_blank"
-            style="text-decoration: underline"
+            style="text-decoration: underline; color: var(--p-content-color)"
         >
             <i
                 class="fa fa-reply"
@@ -40,7 +40,7 @@ const { $gettext } = useGettext();
     text-align: center;
     border-radius: var(--p-content-border-radius);
     height: 3rem;
-    background: var(--p-gray-200);
+    background: var(--p-content-hover-background);
     text-wrap: nowrap;
 }
 </style>
diff --git a/arches_references/src/arches_references/components/misc/ControlledListSplash.vue b/arches_references/src/arches_references/components/misc/ControlledListSplash.vue
@@ -38,15 +38,14 @@ const { $gettext } = useGettext();
     margin: 5rem 5rem 2rem 5rem;
     border: 1px solid #ddd;
     padding: 4rem 3rem;
-    background: #f6f6f6;
+    background: var(--p-content-hover-background);
     border-radius: var(--p-content-border-radius);
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
 .controlled-list-splash-title {
-    color: #666;
     font-size: 2.8rem;
     margin-bottom: 3rem;
     margin-top: 2.5rem;
@@ -70,7 +69,6 @@ i {
 
 .controlled-list-splash-description {
     font-size: 1.5rem;
-    color: #666;
     font-weight: 500;
 }
 </style>
diff --git a/arches_references/src/arches_references/components/tree/ListTree.vue b/arches_references/src/arches_references/components/tree/ListTree.vue
@@ -277,7 +277,7 @@ const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
             },
             pcFilterIconContainer: {
                 root: {
-                    style: { top: '25%' },
+                    style: { display: 'flex' },
                 },
             },
             wrapper: {

diff --git a/arches_references/src/arches_references/components/tree/ListTreeControls.vue b/arches_references/src/arches_references/components/tree/ListTreeControls.vue
@@ -78,7 +78,7 @@ const expandNode = (node: TreeNode) => {
 <style scoped>
 .controls {
     display: flex;
-    background: var(--p-primary-50);
+    background: var(--p-content-hover-background);
     gap: 0.5rem;
     padding: 0.5rem;
     justify-content: space-between;