chore: improve dark colors

onmax · Dec 28, 2024 · 580c19c · 580c19c
1 parent ba21ee9
commit 580c19c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/packages/nimiq-css/src/css/colors.css b/packages/nimiq-css/src/css/colors.css
@@ -251,7 +251,6 @@
 
 
 .dark,
-.dark *,
 &[data-theme="dark"],
 :where(.bg-darkblue &, &:where(.bg-darkblue,[bg-darkblue])),
 :where(.bg-neutral &, &:where(.bg-neutral, [bg-neutral])),

diff --git a/packages/nimiq-css/src/css/typography.css b/packages/nimiq-css/src/css/typography.css
@@ -11,7 +11,8 @@
 /**
  * Make sure to import also nimiq-colors layer found in this package
  **/
-.nq-prose, .nq-prose-compact {
+.nq-prose,
+.nq-prose-compact {
   margin-trim: block;
 
   &:not(:where(.nq-prose-compact, [nq-prose-compact])) {
@@ -226,7 +227,7 @@
         line-height: 1.6;
         font-weight: 700;
       }
-      
+
       code {
         background-color: rgb(var(--nq-green-400) / 1);
         color: rgb(var(--nq-green) / 0.9);
@@ -242,6 +243,10 @@
         font-size: 0.875;
         font-weight: 700;
         line-height: 1.3125;
+
+        :where(.dark, [data-theme="dark"]) & {
+          color: rgb(var(--nq-white) / 0.8);
+        }
       }
 
       &:has(blockquote) {
@@ -275,6 +280,10 @@
           color: rgb(var(--nq-neutral-700));
           margin: 8px 24px 24px;
 
+          :where(.dark, [data-theme="dark"]) & {
+            color: rgb(var(--nq-white) / 0.8);
+          }
+
           @media (min-width: 769px) {
             margin: 8px 32px 24px;
           }
@@ -446,7 +455,7 @@
     &:where(a) {
       font-weight: 600;
       text-decoration: none;
-        color: rgb(var(--nq-blue) / 1);
+      color: rgb(var(--nq-blue) / 1);
     }
   }
 

diff --git a/packages/nimiq-css/src/css/utilities.css b/packages/nimiq-css/src/css/utilities.css
@@ -19,6 +19,10 @@
   :where([data-inverted] *) & {
     color: rgb(var(--nq-neutral-0) / 0.8);
   }
+
+  :where(.dark, [data-theme="dark"]) & {
+    color: rgb(var(--nq-white) / 0.7);
+  }
 }
 
 .nq-arrow,
@@ -384,6 +388,7 @@
   height: max-content;
   width: max-content;
 
+  :where(.dark, [data-theme="dark"]) &,
   :where([data-inverted] *) & {
     color: rgb(var(--nq-neutral-0) / 0.8);
   }