fix: elements being gray on print

Vanilla-OS · Jul 20, 2024 · d1b585b · d1b585b
1 parent 0dc909f
commit d1b585b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -14,4 +14,16 @@
 
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
-}
+}
+
+
+@media print {
+    body {
+        background-color: white;
+        color: black;
+    }
+
+    h1, h2, h3, h4, h5, h6, code {
+        color: black;
+    }
+}
diff --git a/src/views/ArticleView.vue b/src/views/ArticleView.vue
@@ -31,7 +31,7 @@
         </div>
     </nav>
     <section class="bg-gray-100 dark:bg-gray-800 text-black dark:text-gray-200">
-        <div class="container mx-auto py-8 px-4 text-center">
+        <div class="container mx-auto py-8 px-4 text-center print:text-black">
             <h1 class="text-3xl font-bold">{{ article.Title }}</h1>
             <p class="mt-4">{{ article.Description }}</p>
             <div class="flex justify-center mt-4 gap-2">