Improve login page colors in dark mode

leepeuker · Mar 2, 2023 · 9c7b174 · 9c7b174
1 parent e9bbcd5
commit 9c7b174
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 56 deletions.
diff --git a/public/css/login.css b/public/css/login.css
@@ -31,54 +31,3 @@ body {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
-
-.bd-placeholder-img {
-    font-size: 1.125rem;
-    text-anchor: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-}
-
-@media (min-width: 768px) {
-    .bd-placeholder-img-lg {
-        font-size: 3.5rem;
-    }
-}
-
-.b-example-divider {
-    height: 3rem;
-    background-color: rgba(0, 0, 0, .1);
-    border: solid rgba(0, 0, 0, .15);
-    border-width: 1px 0;
-    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.b-example-vr {
-    flex-shrink: 0;
-    width: 1.5rem;
-    height: 100vh;
-}
-
-.bi {
-    vertical-align: -.125em;
-    fill: currentColor;
-}
-
-.nav-scroller {
-    position: relative;
-    z-index: 2;
-    height: 2.75rem;
-    overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-    display: flex;
-    flex-wrap: nowrap;
-    padding-bottom: 1rem;
-    margin-top: -1px;
-    overflow-x: auto;
-    text-align: center;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-}
diff --git a/templates/page/login.html.twig b/templates/page/login.html.twig
@@ -9,21 +9,23 @@
 {% endblock %}
 
 {% block body %}
+    <script>
+        if ("{{ theme }}" === 'dark') document.getElementsByTagName('body')[0].classList.add('bg-dark')
+    </script>
     <main role="main" class="form-signin w-100 m-auto text-center">
         <form action="/login" method="post" enctype="multipart/form-data">
-            <h1 class="">Movary</h1>
-            <br>
+            <h1 id="header" class="text-{{ theme == 'dark' ? 'light' : 'dark' }}" style="margin-bottom: 1rem">Movary</h1>
             <div class="form-floating">
-                <input type="email" name="email" class="form-control" id="floatingInput" placeholder="name@example.com" required>
+                <input type="email" name="email" class="form-control text-{{ theme == 'dark' ? 'light' : 'dark' }}" id="floatingInput" placeholder="name@example.com" required>
                 <label for="floatingInput">Email address</label>
             </div>
             <div class="form-floating">
-                <input type="password" name="password" class="form-control" id="floatingPassword" placeholder="Password" required>
+                <input type="password" name="password" class="form-control text-{{ theme == 'dark' ? 'light' : 'dark' }}" id="floatingPassword" placeholder="Password" required>
                 <label for="floatingPassword">Password</label>
             </div>
 
             <div class="checkbox mb-3" style="margin-bottom: 0.7rem!important;">
-                <label>
+                <label class="text-{{ theme == 'dark' ? 'light' : 'dark' }}">
                     <input type="checkbox" name="rememberMe" value="true"> Remember me
                 </label>
             </div>