41 files changed, 225 insertions, 109 deletions

diff --git a/assets/css/styles.css b/assets/css/styles.css
index cd800f3..5144bda 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -87,7 +87,7 @@ a.collection-item {
 
 .datepicker-table td.is-selected.is-today {
     background-color: var(--color-primary);
-    color: white;
+    color: var(--background-color);
 }
 
 .datepicker-cancel {
@@ -159,7 +159,7 @@ a.collection-item {
 	left: 0;
 	bottom: 0;
 	width: 100%;
-	background-color: white;
+	background-color: var(--background-color);
 	text-align: center;
 	z-index: 60;
 }
diff --git a/assets/js/lang/bundle.js b/assets/js/lang/bundle.js
index b025486..8d0d6b9 100644
--- a/assets/js/lang/bundle.js
+++ b/assets/js/lang/bundle.js
@@ -285,6 +285,11 @@ var langstrings = {
         language: "language",
         selectLanguage: "select desired language",
         languageSet: "language set, open another page for the changes to take effect",
+        theme: "theme",
+        themeLight: "Light theme",
+        themeDark: "Dark theme",
+        selectTheme: "Select a theme",
+        themeSet: "theme set, open another page for the changes to take effect",
         // gsec
         gsecErrNet: "GimSIS connection error",
         gsecErrLogin: "GimSIS login error (bad password?), try logging out",
@@ -466,8 +471,13 @@ var langstrings = {
         privacyAcceptWithUse: "your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.",
         privacyEffectiveAsOf: "this policy is effective as of",
         language: "jezik",
-        selectLanguage: "izberi željen jezik",
+        selectLanguage: "izberite željen jezik",
         languageSet: "jezik nastavljen, odprite neko drugo stran da se pokažejo spremembe",
+        theme: "izgled",
+        themeLight: "svetel izgled",
+        themeDark: "temen izgled",
+        themeSet: "izgled nastavljen, odprite neko drugo stran da se spremembe uveljavijo",
+        selectTheme: "izberite željen izgled",
         // gsec
         gsecErrNet: "napaka povezave na GimSIS",
         gsecErrLogin: "prijava v GimSIS ni uspela (napačno geslo?), poskusite se odjaviti",
diff --git a/assets/js/lib/themes.js b/assets/js/lib/themes.js
new file mode 100644
index 0000000..d8a7ca1
--- /dev/null
+++ b/assets/js/lib/themes.js
@@ -0,0 +1,37 @@
+const THEME_COLOR_SCHEMES = {
+    light: {
+        "color-primary": "rgba(0, 128, 83, 1)",
+        "color-secondary": "rgba(0, 77, 50, 1)",
+        "color-accent": "rgba(0, 156, 101, 1)",
+        "color-primary-light": "rgba(230, 250, 231, 1)",
+        "color-invalid": "rgba(192, 0, 0, 1)",
+        "background-color": "rgba(255, 255, 255, 1)",
+        "background-accent": "rgba(0, 156, 101, 0.2)"
+    },
+    dark: {
+        "color-primary": "rgba(0, 128, 83, 1)",
+        "color-secondary": "rgba(0, 94, 61, 1)",
+        "color-accent": "rgba(20, 117, 83, 1)",
+        "color-primary-light": "rgba(230, 250, 231, 1)",
+        "color-invalid": "rgba(192, 0, 0, 1)",
+        "background-color": "rgba(31, 31, 31, 1)",
+        "background-accent": "rgba(0, 92, 44, 0.2)"
+    }
+}
+
+function applyTheme(themeName) {
+    for (const [property, value] of Object.entries(THEME_COLOR_SCHEMES[themeName])) {
+        document.documentElement.style.setProperty(`--${property}`, value);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    localforage.getItem("theme").then((selectedTheme) => {
+        if (selectedTheme == null) {
+            let isOsDarkTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+            applyTheme(isOsDarkTheme ? "dark" : "light");
+        } else {
+            applyTheme(selectedTheme);
+        }
+    });
+});
\ No newline at end of file
diff --git a/assets/js/settings.js b/assets/js/settings.js
index 0410aeb..411a38e 100644
--- a/assets/js/settings.js
+++ b/assets/js/settings.js
@@ -7,6 +7,13 @@ async function setLanguage(langCode)  {
     });
 }
 
+async function setTheme(targetTheme) {
+    localforage.setItem("targetTheme", targetTheme).then((value) => {
+        console.log("Theme set: " + value);
+        UIAlert(D("themeSet"), "setTheme(): themeSet");
+    });
+}
+
 document.addEventListener("DOMContentLoaded", async () => {
 
     $("#select-language").on("change", () => {
@@ -14,11 +21,21 @@ document.addEventListener("DOMContentLoaded", async () => {
         setLanguage(languageToSet);
     });
 
+    $("#select-theme").on("change", () => {
+        let themeToSet = $(this).find(":selected").data("theme");
+        setTheme(themeToSet);
+    });
+
     localforage.getItem("chosenLang").then((value) => {
         let selectedLanguage = value ?? "sl";
         $(`#option-${selectedLanguage}`).attr("selected", true);
     }).catch(() => {});
 
+    localforage.getItem("theme").then((value) => {
+        let selectedTheme = value ?? "sl";
+        $(`#option-${selectedTheme}`).attr("selected", true);
+    }).catch(() => {});
+
     // Setup side menu
     const menus = document.querySelectorAll(".side-menu");
     M.Sidenav.init(menus, { edge: "right", draggable: true });
diff --git a/assets/js/setup-storage.js b/assets/js/setup-storage.js
index a37fc8f..ad45ec7 100644
--- a/assets/js/setup-storage.js
+++ b/assets/js/setup-storage.js
@@ -17,13 +17,15 @@ async function setupStorage(force = false) {
         localforage.setItem("absences", {}),
         localforage.setItem("messages", { "0": [], "1": [], "2": []}), // see messages.js:129, commit 8eb9ca9caca30fbbe023243657535ab4088be377
         localforage.setItem("directory", {}), //\\ well I could remember my own code but I didn't.
-        localforage.setItem("meals", {})
+        localforage.setItem("meals", {}),
+        localforage.setItem("chosenLang", "en")
     ];
 
     if (logged_in && force == false) { // torej, če je že bila prijava narejena, ne posodobi backwards-compatible vrednosti (username, password,...)
         await Promise.all(promises_update);
         console.log("[setupStorage] user logged in: only updated");
     } else {
+
         let promises_first_install = [
             localforage.setItem("logged_in", false),
             localforage.setItem("username", ""),
diff --git a/assets/pages-src/about.bvr b/assets/pages-src/about.bvr
index 8e658a5..56fa810 100644
--- a/assets/pages-src/about.bvr
+++ b/assets/pages-src/about.bvr
@@ -22,6 +22,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/assets/pages-src/absences.bvr b/assets/pages-src/absences.bvr
index 60ee008..0561a3b 100644
--- a/assets/pages-src/absences.bvr
+++ b/assets/pages-src/absences.bvr
@@ -21,6 +21,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/gsec.js"></script> <!-- gimsisextclient -->
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
diff --git a/assets/pages-src/changelog.bvr b/assets/pages-src/changelog.bvr
index 4be0f75..63504cc 100644
--- a/assets/pages-src/changelog.bvr
+++ b/assets/pages-src/changelog.bvr
@@ -22,6 +22,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/assets/pages-src/chats.bvr b/assets/pages-src/chats.bvr
index 9e3e619..d454c14 100644
--- a/assets/pages-src/chats.bvr
+++ b/assets/pages-src/chats.bvr
@@ -7,22 +7,30 @@
 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
 		<meta name="google" content="notranslate">
 		<title>Chats &laquo; BežiApp</title>
+
 		<!-- Materialize -->
 		<link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
 		<link href="/css/materialicons.css" rel="stylesheet">
 		<script type="text/javascript" src="/js/lib/materialize.min.js"></script>
+
 		<script src="/js/lib/jquery.min.js"></script>
 		<script type="text/javascript" src="/js/lib/localforage.min.js"></script>
+
 		<link type="text/css" href="/css/styles.css" rel="stylesheet">
 		<link type="text/css" href="/css/bubbles.css" rel="stylesheet">
+
 		<script type="text/javascript" src="/js/lib/he.js" ></script>
 		<script type="text/javascript" src="/js/gsec.js" ></script>
 		<script type="text/javascript" src="/js/chats.js"></script>
+
 		<link rel="manifest" href="/manifest.json">
+
 		<script src="/js/app.js"></script>
+		<script src="/js/lib/themes.js"></script>
 		<script src="/js/lang/bundle.js"></script>
 		<script src="/js/lib/xss.js"></script>
 		<script src="/js/lib/sjcl.js"></script>
+
 		<link rel="shortcut icon" type="image/png" href="/favicon.png" />
 		<!-- iOS support -->
 		<link rel="apple-touch-icon" href="/img/icons/icon_96.png">
diff --git a/assets/pages-src/grades.bvr b/assets/pages-src/grades.bvr
index 7615e65..0c28f15 100644
--- a/assets/pages-src/grades.bvr
+++ b/assets/pages-src/grades.bvr
@@ -22,6 +22,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/assets/pages-src/gradings.bvr b/assets/pages-src/gradings.bvr
index 3239e68..0f693e2 100644
--- a/assets/pages-src/gradings.bvr
+++ b/assets/pages-src/gradings.bvr
@@ -29,6 +29,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/assets/pages-src/jitsi.bvr b/assets/pages-src/jitsi.bvr
index a67e4ef..bf0a656 100644
--- a/assets/pages-src/jitsi.bvr
+++ b/assets/pages-src/jitsi.bvr
@@ -7,19 +7,26 @@
 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
 		<meta name="google" content="notranslate">
 		<title>GimB Meet &laquo; BežiApp</title>
+
 		<!-- Materialize -->
 		<link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
 		<link href="/css/materialicons.css" rel="stylesheet">
 		<link href="/css/fontawesome.min.css" rel="stylesheet">
 		<script type="text/javascript" src="/js/lib/materialize.min.js"></script>
+
 		<script src="/js/lib/jquery.min.js"></script>
 		<script type="text/javascript" src="/js/lib/localforage.min.js"></script>
+
 		<link type="text/css" href="/css/styles.css" rel="stylesheet">
 		<link rel="manifest" href="/manifest.json">
+
 		<script src="/js/app.js"></script>
+		<script src="/js/lib/themes.js"></script>
 		<script src="/js/lang/bundle.js"></script>
 		<script src="/js/jitsi.js"></script>
+
 		<link rel="shortcut icon" type="image/png" href="/favicon.png" />
+
 		<!-- iOS support -->
 		<link rel="apple-touch-icon" href="/img/icons/icon_96.png">
 		<link rel="apple-touch-icon" href="/img/icons/icon_512.png">
diff --git a/assets/pages-src/meals.bvr b/assets/pages-src/meals.bvr
index 38f8371..47ef8a5 100644
--- a/assets/pages-src/meals.bvr
+++ b/assets/pages-src/meals.bvr
@@ -22,6 +22,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+	<script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/assets/pages-src/messaging.bvr b/assets/pages-src/messaging.bvr
index f6e561b..d302ae6 100644
--- a/assets/pages-src/messaging.bvr
+++ b/assets/pages-src/messaging.bvr
@@ -21,6 +21,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <script src="/js/lib/xss.js"></script>
     <script src="/js/lib/sjcl.js"></script>
diff --git a/assets/pages-src/privacypolicy.bvr b/assets/pages-src/privacypolicy.bvr
index fc52475..4e13e67 100644
--- a/assets/pages-src/privacypolicy.bvr
+++ b/assets/pages-src/privacypolicy.bvr
@@ -22,6 +22,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/assets/pages-src/settings.bvr b/assets/pages-src/settings.bvr
index 135ca91..8d5193c 100644
--- a/assets/pages-src/settings.bvr
+++ b/assets/pages-src/settings.bvr
@@ -22,6 +22,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
@@ -56,61 +57,25 @@
         <div class="row">
             <h5><x-su>language</x-su></h5>
             <div class="input-field col s12">
+                <i class="material-icons prefix">translate</i>
                 <select class="icons" id="select-language">
                     <option value="" id="option-sl" data-language="sl" data-icon="/img/flags/sl.svg" selected>Slovenščina</option>
                     <option value="" id="option-en" data-language="en" data-icon="/img/flags/en.svg">English</option>
                 </select>
                 <label><x-su>selectLanguage</x-su></label>
             </div>
-            <!-- <div class="col s12">
-                <div class="collection">
-                    <a data-language="sl" class="collection-item settings-language-selector" href="#">
-                        <div>
-                            Slovenščina
-                            <div class="secondary-content">
-                                <img class="flag-icon" src="/img/flags/sl.svg" />
-                            </div>
-                        </div>
-                    </a>
-                    <a data-language="en" class="collection-item settings-language-selector" href="#">
-                        <div>
-                            English
-                            <div class="secondary-content">
-                                <img class="flag-icon" src="/img/flags/en.svg" />
-                            </div>
-                        </div>
-                    </a>
-										<!--
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Srpskohrvatski</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Македонски</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Français</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Deutsch</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Español</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Русский</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">汉语</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">日本語</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Lingua latīna</span>
-	                    </li>
-										-->
-                </div>
-            </div> -->
+        </div>
+
+        <div class="row">
+            <h5><x-su>theme</x-su></h5>
+            <div class="input-field col s12">
+                <i class="material-icons prefix">palette</i>
+                <select class="icons" id="select-theme">
+                    <option value="" id="option-light" data-theme="light" selected><x-su>themeLight</x-su></option>
+                    <option value="" id="option-dark" data-theme="dark"><x-su>themeDark</x-su></option>
+                </select>
+                <label><x-su>selectTheme</x-su></label>
+            </div>
         </div>
     </div>
 </body>
diff --git a/assets/pages-src/teachers.bvr b/assets/pages-src/teachers.bvr
index 37ff3e2..e3993b3 100644
--- a/assets/pages-src/teachers.bvr
+++ b/assets/pages-src/teachers.bvr
@@ -22,6 +22,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/assets/pages-src/timetable.bvr b/assets/pages-src/timetable.bvr
index 0d8363c..b8c6b06 100644
--- a/assets/pages-src/timetable.bvr
+++ b/assets/pages-src/timetable.bvr
@@ -31,6 +31,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/assets/pages-src/tos.bvr b/assets/pages-src/tos.bvr
index b96eccc..5deea14 100644
--- a/assets/pages-src/tos.bvr
+++ b/assets/pages-src/tos.bvr
@@ -22,6 +22,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/assets/root/login.html b/assets/root/login.html
index bbacb7d..542b157 100644
--- a/assets/root/login.html
+++ b/assets/root/login.html
@@ -21,6 +21,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/css/styles.css b/dist/css/styles.css
index cd800f3..5144bda 100644
--- a/dist/css/styles.css
+++ b/dist/css/styles.css
@@ -87,7 +87,7 @@ a.collection-item {
 
 .datepicker-table td.is-selected.is-today {
     background-color: var(--color-primary);
-    color: white;
+    color: var(--background-color);
 }
 
 .datepicker-cancel {
@@ -159,7 +159,7 @@ a.collection-item {
 	left: 0;
 	bottom: 0;
 	width: 100%;
-	background-color: white;
+	background-color: var(--background-color);
 	text-align: center;
 	z-index: 60;
 }
diff --git a/dist/js/lang/bundle.js b/dist/js/lang/bundle.js
index b025486..8d0d6b9 100644
--- a/dist/js/lang/bundle.js
+++ b/dist/js/lang/bundle.js
@@ -285,6 +285,11 @@ var langstrings = {
         language: "language",
         selectLanguage: "select desired language",
         languageSet: "language set, open another page for the changes to take effect",
+        theme: "theme",
+        themeLight: "Light theme",
+        themeDark: "Dark theme",
+        selectTheme: "Select a theme",
+        themeSet: "theme set, open another page for the changes to take effect",
         // gsec
         gsecErrNet: "GimSIS connection error",
         gsecErrLogin: "GimSIS login error (bad password?), try logging out",
@@ -466,8 +471,13 @@ var langstrings = {
         privacyAcceptWithUse: "your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.",
         privacyEffectiveAsOf: "this policy is effective as of",
         language: "jezik",
-        selectLanguage: "izberi željen jezik",
+        selectLanguage: "izberite željen jezik",
         languageSet: "jezik nastavljen, odprite neko drugo stran da se pokažejo spremembe",
+        theme: "izgled",
+        themeLight: "svetel izgled",
+        themeDark: "temen izgled",
+        themeSet: "izgled nastavljen, odprite neko drugo stran da se spremembe uveljavijo",
+        selectTheme: "izberite željen izgled",
         // gsec
         gsecErrNet: "napaka povezave na GimSIS",
         gsecErrLogin: "prijava v GimSIS ni uspela (napačno geslo?), poskusite se odjaviti",
diff --git a/dist/js/lib/themes.js b/dist/js/lib/themes.js
new file mode 100644
index 0000000..d8a7ca1
--- /dev/null
+++ b/dist/js/lib/themes.js
@@ -0,0 +1,37 @@
+const THEME_COLOR_SCHEMES = {
+    light: {
+        "color-primary": "rgba(0, 128, 83, 1)",
+        "color-secondary": "rgba(0, 77, 50, 1)",
+        "color-accent": "rgba(0, 156, 101, 1)",
+        "color-primary-light": "rgba(230, 250, 231, 1)",
+        "color-invalid": "rgba(192, 0, 0, 1)",
+        "background-color": "rgba(255, 255, 255, 1)",
+        "background-accent": "rgba(0, 156, 101, 0.2)"
+    },
+    dark: {
+        "color-primary": "rgba(0, 128, 83, 1)",
+        "color-secondary": "rgba(0, 94, 61, 1)",
+        "color-accent": "rgba(20, 117, 83, 1)",
+        "color-primary-light": "rgba(230, 250, 231, 1)",
+        "color-invalid": "rgba(192, 0, 0, 1)",
+        "background-color": "rgba(31, 31, 31, 1)",
+        "background-accent": "rgba(0, 92, 44, 0.2)"
+    }
+}
+
+function applyTheme(themeName) {
+    for (const [property, value] of Object.entries(THEME_COLOR_SCHEMES[themeName])) {
+        document.documentElement.style.setProperty(`--${property}`, value);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    localforage.getItem("theme").then((selectedTheme) => {
+        if (selectedTheme == null) {
+            let isOsDarkTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+            applyTheme(isOsDarkTheme ? "dark" : "light");
+        } else {
+            applyTheme(selectedTheme);
+        }
+    });
+});
\ No newline at end of file
diff --git a/dist/js/settings.js b/dist/js/settings.js
index 0410aeb..411a38e 100644
--- a/dist/js/settings.js
+++ b/dist/js/settings.js
@@ -7,6 +7,13 @@ async function setLanguage(langCode)  {
     });
 }
 
+async function setTheme(targetTheme) {
+    localforage.setItem("targetTheme", targetTheme).then((value) => {
+        console.log("Theme set: " + value);
+        UIAlert(D("themeSet"), "setTheme(): themeSet");
+    });
+}
+
 document.addEventListener("DOMContentLoaded", async () => {
 
     $("#select-language").on("change", () => {
@@ -14,11 +21,21 @@ document.addEventListener("DOMContentLoaded", async () => {
         setLanguage(languageToSet);
     });
 
+    $("#select-theme").on("change", () => {
+        let themeToSet = $(this).find(":selected").data("theme");
+        setTheme(themeToSet);
+    });
+
     localforage.getItem("chosenLang").then((value) => {
         let selectedLanguage = value ?? "sl";
         $(`#option-${selectedLanguage}`).attr("selected", true);
     }).catch(() => {});
 
+    localforage.getItem("theme").then((value) => {
+        let selectedTheme = value ?? "sl";
+        $(`#option-${selectedTheme}`).attr("selected", true);
+    }).catch(() => {});
+
     // Setup side menu
     const menus = document.querySelectorAll(".side-menu");
     M.Sidenav.init(menus, { edge: "right", draggable: true });
diff --git a/dist/js/setup-storage.js b/dist/js/setup-storage.js
index a37fc8f..ad45ec7 100644
--- a/dist/js/setup-storage.js
+++ b/dist/js/setup-storage.js
@@ -17,13 +17,15 @@ async function setupStorage(force = false) {
         localforage.setItem("absences", {}),
         localforage.setItem("messages", { "0": [], "1": [], "2": []}), // see messages.js:129, commit 8eb9ca9caca30fbbe023243657535ab4088be377
         localforage.setItem("directory", {}), //\\ well I could remember my own code but I didn't.
-        localforage.setItem("meals", {})
+        localforage.setItem("meals", {}),
+        localforage.setItem("chosenLang", "en")
     ];
 
     if (logged_in && force == false) { // torej, če je že bila prijava narejena, ne posodobi backwards-compatible vrednosti (username, password,...)
         await Promise.all(promises_update);
         console.log("[setupStorage] user logged in: only updated");
     } else {
+
         let promises_first_install = [
             localforage.setItem("logged_in", false),
             localforage.setItem("username", ""),
diff --git a/dist/login.html b/dist/login.html
index bbacb7d..542b157 100644
--- a/dist/login.html
+++ b/dist/login.html
@@ -21,6 +21,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/pages/about.html b/dist/pages/about.html
index bf94e8a..e919542 100644
--- a/dist/pages/about.html
+++ b/dist/pages/about.html
@@ -25,6 +25,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
@@ -142,7 +143,7 @@
 				<div class="row">
 					<p>
 						<small>
-							^HEAD 6cb957cc1f64123851ae28e37b601fe7b92e2658
+							^HEAD c4599c626fc484703528743552dd8ff694fab7a6
 					</p>
 				</div>
     </div>
diff --git a/dist/pages/absences.html b/dist/pages/absences.html
index 1d841a9..ef5803a 100644
--- a/dist/pages/absences.html
+++ b/dist/pages/absences.html
@@ -24,6 +24,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/gsec.js"></script> <!-- gimsisextclient -->
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
diff --git a/dist/pages/changelog.html b/dist/pages/changelog.html
index 6f4ed95..85abf6d 100644
--- a/dist/pages/changelog.html
+++ b/dist/pages/changelog.html
@@ -25,6 +25,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/pages/chats.html b/dist/pages/chats.html
index 634d9ff..bf9d382 100644
--- a/dist/pages/chats.html
+++ b/dist/pages/chats.html
@@ -10,22 +10,30 @@
 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
 		<meta name="google" content="notranslate">
 		<title>Chats &laquo; BežiApp</title>
+
 		<!-- Materialize -->
 		<link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
 		<link href="/css/materialicons.css" rel="stylesheet">
 		<script type="text/javascript" src="/js/lib/materialize.min.js"></script>
+
 		<script src="/js/lib/jquery.min.js"></script>
 		<script type="text/javascript" src="/js/lib/localforage.min.js"></script>
+
 		<link type="text/css" href="/css/styles.css" rel="stylesheet">
 		<link type="text/css" href="/css/bubbles.css" rel="stylesheet">
+
 		<script type="text/javascript" src="/js/lib/he.js" ></script>
 		<script type="text/javascript" src="/js/gsec.js" ></script>
 		<script type="text/javascript" src="/js/chats.js"></script>
+
 		<link rel="manifest" href="/manifest.json">
+
 		<script src="/js/app.js"></script>
+		<script src="/js/lib/themes.js"></script>
 		<script src="/js/lang/bundle.js"></script>
 		<script src="/js/lib/xss.js"></script>
 		<script src="/js/lib/sjcl.js"></script>
+
 		<link rel="shortcut icon" type="image/png" href="/favicon.png" />
 		<!-- iOS support -->
 		<link rel="apple-touch-icon" href="/img/icons/icon_96.png">
diff --git a/dist/pages/grades.html b/dist/pages/grades.html
index 583aab3..ad80ba1 100644
--- a/dist/pages/grades.html
+++ b/dist/pages/grades.html
@@ -25,6 +25,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/pages/gradings.html b/dist/pages/gradings.html
index 9b51684..951d09f 100644
--- a/dist/pages/gradings.html
+++ b/dist/pages/gradings.html
@@ -32,6 +32,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/pages/jitsi.html b/dist/pages/jitsi.html
index a37f7ff..51ca53f 100644
--- a/dist/pages/jitsi.html
+++ b/dist/pages/jitsi.html
@@ -10,19 +10,26 @@
 		<meta http-equiv="X-UA-Compatible" content="ie=edge">
 		<meta name="google" content="notranslate">
 		<title>GimB Meet &laquo; BežiApp</title>
+
 		<!-- Materialize -->
 		<link type="text/css" href="/css/materialize.min.css" rel="stylesheet">
 		<link href="/css/materialicons.css" rel="stylesheet">
 		<link href="/css/fontawesome.min.css" rel="stylesheet">
 		<script type="text/javascript" src="/js/lib/materialize.min.js"></script>
+
 		<script src="/js/lib/jquery.min.js"></script>
 		<script type="text/javascript" src="/js/lib/localforage.min.js"></script>
+
 		<link type="text/css" href="/css/styles.css" rel="stylesheet">
 		<link rel="manifest" href="/manifest.json">
+
 		<script src="/js/app.js"></script>
+		<script src="/js/lib/themes.js"></script>
 		<script src="/js/lang/bundle.js"></script>
 		<script src="/js/jitsi.js"></script>
+
 		<link rel="shortcut icon" type="image/png" href="/favicon.png" />
+
 		<!-- iOS support -->
 		<link rel="apple-touch-icon" href="/img/icons/icon_96.png">
 		<link rel="apple-touch-icon" href="/img/icons/icon_512.png">
diff --git a/dist/pages/meals.html b/dist/pages/meals.html
index 058d2e1..da1c666 100644
--- a/dist/pages/meals.html
+++ b/dist/pages/meals.html
@@ -25,6 +25,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+	<script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/pages/messaging.html b/dist/pages/messaging.html
index 343c972..1afcd28 100644
--- a/dist/pages/messaging.html
+++ b/dist/pages/messaging.html
@@ -24,6 +24,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <script src="/js/lib/xss.js"></script>
     <script src="/js/lib/sjcl.js"></script>
diff --git a/dist/pages/privacypolicy.html b/dist/pages/privacypolicy.html
index 24048d4..301ff88 100644
--- a/dist/pages/privacypolicy.html
+++ b/dist/pages/privacypolicy.html
@@ -25,6 +25,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/pages/settings.html b/dist/pages/settings.html
index af9d36d..2eeb724 100644
--- a/dist/pages/settings.html
+++ b/dist/pages/settings.html
@@ -25,6 +25,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
@@ -77,61 +78,25 @@
         <div class="row">
             <h5><x-su>language</x-su></h5>
             <div class="input-field col s12">
+                <i class="material-icons prefix">translate</i>
                 <select class="icons" id="select-language">
                     <option value="" id="option-sl" data-language="sl" data-icon="/img/flags/sl.svg" selected>Slovenščina</option>
                     <option value="" id="option-en" data-language="en" data-icon="/img/flags/en.svg">English</option>
                 </select>
                 <label><x-su>selectLanguage</x-su></label>
             </div>
-            <!-- <div class="col s12">
-                <div class="collection">
-                    <a data-language="sl" class="collection-item settings-language-selector" href="#">
-                        <div>
-                            Slovenščina
-                            <div class="secondary-content">
-                                <img class="flag-icon" src="/img/flags/sl.svg" />
-                            </div>
-                        </div>
-                    </a>
-                    <a data-language="en" class="collection-item settings-language-selector" href="#">
-                        <div>
-                            English
-                            <div class="secondary-content">
-                                <img class="flag-icon" src="/img/flags/en.svg" />
-                            </div>
-                        </div>
-                    </a>
-										<!--
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Srpskohrvatski</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Македонски</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Français</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Deutsch</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Español</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Русский</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">汉语</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">日本語</span>
-	                    </li>
-	                    <li class="collection-item waves-effect">
-	                        <span class="title about-text">Lingua latīna</span>
-	                    </li>
-										-->
-                </div>
-            </div> -->
+        </div>
+
+        <div class="row">
+            <h5><x-su>theme</x-su></h5>
+            <div class="input-field col s12">
+                <i class="material-icons prefix">palette</i>
+                <select class="icons" id="select-theme">
+                    <option value="" id="option-light" data-theme="light" selected><x-su>themeLight</x-su></option>
+                    <option value="" id="option-dark" data-theme="dark"><x-su>themeDark</x-su></option>
+                </select>
+                <label><x-su>selectTheme</x-su></label>
+            </div>
         </div>
     </div>
 </body>
diff --git a/dist/pages/teachers.html b/dist/pages/teachers.html
index f29d2df..ffc0b1b 100644
--- a/dist/pages/teachers.html
+++ b/dist/pages/teachers.html
@@ -25,6 +25,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/pages/timetable.html b/dist/pages/timetable.html
index ae2f6b2..83095df 100644
--- a/dist/pages/timetable.html
+++ b/dist/pages/timetable.html
@@ -34,6 +34,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/pages/tos.html b/dist/pages/tos.html
index ad4b23b..0685e07 100644
--- a/dist/pages/tos.html
+++ b/dist/pages/tos.html
@@ -25,6 +25,7 @@
 
     <link rel="manifest" href="/manifest.json">
     <script src="/js/app.js"></script>
+    <script src="/js/lib/themes.js"></script>
     <script src="/js/lang/bundle.js"></script>
     <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
diff --git a/dist/sw.js b/dist/sw.js
index 1325c01..c8eea7e 100644
--- a/dist/sw.js
+++ b/dist/sw.js
@@ -3,8 +3,8 @@
 
 
 // Change version to cause cache refresh
-const static_cache_name = "site-static-1.0.13-beta-6cb957c";
-// latest commit is 6cb957cc1f64123851ae28e37b601fe7b92e2658
+const static_cache_name = "site-static-1.0.13-beta-c4599c6";
+// latest commit is c4599c626fc484703528743552dd8ff694fab7a6
 // Got them with find . -not -path '*/\.*' | sed "s/.*/\"&\",/" | grep -v sw.js
 // sw.js NE SME BITI CACHAN, ker vsebuje verzijo!