Added dark/light theme auto switch

config.ini

@@ -5,7 +5,7 @@ base_url = https://ab.21x9.org
 timezone = Europe/Berlin
 mail = abgame@21x9.org
 separator_char = ;
-theme = dark
+theme = auto
 
 [i18n]
 lang = de

static/css/auto.css

@@ -0,0 +1,248 @@
+body {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: #333333;
+}
+
+html,
+body {
+    border-color: #E7E5E2;
+    color: #E7E5E2;
+}
+
+hr {
+    display: none;
+}
+
+a {
+    color: #8FA3A9;
+}
+
+#header {
+    border-radius: 10px;
+    text-align: center;
+    width: 100%;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    background-color: #8FA3A9;
+    color: #243233;
+    font-weight: bolder;
+    font-size: large;
+}
+
+#content {
+    min-width: 400px;
+    max-width: 900px;
+    width: 65%;
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.ab {
+    float: none;
+    border-radius: 10px;
+    margin-top: 10px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    padding: 5px;
+    background-color: #89A6C0;
+}
+
+.a {
+    float: left;
+    width: 45%;
+    box-sizing: border-box;
+    padding: 25px;
+    border-radius: 10px;
+    border: 1px solid transparent;
+    background-color: #F7D214;
+    color: #243233;
+    font-weight: bold;
+    text-align: left;
+    font-family: 'Courier New', Courier, monospace;
+    cursor: pointer;
+    text-indent: -25px;
+    padding-left: 50px;
+    hyphens: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.b {
+    float: left;
+    width: 45%;
+    box-sizing: border-box;
+    padding: 25px;
+    border-radius: 10px;
+    border: 1px solid transparent;
+    background-color: #243233;
+    color: #F7D214;
+    font-weight: bold;
+    text-align: left;
+    font-family: 'Courier New', Courier, monospace;
+    cursor: pointer;
+    text-indent: -25px;
+    padding-left: 50px;
+    hyphens: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+input[type="radio"] {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    cursor: pointer;
+}
+
+.ab input:checked+label {
+    background-color: #B3472B;
+    border: 1px solid #000000;
+    color: #E7E5E2;
+}
+
+.separator {
+    float: left;
+    width: 10%;
+    box-sizing: border-box;
+    writing-mode: vertical-lr;
+    transform: rotate(210deg);
+    font-size: x-small;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #243233;
+}
+
+#footer {
+    margin-top: 10px;
+}
+
+#questions {
+    font-size: small;
+    text-align: center;
+    width: 45%;
+    float: left;
+    border-radius: 10px;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    color: #F7D214;
+    font-weight: bold;
+}
+
+#next {
+    text-align: center;
+    width: 45%;
+    float: left;
+    border: 0px;
+    border-radius: 10px;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    background-color: #8FA3A9;
+    color: #243233;
+    font-weight: bold;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: medium;
+    display: block;
+    cursor: pointer;
+}
+
+@media only screen and (max-width:1600px) {
+    #content {
+        min-width: 75%;
+    }
+}
+
+@media only screen and (max-width:1280px) {
+    #content {
+        min-width: 95%;
+    }
+}
+
+@media only screen and (max-width:640px) {
+    #content {
+        min-width: 95%;
+        transform: none;
+        position: absolute;
+        top: 5px;
+        left: 50%;
+        transform: translate(-50%);
+    }
+
+    #next {
+        min-width: 100%;
+    }
+
+    #questions {
+        min-width: 100%;
+        padding-top: 0px;
+        padding-bottom: 5px;
+    }
+
+    .a {
+        font-size: small;
+    }
+
+    .b {
+        font-size: small;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #181a1b !important;
+    }
+
+    #header {
+        background-color: rgb(74, 91, 96) !important;
+        color: rgb(205, 200, 194) !important;
+    }
+
+    .a {
+        border-color: transparent !important;
+        background-color: rgb(143, 120, 5) !important;
+        color: rgb(29, 40, 41) !important;
+    }
+
+    .b {
+        border-color: transparent !important;
+        background-color: rgb(29, 40, 41) !important;
+        color: rgb(248, 214, 41) !important;
+    }
+
+    .ab {
+        background-color: rgb(56, 81, 104) !important;
+    }
+
+    .ab input:checked+label {
+        background-color: rgb(143, 57, 34) !important;
+        border-color: rgb(140, 130, 115) !important;
+        color: rgb(215, 212, 207) !important;
+    }
+
+    .separator {
+        color: rgb(205, 200, 194);
+    }
+
+    #next {
+        border-color: initial !important;
+        background-color: rgb(74, 91, 96) !important;
+        color: rgb(205, 200, 194) !important;
+    }
+
+    #questions {
+        color: rgb(248, 214, 41) !important;
+    }
+
+    a {
+        color: rgb(169, 162, 151) !important;
+    }
+}

static/css/dark.css

@@ -10,7 +10,7 @@ body {
 .a {
     border-color: transparent !important;
     background-color: rgb(143, 120, 5) !important;
-    color: rgb(205, 200, 194) !important;
+    color: rgb(29, 40, 41) !important;
 }
 
 .b {

static/css/light.css

@@ -194,4 +194,4 @@ input[type="radio"] {
     .b {
         font-size: small;
     }
-}
+}

templates/index.html

@@ -3,9 +3,12 @@
 
 <head>
     <title>{{ title }}</title>
-    <link rel="stylesheet" type="text/css" href="/css/ab.css?t={{ epoch }}">
     {%- if theme == "dark" %}
     <link rel="stylesheet" type="text/css" href="/css/dark.css?t={{ epoch }}">
+    {%- elif theme == "light" %}
+    <link rel="stylesheet" type="text/css" href="/css/light.css?t={{ epoch }}">
+    {%- else %}
+    <link rel="stylesheet" type="text/css" href="/css/auto.css?t={{ epoch }}">
     {%- endif %}
     <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
     <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon-32x32.png') }}">