Fix an issue in dark mode when modal is opened

index.html

@@ -154,29 +154,29 @@ <h4 class="ui header">Ethereum</h4>
     </div>
 </footer>
 <!--Policy Modal -->
-<div class="ui mini modal" id=policyModal>
-    <div class=header>
+<div class="ui mini modal light" id=policyModal>
+    <div class="header light">
         Policy
     </div>
-    <div class="description scrolling content">
+    <div class="description scrolling content light">
         <p>Djecrety is hosted on Github Pages and doesn't have any back-end code or database.
             <br> The keys generate on demand and it's completely random and never store to any file or database.
         </p>
         <p>That's all. So you can safely use Djecrety.</p>
     </div>
-    <div class=actions>
+    <div class="actions light">
         <div class="ui positive right labeled icon button">
             Got It!
             <i class="checkmark icon"></i>
         </div>
     </div>
 </div>
 <!--Why Modal -->
-<div class="ui tiny modal" id=whyModal>
-    <div class=header>
+<div class="ui tiny modal light" id=whyModal>
+    <div class="header light">
         Why we must change secret key?
     </div>
-    <div class="description scrolling content">
+    <div class="description scrolling content light">
         <p>As
             <a href="https://docs.djangoproject.com/en/2.1/ref/settings/#std:setting-SECRET_KEY" target=_blank
                title="Django documents">Django
@@ -196,19 +196,19 @@ <h4 class="ui header">Ethereum</h4>
             on your deploy. If you lost the secret key for any reason or the server got compromised change it as
             soon as possible.</p>
     </div>
-    <div class=actions>
+    <div class="actions light">
         <div class="ui positive right labeled icon button">
             Got It!
             <i class="checkmark icon"></i>
         </div>
     </div>
 </div>
 <!--Help Modal -->
-<div class="ui tiny modal" id=helpModal>
-    <div class=header>
+<div class="ui tiny modal light" id=helpModal>
+    <div class="header light">
         How to use?
     </div>
-    <div class="description scrolling content">
+    <div class="description scrolling content light">
         <p>After creating your project:</p>
         <ol>
             <li>Duplicate your project 'settings.py' file and rename it to
@@ -228,7 +228,7 @@ <h4 class="ui header">Ethereum</h4>
             </li>
         </ol>
     </div>
-    <div class=actions>
+    <div class="actions light">
         <div class="ui positive right labeled icon button">
             Got It!
             <i class="checkmark icon"></i>

static/css/main.css

@@ -27,13 +27,13 @@ q {
 
 .light:not(a) {
     color: #20252d;
-    background-color: #eef0f2;
+    background: #eef0f2;
     transition: 0.5s;
 }
 
 .dark:not(a) {
     color: #fff !important;
-    background-color: #101c29;
+    background: #101c29 !important;
     transition: 0.5s;
 }