diff --git a/static/darkmode.css b/static/darkmode.css
new file mode 100644
index 0000000000000000000000000000000000000000..0377f63a27f7e3c23f7e1c64d00f820b54fdabd6
--- /dev/null
+++ b/static/darkmode.css
@@ -0,0 +1,72 @@
+@media (prefers-color-scheme: dark) { /* Settings for darkmode */
+ body { /* background of the main page */
+ background: #151d28;
+ }
+ .form{ /* background and text color of the "window" in the center */
+ background: #1a2332;
+ color: #b3b3b3;
+ }
+ .form input{ /* style of the text input box (same color as form, but a brighter border) */
+ background: #1a2332;
+ border: solid #212a39;
+ color: #b3b3b3;
+ }
+
+ .form select{ /* style of the domain select box (same color as form, but a brighter border) */
+ background: #1a2332;
+ border: solid;
+ border-color: #212a39;
+ color: #b3b3b3;
+ }
+
+ .form button{ /* color of the big button */
+ background: #1cb09a;
+ color: #fff;
+ }
+ .form button:hover,.form button:active,.form button:focus { /* color of the button, if its hovered */
+ background: #189684;
+ color: #b3b3b3;
+ }
+
+ a { /* color of hyperlinks */
+ color: #1cb09a;
+ text-decoration: none;
+ }
+ #loginbar { /* loginbar style (background and text color) */
+ background-color: #1a2332;
+ color: #b3b3b3;
+ }
+ #loginbar a{ /* hyperlinks in login bar are not marked special */
+ color: #b3b3b3;
+ }
+
+ #snackbar { /* style options of the snackbar (bottom left) */
+ background-color: #1a2332;
+ color: #b3b3b3;
+ }
+
+ table#t01 th { /*text color configuration of the table */
+ color: #b3b3b3;
+ }
+ table#t01 tr:nth-child(even) { /* background color of the table entries (alternately bright and dark) */
+ background-color: #151c29;
+ color: #b3b3b3;
+ }
+ table#t01 tr:nth-child(odd) {
+ background-color: #10151f;
+ color: #b3b3b3;
+ }
+
+ .cookieinfo{
+ background: #1a2332;
+ color: #b3b3b3;
+ }
+
+ .cookieinfo-link{
+ color: #1cb09a;
+ }
+
+ .cookieinfo-close{
+ background: #1cb09a;
+ }
+}
\ No newline at end of file
diff --git a/static/font.css b/static/font.css
new file mode 100644
index 0000000000000000000000000000000000000000..7c90b7faf20375f810e5f5587a3a393d93bcc44a
--- /dev/null
+++ b/static/font.css
@@ -0,0 +1,56 @@
+/* cyrillic-ext */
+@font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
+ unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+ }
+ /* cyrillic */
+ @font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
+ unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+ }
+ /* greek-ext */
+ @font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
+ unicode-range: U+1F00-1FFF;
+ }
+ /* greek */
+ @font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
+ unicode-range: U+0370-03FF;
+ }
+ /* vietnamese */
+ @font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+ }
+ /* latin-ext */
+ @font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+ }
+ /* latin */
+ @font-face {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 300;
+ src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+ }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 5abcb3b17429c49427ef8b6c298936670f4e0d42..3aef430b45a16590d4d600985e1a6e7317b318c9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -216,134 +216,4 @@ to {bottom: 0; opacity: 0;}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
-}
-
-/* cyrillic-ext */
-@font-face {
-font-family: 'Roboto';
-font-style: normal;
-font-weight: 300;
-src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
-unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-font-family: 'Roboto';
-font-style: normal;
-font-weight: 300;
-src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
-unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* greek-ext */
-@font-face {
-font-family: 'Roboto';
-font-style: normal;
-font-weight: 300;
-src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
-unicode-range: U+1F00-1FFF;
-}
-/* greek */
-@font-face {
-font-family: 'Roboto';
-font-style: normal;
-font-weight: 300;
-src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
-unicode-range: U+0370-03FF;
-}
-/* vietnamese */
-@font-face {
-font-family: 'Roboto';
-font-style: normal;
-font-weight: 300;
-src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
-unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-font-family: 'Roboto';
-font-style: normal;
-font-weight: 300;
-src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
-unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-font-family: 'Roboto';
-font-style: normal;
-font-weight: 300;
-src: local('Roboto Light'), local('Roboto-Light'), url(/static/roboto-light.woff2) format('woff2');
-unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-@media (prefers-color-scheme: dark) { /* Settings for darkmode */
- body { /* background of the main page */
- background: #151d28;
- }
- .form{ /* background and text color of the "window" in the center */
- background: #1a2332;
- color: #b3b3b3;
- }
- .form input{ /* style of the text input box (same color as form, but a brighter border) */
- background: #1a2332;
- border: solid #212a39;
- color: #b3b3b3;
- }
-
- .form select{ /* style of the domain select box (same color as form, but a brighter border) */
- background: #1a2332;
- border: solid;
- border-color: #212a39;
- color: #b3b3b3;
- }
-
- .form button{ /* color of the big button */
- background: #1cb09a;
- color: #fff;
- }
- .form button:hover,.form button:active,.form button:focus { /* color of the button, if its hovered */
- background: #189684;
- color: #b3b3b3;
- }
-
- a { /* color of hyperlinks */
- color: #1cb09a;
- text-decoration: none;
- }
- #loginbar { /* loginbar style (background and text color) */
- background-color: #1a2332;
- color: #b3b3b3;
- }
- #loginbar a{ /* hyperlinks in login bar are not marked special */
- color: #b3b3b3;
- }
-
- #snackbar { /* style options of the snackbar (bottom left) */
- background-color: #1a2332;
- color: #b3b3b3;
- }
-
- table#t01 th { /*text color configuration of the table */
- color: #b3b3b3;
- }
- table#t01 tr:nth-child(even) { /* background color of the table entries (alternately bright and dark) */
- background-color: #151c29;
- color: #b3b3b3;
- }
- table#t01 tr:nth-child(odd) {
- background-color: #10151f;
- color: #b3b3b3;
- }
-
- .cookieinfo{
- background: #1a2332;
- color: #b3b3b3;
- }
-
- .cookieinfo-link{
- color: #1cb09a;
- }
-
- .cookieinfo-close{
- background: #1cb09a;
- }
}
\ No newline at end of file
diff --git a/templates/editEntries.html b/templates/editEntries.html
index 6146e82e77448726b09d150fe1e97a0442b62a2f..d787bcb7f8964f73d0303218c77cd51bc21706c6 100644
--- a/templates/editEntries.html
+++ b/templates/editEntries.html
@@ -3,6 +3,8 @@
<head>
<link href="/static/jquery-ui.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet">
+ <link href="/static/font.css" rel="stylesheet">
+ <link href="/static/darkmode.css" rel="stylesheet">
{% if cookieNotice %}
<script type="text/javascript" id="cookieinfo" src="/static/cookieinfo.js" ></script>
{% endif %}
diff --git a/templates/home.html b/templates/home.html
index 5057b6d653280f524726bff5706dabf3ab0ab0be..9103a713c5d685684cd0e63a349dbe2ab10eafab 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -3,6 +3,8 @@
<head>
<link href="/static/jquery-ui.css" rel="stylesheet">
<link href="/static/style.css" rel="stylesheet">
+ <link href="/static/font.css" rel="stylesheet">
+ <link href="/static/darkmode.css" rel="stylesheet">
<link href="/static/socialSignin/css/buttons-si.css" rel="stylesheet">
<title>URL shorter</title>
<script src="/static/external/jquery/jquery.js"></script>
diff --git a/templates/login.html b/templates/login.html
index 917e44fef960289cbc6104ed33905de494b94b9c..f5ed09f18a0b6b8dfdd815d01f360cbfc05961e0 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -2,6 +2,8 @@
<html lang="en">
<head>
<link href="/static/style.css" rel="stylesheet">
+ <link href="/static/font.css" rel="stylesheet">
+ <link href="/static/darkmode.css" rel="stylesheet">
<link href="/static/socialSignin/css/buttons-si.css" rel="stylesheet">
{% if cookieNotice %}
<script type="text/javascript" id="cookieinfo" src="/static/cookieinfo.js" ></script>