From d1b585b01d14b400efb83d6c67d1e1255acfe719 Mon Sep 17 00:00:00 2001
From: Gabriel Cozma <me@gabs.eu.org>
Date: Sat, 20 Jul 2024 12:39:36 +0300
Subject: [PATCH]  fix: elements being gray on print

---
 src/assets/css/style.css  | 14 +++++++++++++-
 src/views/ArticleView.vue |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 81190c7..71ed54c 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -14,4 +14,16 @@
 
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
-}
\ No newline at end of file
+}
+
+
+@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
index c528cfd..5a5a2d4 100644
--- 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">