Dark theme

epicyon-login.css

@@ -1,71 +1,101 @@
+@charset "UTF-8";
+
+:root {
+    --main-bg-color: #282c37;
+    --main-fg-color: #9baec8;
+    --main-link-color: #2980d9;
+    --main-visited-color: #1580d9;
+    --border-color: #505050;
+    --font-size-header: 18px;
+    --font-color-header: #ccc;
+    --font-size: 22px;
+}
+
 body, html {
-  background-image: url("/login-background.png");
-  height: 100%;
-  font-family: Arial, Helvetica, sans-serif;
-  max-width: 60%;
-  min-width: 600px;
-  margin: 0 auto;
-  font-size: 24px;
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+
+    background-image: url("/login-background.png");
+    height: 100%;
+    font-family: Arial, Helvetica, sans-serif;
+    max-width: 60%;
+    min-width: 600px;
+    margin: 0 auto;
+    font-size: var(--font-size);
+}
+
+a, u {
+    color: var(--main-fg-color);
+}
+
+a:visited{
+    color: var(--main-visited-color);
+    font-weight: bold;
+}
+
+a:link {
+    color: var(--main-link-color);
+    font-weight: bold;
 }
 
 form {
-  border: 3px solid #f1f1f1;
+    border: 3px solid var(--border-color);
 }
 
 input[type=text], input[type=password] {
-  width: 100%;
-  padding: 12px 20px;
-  margin: 8px 0;
-  display: inline-block;
-  border: 1px solid #ccc;
-  box-sizing: border-box;
-  font-size: 24px;
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    font-size: var(--font-size);
 }
 
 button {
-  background-color: #555;
-  color: white;
-  padding: 14px 20px;
-  margin: 8px 0;
-  border: none;
-  cursor: pointer;
-  width: 100%;
-  font-size: 24px;
+    background-color: #555;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    font-size: var(--font-size);
 }
 
 .login-text {
-  font-size: 24px;
+    font-size: var(--font-size);
 }
 
 button:hover {
-  opacity: 0.8;
+    opacity: 0.8;
 }
 
 .imgcontainer {
-  text-align: center;
-  margin: 24px 0 12px 0;
+    text-align: center;
+    margin: 24px 0 12px 0;
 }
 
 img.avatar {
-  width: 40%;
-  border-radius: 50%;
+    width: 40%;
+    border-radius: 50%;
 }
 
 .container {
-  padding: 16px;
+    padding: 16px;
 }
 
 span.psw {
-  float: right;
-  padding-top: 16px;
+    float: right;
+    padding-top: 16px;
 }
 
 @media screen and (max-width: 300px) {
-  span.psw {
-    display: block;
-    float: none;
-  }
-  .cancelbtn {
-    width: 100%;
-  }
+    span.psw {
+	display: block;
+	float: none;
+    }
+    .cancelbtn {
+	width: 100%;
+    }
 }

epicyon-profile.css

@@ -1,9 +1,41 @@
+@charset "UTF-8";
+
+:root {
+    --main-bg-color: #282c37;
+    --main-bg-color-darker: #232c37;
+    --main-fg-color: #9baec8;
+    --main-link-color: #2980d9;
+    --main-visited-color: #1580d9;
+    --border-color: #505050;
+    --font-size-header: 18px;
+    --font-color-header: #ccc;
+    --font-size: 22px;
+}
+
 body, html {
+    background-color: var(--main-bg-color);
+    color: var(--main-fg-color);
+
     height: 100%;
     font-family: Arial, Helvetica, sans-serif;
     max-width: 80%;
     min-width: 600px;
     margin: 0 auto;
+    font-size: var(--font-size);
+}
+
+a, u {
+    color: var(--main-fg-color);
+}
+
+a:visited{
+    color: var(--main-visited-color);
+    font-weight: bold;
+}
+
+a:link {
+    color: var(--main-link-color);
+    font-weight: bold;
 }
 
 .cwButton {
@@ -50,7 +82,8 @@ body, html {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    color: white;
+    color: var(--font-color-header);
+    font-size: var(--font-size-header);
 }
 
 .new-post-text {
@@ -273,8 +306,8 @@ body, html {
 }
 
 .container {
-    border: 2px solid #dedede;
-    background-color: #f1f1f1;
+    border: 2px solid var(--border-color);
+    background-color: var(--main-bg-color);
     border-radius: 5px;
     padding: 10px;
     margin: 10px 0;
@@ -328,7 +361,7 @@ body, html {
 
 .darker {
     border-color: #ccc;
-    background-color: #ddd;
+    background-color: var(--main-bg-color-darker);
 }
 
 .container img.attachment {

webinterface.py

@@ -235,6 +235,8 @@ def htmlGetLoginCredentials(loginParams: str,lastLoginTime: int) -> (str,str,boo
     return nickname,password,register
 
 def htmlLogin(baseDir: str) -> str:
+    """Shows the login screen
+    """
     accounts=noOfAccounts(baseDir)
 
     if not os.path.isfile(baseDir+'/accounts/login.png'):
@@ -248,6 +250,7 @@ def htmlLogin(baseDir: str) -> str:
     else:
         loginText='<p class="login-text">Please enter some credentials</p><p>You will become the admin of this site.</p>'
     if os.path.isfile(baseDir+'/accounts/login.txt'):
+        # custom login message
         with open(baseDir+'/accounts/login.txt', 'r') as file:
             loginText = '<p class="login-text">'+file.read()+'</p>'    
 
@@ -426,6 +429,7 @@ def htmlHeader(css=None,lang='en') -> str:
             '  <meta charset="utf-8">\n' \
             '  <style>\n' \
             '    @import url("epicyon-profile.css");\n'+ \
+            '    background-color: #282c37' \
             '  </style>\n' \
             '  <body>\n'
     else: