Add dark mode

Author: alaugks

Readme.md

@@ -2,7 +2,7 @@
 
 * alaugks/spring-messagesource-xliff ([GitHub](https://github.com/alaugks/spring-messagesource-xliff))
 * Docker Image: alaugks/spring-boot-xliff-example:
-  2.0.0.2 ([Docker Hub](https://hub.docker.com/r/alaugks/spring-messagesource-xliff-example/tags))
+  2.0.0.3 ([Docker Hub](https://hub.docker.com/r/alaugks/spring-messagesource-xliff-example/tags))
 * [Example Website](https://spring-boot-xliff-example.alaugks.dev)
 
 ## Build and Run Docker Image

pom.xml

@@ -6,7 +6,7 @@
     <groupId>io.github.alaugks</groupId>
     <artifactId>spring-messagesource-xliff-example</artifactId>
 
-    <version>2.0.0.2</version>
+    <version>2.0.0.3</version>
 
     <packaging>jar</packaging>
 

src/main/resources/static/main.css

@@ -1,28 +1,36 @@
-* {
+:root {
+    color-scheme: light dark;
+}
+
+body {
+    background-color: #fff;
     font-family: sans-serif;
+    color: #000;
+}
+
+a {
+    color: #4493F8;
+    font-weight: bold;
+}
+
+a:visited {
+    color: #b6268d;
 }
 
 table {
-    background-color: #FFFFFF;
     border-collapse: collapse;
     border-width: 1px;
     border-color: #000;
     border-style: solid;
-    color: #000;
 }
 
-
 table td, table th {
     border-width: 1px;
     border-color: #000;
     border-style: solid;
     padding: 5px;
 }
 
-table thead {
-    background-color: #D1D1D1;
-}
-
 ul {
     padding: 0;
     margin: 0;
@@ -62,3 +70,41 @@ div.menu-pages {
 table {
     margin-top: 2em;
 }
+
+input {
+    color: #000;
+    background: none;
+    font-size: 1em;
+}
+
+.github {
+    padding: 0 0 2em 0;
+}
+
+.version {
+    padding: 0 0 2em 0;
+    color:#cacccf;
+    font-size: 0.8em;
+    text-align: right;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #2b2b2b;
+        color: #fff;
+    }
+
+    table {
+        border-color: #fff;
+    }
+
+    table td, table th {
+        border-color: #fff;
+        color: #fff;
+    }
+
+    input {
+        background-color: #ccc;
+        color: #000;
+    }
+}

src/main/resources/templates/home/translations.html

@@ -13,7 +13,7 @@
         <table>
             <thead>
                 <tr>
-                    <th>id</th>
+                    <th>id/code</th>
                     <th>value</th>
                 </tr>
             </thead>

src/main/resources/templates/layouts/base.html

@@ -19,11 +19,11 @@
     </main>
 
     <footer>
-        <p style="padding: 0 0 2em 0;">
+        <p class="github">
             SourceCode of this example on <a href="https://github.com/alaugks/spring-messagesource-xliff-example-spring-boot">GitHub</a>.
         </p>
 
-        <p style="padding: 0 0 2em 0;color:#cacccf; font-size: 0.8em;text-align: right;">
+        <p class="version">
             [[${@environment.getProperty('docker.image.version')}]]
         </p>
     </footer>