From a3b63618b411e3d863192ad763631ad9c235c291 Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Fri, 24 Jul 2020 22:47:21 +0200
Subject: [PATCH 01/11] add seperate modules for dark and light theme

---
 src/App.css                                   | 12 -----
 src/App.js                                    | 51 ++++++++-----------
 src/App.module.css                            | 51 +++++++++++++++++++
 src/AppDarkTheme.module.css                   |  8 +++
 src/AppLightTheme.module.css                  |  8 +++
 src/GlobalInfos.js                            | 10 ++++
 src/elements/PageTitle/PageTitle.js           | 13 +++--
 .../PageTitle/PageTitleDarkTheme.module.css   | 11 ++++
 .../PageTitle/PageTitleLightTheme.module.css  |  0
 src/index.css                                 |  2 +-
 10 files changed, 119 insertions(+), 47 deletions(-)
 delete mode 100644 src/App.css
 create mode 100644 src/App.module.css
 create mode 100644 src/AppDarkTheme.module.css
 create mode 100644 src/AppLightTheme.module.css
 create mode 100644 src/GlobalInfos.js
 create mode 100644 src/elements/PageTitle/PageTitleDarkTheme.module.css
 create mode 100644 src/elements/PageTitle/PageTitleLightTheme.module.css

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index af62d60..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.nav-item {
-    cursor: pointer;
-}
-
-.nav-link {
-    color: rgba(255, 255, 255, .5);
-    font-weight: bold;
-}
-
-.nav-link:hover {
-    color: rgba(255, 255, 255, 1);
-}
diff --git a/src/App.js b/src/App.js
index 56a9467..959241e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,14 @@
 import React from 'react';
-import "./App.css"
 import HomePage from "./pages/HomePage/HomePage";
 import RandomPage from "./pages/RandomPage/RandomPage";
+import StaticInfos from "./GlobalInfos";
 
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
+import style from './App.module.css'
+import lighttheme from './AppLightTheme.module.css'
+import darktheme from './AppDarkTheme.module.css'
+
 import SettingsPage from "./pages/SettingsPage/SettingsPage";
 import CategoryPage from "./pages/CategoryPage/CategoryPage";
 
@@ -78,38 +82,25 @@ class App extends React.Component {
     }
 
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
             <div className="App">
-                <nav className="navbar navbar-expand-sm bg-primary navbar-dark">
-                    <div className="navbar-brand">{this.state.mediacentername}</div>
+                <div className={[style.navcontainer, themeStyle.navcontainer].join(' ')}>
+                    <div className={style.navbrand}>{this.state.mediacentername}</div>
 
-                    <ul className="navbar-nav">
-                        <li className="nav-item">
-                            <div className="nav-link"
-                                 style={this.state.page === "default" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.setState({page: "default"})}>Home
-                            </div>
-                        </li>
-                        <li className="nav-item">
-                            <div className="nav-link"
-                                 style={this.state.page === "random" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.setState({page: "random"})}>Random Video
-                            </div>
-                        </li>
-                        <li className="nav-item">
-                            <div className="nav-link"
-                                 style={this.state.page === "categories" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.setState({page: "categories"})}>Categories
-                            </div>
-                        </li>
-                        <li className="nav-item">
-                            <div className="nav-link"
-                                 style={this.state.page === "settings" ? {color: "rgba(255,255,255,.75"} : {}}
-                                 onClick={() => this.setState({page: "settings"})}>Settings
-                            </div>
-                        </li>
-                    </ul>
-                </nav>
+                    <div className={[style.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
+                         onClick={() => this.setState({page: "default"})}>Home
+                    </div>
+                    <div className={[style.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
+                         onClick={() => this.setState({page: "random"})}>Random Video
+                    </div>
+                    <div className={[style.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
+                         onClick={() => this.setState({page: "categories"})}>Categories
+                    </div>
+                    <div className={[style.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
+                         onClick={() => this.setState({page: "settings"})}>Settings
+                    </div>
+                </div>
                 {this.state.generalSettingsLoaded ? this.MainBody() : "loading"}
             </div>
         );
diff --git a/src/App.module.css b/src/App.module.css
new file mode 100644
index 0000000..0ae8d7b
--- /dev/null
+++ b/src/App.module.css
@@ -0,0 +1,51 @@
+.navitem {
+    float: left;
+    margin-left: 20px;
+
+    cursor: pointer;
+    opacity: 0.6;
+
+    font-size: large;
+    font-weight: bold;
+    text-transform: capitalize;
+}
+
+.navitem:hover {
+    opacity: 1;
+    transition: opacity .5s;
+}
+
+.navitem::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 2px;
+    background: #FFF;
+    transition: width .3s;
+}
+
+.navitem:hover::after {
+    width: 100%;
+}
+
+
+.navitemselected{
+    opacity: 0.85;
+}
+
+.navcontainer {
+    padding-top: 20px;
+    width: 100%;
+    padding-bottom: 30px;
+}
+
+.navbrand {
+    margin-left: 20px;
+    margin-right: 20px;
+    font-size: large;
+    font-weight: bold;
+    text-transform: capitalize;
+    float:left;
+}
+
+
diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
new file mode 100644
index 0000000..52d9939
--- /dev/null
+++ b/src/AppDarkTheme.module.css
@@ -0,0 +1,8 @@
+.navcontainer{
+    background-color: #141520;
+    color: white;
+}
+
+.navitem::after {
+    background: white;
+}
diff --git a/src/AppLightTheme.module.css b/src/AppLightTheme.module.css
new file mode 100644
index 0000000..7424440
--- /dev/null
+++ b/src/AppLightTheme.module.css
@@ -0,0 +1,8 @@
+.navcontainer{
+    background-color: white;
+    color: black;
+}
+
+.navitem::after {
+    background: black;
+}
diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js
new file mode 100644
index 0000000..d44f051
--- /dev/null
+++ b/src/GlobalInfos.js
@@ -0,0 +1,10 @@
+class GlobalInfos {
+    isDarkTheme() {
+        return true;
+    };
+}
+
+const StaticInfos = new GlobalInfos();
+Object.freeze(StaticInfos);
+
+export default StaticInfos;
diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js
index cce4ec9..67b55df 100644
--- a/src/elements/PageTitle/PageTitle.js
+++ b/src/elements/PageTitle/PageTitle.js
@@ -1,5 +1,8 @@
 import React from "react";
 import style from "./PageTitle.module.css"
+import darktheme from "./PageTitleDarkTheme.module.css"
+import lighttheme from "./PageTitleLightTheme.module.css"
+import StaticInfos from "../../GlobalInfos";
 
 class PageTitle extends React.Component {
     constructor(props) {
@@ -10,17 +13,19 @@ class PageTitle extends React.Component {
     }
 
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
-            <div className={style.pageheader}>
-                <span className={style.pageheadertitle}>{this.props.title}</span>
+            <div className={style.pageheader + ' ' + themeStyle.pageheader}>
+                <span className={style.pageheadertitle + ' ' + themeStyle.pageheadertitle}>{this.props.title}</span>
                 <span className={style.pageheadersubtitle}>{this.props.subtitle}</span>
                 <>
                     {this.props.children}
                 </>
                 <hr/>
             </div>
-        );
+        )
+            ;
     }
 }
 
-export default PageTitle;
\ No newline at end of file
+export default PageTitle;
diff --git a/src/elements/PageTitle/PageTitleDarkTheme.module.css b/src/elements/PageTitle/PageTitleDarkTheme.module.css
new file mode 100644
index 0000000..d41632e
--- /dev/null
+++ b/src/elements/PageTitle/PageTitleDarkTheme.module.css
@@ -0,0 +1,11 @@
+.pageheader {
+    background-color: #141520;
+}
+
+.pageheadertitle {
+    color:white;
+}
+
+.pageheadersubtitle {
+    color:white;
+}
diff --git a/src/elements/PageTitle/PageTitleLightTheme.module.css b/src/elements/PageTitle/PageTitleLightTheme.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/index.css b/src/index.css
index d9d3047..cd1a456 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,4 +5,4 @@ body {
     sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-}
\ No newline at end of file
+}

From aa741c5a900429873c5f47df4d0534c1dae98ed0 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Sun, 26 Jul 2020 18:17:29 +0200
Subject: [PATCH 02/11] only two style files

---
 src/App.js                                    | 12 ++++++-----
 src/App.module.css                            | 11 ++++++----
 src/AppDarkTheme.module.css                   | 14 ++++++++++++-
 src/AppLightTheme.module.css                  | 21 ++++++++++++++-----
 src/elements/PageTitle/PageTitle.js           | 15 +++++++------
 src/elements/PageTitle/PageTitle.module.css   |  5 +----
 .../PageTitle/PageTitleDarkTheme.module.css   | 11 ----------
 .../PageTitle/PageTitleLightTheme.module.css  |  0
 src/elements/Preview/Preview.js               |  6 +++++-
 src/elements/Preview/Preview.module.css       |  2 +-
 src/pages/Player/Player.js                    |  7 ++++++-
 11 files changed, 63 insertions(+), 41 deletions(-)
 delete mode 100644 src/elements/PageTitle/PageTitleDarkTheme.module.css
 delete mode 100644 src/elements/PageTitle/PageTitleLightTheme.module.css

diff --git a/src/App.js b/src/App.js
index 959241e..cc76a36 100644
--- a/src/App.js
+++ b/src/App.js
@@ -83,21 +83,23 @@ class App extends React.Component {
 
     render() {
         const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        // add the main theme to the page body
+        document.body.className += ' ' + themeStyle.backgroundcolor;
         return (
             <div className="App">
-                <div className={[style.navcontainer, themeStyle.navcontainer].join(' ')}>
+                <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
                     <div className={style.navbrand}>{this.state.mediacentername}</div>
 
-                    <div className={[style.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
                          onClick={() => this.setState({page: "default"})}>Home
                     </div>
-                    <div className={[style.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
                          onClick={() => this.setState({page: "random"})}>Random Video
                     </div>
-                    <div className={[style.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
                          onClick={() => this.setState({page: "categories"})}>Categories
                     </div>
-                    <div className={[style.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
+                    <div className={[style.navitem, themeStyle.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
                          onClick={() => this.setState({page: "settings"})}>Settings
                     </div>
                 </div>
diff --git a/src/App.module.css b/src/App.module.css
index 0ae8d7b..adb0857 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -20,7 +20,6 @@
     display: block;
     width: 0;
     height: 2px;
-    background: #FFF;
     transition: width .3s;
 }
 
@@ -29,14 +28,18 @@
 }
 
 
-.navitemselected{
+.navitemselected {
     opacity: 0.85;
 }
 
 .navcontainer {
     padding-top: 20px;
     width: 100%;
-    padding-bottom: 30px;
+    padding-bottom: 40px;
+
+    border-width: 0;
+    border-style: dotted;
+    border-bottom-width: 2px;
 }
 
 .navbrand {
@@ -45,7 +48,7 @@
     font-size: large;
     font-weight: bold;
     text-transform: capitalize;
-    float:left;
+    float: left;
 }
 
 
diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
index 52d9939..e319acf 100644
--- a/src/AppDarkTheme.module.css
+++ b/src/AppDarkTheme.module.css
@@ -1,8 +1,20 @@
-.navcontainer{
+.backgroundcolor{
     background-color: #141520;
+}
+
+.textcolor{
     color: white;
 }
 
 .navitem::after {
     background: white;
 }
+
+.hrcolor{
+    border-color: rgba(255,255,255,.1);
+}
+
+.previewhover:hover{
+    box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
+}
+
diff --git a/src/AppLightTheme.module.css b/src/AppLightTheme.module.css
index 7424440..95b7e55 100644
--- a/src/AppLightTheme.module.css
+++ b/src/AppLightTheme.module.css
@@ -1,8 +1,19 @@
-.navcontainer{
-    background-color: white;
-    color: black;
-}
-
 .navitem::after {
     background: black;
 }
+
+.backgroundcolor {
+    background-color: white;
+}
+
+.textcolor {
+    color: black;
+}
+
+.hrcolor {
+    border-color: rgba(0, 0, 0, 0.1);
+}
+
+.previewhover:hover{
+    box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
+}
diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js
index 67b55df..360fcd1 100644
--- a/src/elements/PageTitle/PageTitle.js
+++ b/src/elements/PageTitle/PageTitle.js
@@ -1,7 +1,7 @@
 import React from "react";
 import style from "./PageTitle.module.css"
-import darktheme from "./PageTitleDarkTheme.module.css"
-import lighttheme from "./PageTitleLightTheme.module.css"
+import darktheme from "../../AppDarkTheme.module.css"
+import lighttheme from "../../AppLightTheme.module.css"
 import StaticInfos from "../../GlobalInfos";
 
 class PageTitle extends React.Component {
@@ -15,16 +15,15 @@ class PageTitle extends React.Component {
     render() {
         const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
-            <div className={style.pageheader + ' ' + themeStyle.pageheader}>
-                <span className={style.pageheadertitle + ' ' + themeStyle.pageheadertitle}>{this.props.title}</span>
-                <span className={style.pageheadersubtitle}>{this.props.subtitle}</span>
+            <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
+                <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
+                <span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
                 <>
                     {this.props.children}
                 </>
-                <hr/>
+                <hr className={themeStyle.hrcolor}/>
             </div>
-        )
-            ;
+        );
     }
 }
 
diff --git a/src/elements/PageTitle/PageTitle.module.css b/src/elements/PageTitle/PageTitle.module.css
index 1739eab..76b3fcb 100644
--- a/src/elements/PageTitle/PageTitle.module.css
+++ b/src/elements/PageTitle/PageTitle.module.css
@@ -1,8 +1,5 @@
 .pageheader {
-    margin-top: 20px;
-    margin-bottom: 20px;
-    padding-left: 22%;
-    padding-right: 12%;
+    padding: 20px 12% 20px 22%;
 }
 
 .pageheadertitle {
diff --git a/src/elements/PageTitle/PageTitleDarkTheme.module.css b/src/elements/PageTitle/PageTitleDarkTheme.module.css
deleted file mode 100644
index d41632e..0000000
--- a/src/elements/PageTitle/PageTitleDarkTheme.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.pageheader {
-    background-color: #141520;
-}
-
-.pageheadertitle {
-    color:white;
-}
-
-.pageheadersubtitle {
-    color:white;
-}
diff --git a/src/elements/PageTitle/PageTitleLightTheme.module.css b/src/elements/PageTitle/PageTitleLightTheme.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index a373f8d..f854ce2 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -2,6 +2,9 @@ import React from "react";
 import style from "./Preview.module.css";
 import Player from "../../pages/Player/Player";
 import {Spinner} from "react-bootstrap";
+import StaticInfos from "../../GlobalInfos";
+import darktheme from "../../AppDarkTheme.module.css";
+import lighttheme from "../../AppLightTheme.module.css";
 
 class Preview extends React.Component {
     constructor(props, context) {
@@ -33,8 +36,9 @@ class Preview extends React.Component {
     }
 
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
-            <div className={style.videopreview} onClick={() => this.itemClick()}>
+            <div className={style.videopreview + ' ' + themeStyle.previewhover} onClick={() => this.itemClick()}>
                 <div className={style.previewtitle}>{this.state.name}</div>
                 <div className={style.previewpic}>
                     {this.state.previewpicture != null ?
diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css
index 3db50f6..ebfce87 100644
--- a/src/elements/Preview/Preview.module.css
+++ b/src/elements/Preview/Preview.module.css
@@ -45,7 +45,7 @@
 
 .videopreview:hover {
     opacity: 1;
-    box-shadow: rgba(2, 12, 27, 0.7) 0px 0px 0px 5px;
+    /*box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;*/
     transition: all 300ms;
 }
 
diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.js
index c486804..1310d81 100644
--- a/src/pages/Player/Player.js
+++ b/src/pages/Player/Player.js
@@ -1,10 +1,14 @@
 import React from "react";
 import style from "./Player.module.css"
+import darktheme from "../../AppDarkTheme.module.css"
+import lighttheme from "../../AppLightTheme.module.css"
+
 import {PlyrComponent} from 'plyr-react';
 import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
 import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
 import PageTitle from "../../elements/PageTitle/PageTitle";
+import StaticInfos from "../../GlobalInfos";
 
 
 class Player extends React.Component {
@@ -45,6 +49,7 @@ class Player extends React.Component {
     }
 
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
             <div id='videocontainer'>
                 <PageTitle
@@ -53,7 +58,7 @@ class Player extends React.Component {
 
                 <SideBar>
                     <SideBarTitle>Infos:</SideBarTitle>
-                    <hr/>
+                    <hr className={themeStyle.hrcolor}/>
                     <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
                     {this.state.quality !== 0 ?
                         <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}

From 0ec4954ec5285589c3aace5b943ee2c36992ec6b Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Mon, 27 Jul 2020 21:14:56 +0200
Subject: [PATCH 03/11] correct theme style at settings page

---
 src/AppDarkTheme.module.css                    |  8 ++++++++
 src/AppLightTheme.module.css                   | 10 +++++++++-
 src/GlobalInfos.js                             |  8 +++++++-
 src/pages/SettingsPage/GeneralSettings.js      |  6 +++++-
 src/pages/SettingsPage/SettingsPage.module.css |  7 +++++--
 5 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
index e319acf..005ce46 100644
--- a/src/AppDarkTheme.module.css
+++ b/src/AppDarkTheme.module.css
@@ -1,3 +1,7 @@
+/**
+ * The coloring elements for dark theme
+ */
+
 .backgroundcolor{
     background-color: #141520;
 }
@@ -6,6 +10,10 @@
     color: white;
 }
 
+.subtextcolor{
+    color: #dedad6;
+}
+
 .navitem::after {
     background: white;
 }
diff --git a/src/AppLightTheme.module.css b/src/AppLightTheme.module.css
index 95b7e55..496bfc8 100644
--- a/src/AppLightTheme.module.css
+++ b/src/AppLightTheme.module.css
@@ -1,3 +1,7 @@
+/**
+ * The coloring elements for light theme
+ */
+
 .navitem::after {
     background: black;
 }
@@ -10,10 +14,14 @@
     color: black;
 }
 
+.subtextcolor {
+    color: #212529;
+}
+
 .hrcolor {
     border-color: rgba(0, 0, 0, 0.1);
 }
 
-.previewhover:hover{
+.previewhover:hover {
     box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
 }
diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js
index d44f051..0be8b80 100644
--- a/src/GlobalInfos.js
+++ b/src/GlobalInfos.js
@@ -1,7 +1,13 @@
 class GlobalInfos {
+    #darktheme = false;
+
     isDarkTheme() {
-        return true;
+        return this.#darktheme;
     };
+
+    enableDarkTheme(enable = true){
+        this.#darktheme = enable;
+    }
 }
 
 const StaticInfos = new GlobalInfos();
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index 5eb211d..c84e0b5 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/src/pages/SettingsPage/GeneralSettings.js
@@ -1,6 +1,9 @@
 import React from "react";
 import {Button, Col, Form} from "react-bootstrap";
 import style from "./GeneralSettings.module.css"
+import StaticInfos from "../../GlobalInfos";
+import darktheme from "../../AppDarkTheme.module.css";
+import lighttheme from "../../AppLightTheme.module.css";
 
 class GeneralSettings extends React.Component {
     constructor(props) {
@@ -37,9 +40,10 @@ class GeneralSettings extends React.Component {
     }
 
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
             <>
-                <div className={style.GeneralForm}>
+                <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
                     <Form data-testid='mainformsettings' onSubmit={(e) => {
                         e.preventDefault();
                         this.saveSettings();
diff --git a/src/pages/SettingsPage/SettingsPage.module.css b/src/pages/SettingsPage/SettingsPage.module.css
index b958e19..8807796 100644
--- a/src/pages/SettingsPage/SettingsPage.module.css
+++ b/src/pages/SettingsPage/SettingsPage.module.css
@@ -3,8 +3,11 @@
     float: left;
     width: 10%;
     background-color: #d3dcef;
-    min-height: calc(100vh - 56px);
+    min-height: calc(100vh - 62px);
     min-width: 110px;
+
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
 }
 
 .SettingsSidebarTitle {
@@ -37,4 +40,4 @@
     box-shadow: #7d8dd4 0 0 0 5px;
     transition: all 300ms;
     cursor: pointer;
-}
\ No newline at end of file
+}

From 8c4b1a836a4855ae2e3dcf9b79eb4f0f8052e9fd Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Tue, 28 Jul 2020 18:17:17 +0200
Subject: [PATCH 04/11] new database entry for theme new settings switcher

---
 api/Settings.php                          |  2 ++
 database.sql                              |  2 ++
 src/App.js                                |  7 +++---
 src/GlobalInfos.js                        |  4 ++--
 src/index.css                             |  8 -------
 src/pages/Player/Player.module.css        |  2 +-
 src/pages/SettingsPage/GeneralSettings.js | 27 +++++++++++++++++------
 7 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/api/Settings.php b/api/Settings.php
index 273446e..6ccf284 100644
--- a/api/Settings.php
+++ b/api/Settings.php
@@ -59,6 +59,8 @@ if (isset($_POST['action'])) {
                 $r['passwordEnabled'] = false;
             }
             unset($r['password']);
+
+            $r['DarkMode'] = ($r['DarkMode'] != '0');
             echo json_encode($r);
             break;
     }
diff --git a/database.sql b/database.sql
index ba71abd..b83c0fe 100644
--- a/database.sql
+++ b/database.sql
@@ -36,6 +36,8 @@ create table settings
     episode_path     varchar(255)                          null,
     password         varchar(32) default '-1'              null,
     mediacenter_name varchar(32) default 'OpenMediaCenter' null,
+    TMDB_grabbing    tinyint           null,
+    DarkMode         tinyint default 0 null
     PRIMARY KEY (id)
 );
 
diff --git a/src/App.js b/src/App.js
index cc76a36..067e9f4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -34,13 +34,14 @@ class App extends React.Component {
         fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
-                    console.log(result);
+                    // set theme
+                    StaticInfos.enableDarkTheme(result.DarkMode);
+
                     this.setState({
                         generalSettingsLoaded: true,
                         passwordsupport: result.passwordEnabled,
                         mediacentername: result.mediacenter_name
                     });
-                    console.log(this.state);
                 }));
     }
 
@@ -84,7 +85,7 @@ class App extends React.Component {
     render() {
         const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         // add the main theme to the page body
-        document.body.className += ' ' + themeStyle.backgroundcolor;
+        document.body.className = themeStyle.backgroundcolor;
         return (
             <div className="App">
                 <div className={[style.navcontainer, themeStyle.backgroundcolor, themeStyle.textcolor, themeStyle.hrcolor].join(' ')}>
diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js
index 0be8b80..fa10022 100644
--- a/src/GlobalInfos.js
+++ b/src/GlobalInfos.js
@@ -1,5 +1,5 @@
 class GlobalInfos {
-    #darktheme = false;
+    #darktheme = true;
 
     isDarkTheme() {
         return this.#darktheme;
@@ -11,6 +11,6 @@ class GlobalInfos {
 }
 
 const StaticInfos = new GlobalInfos();
-Object.freeze(StaticInfos);
+//Object.freeze(StaticInfos);
 
 export default StaticInfos;
diff --git a/src/index.css b/src/index.css
index cd1a456..e69de29 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +0,0 @@
-body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/pages/Player/Player.module.css b/src/pages/Player/Player.module.css
index a313388..4a9322a 100644
--- a/src/pages/Player/Player.module.css
+++ b/src/pages/Player/Player.module.css
@@ -13,7 +13,7 @@
     display: block;
     float: left;
     width: 60%;
-    margin-top: 25px;
+    margin-top: 20px;
 }
 
 .videoactions {
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index c84e0b5..3bea177 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/src/pages/SettingsPage/GeneralSettings.js
@@ -74,6 +74,14 @@ class GeneralSettings extends React.Component {
                             }}
                         />
 
+                        {this.state.passwordsupport ?
+                            <Form.Group data-testid="passwordfield">
+                                <Form.Label>Password</Form.Label>
+                                <Form.Control type="password" placeholder="**********" value={this.state.password}
+                                              onChange={(e) => this.setState({password: e.target.value})}/>
+                            </Form.Group> : null
+                        }
+
                         <Form.Check
                             type="switch"
                             id="custom-switch-2"
@@ -85,13 +93,18 @@ class GeneralSettings extends React.Component {
                             }}
                         />
 
-                        {this.state.passwordsupport ?
-                            <Form.Group data-testid="passwordfield">
-                                <Form.Label>Password</Form.Label>
-                                <Form.Control type="password" placeholder="**********" value={this.state.password}
-                                              onChange={(e) => this.setState({password: e.target.value})}/>
-                            </Form.Group> : null
-                        }
+                        <Form.Check
+                            type="switch"
+                            id="custom-switch-3"
+                            data-testid='darktheme-switch'
+                            label="Enable Dark-Theme"
+                            checked={StaticInfos.isDarkTheme()}
+                            onChange={() => {
+                                StaticInfos.enableDarkTheme(!StaticInfos.isDarkTheme());
+                                this.forceUpdate();
+                                // todo initiate rerender
+                            }}
+                        />
 
                         <Form.Group className={style.mediacenternameform} data-testid="nameform">
                             <Form.Label>The name of the Mediacenter</Form.Label>

From 827fd6a1b299af8e77728c274f33c0ca55cf4e57 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Wed, 29 Jul 2020 23:00:37 +0200
Subject: [PATCH 05/11] reformat and store darkmode setting correct in db

---
 api/Settings.php                          |  4 +++-
 src/AppDarkTheme.module.css               | 12 ++++++------
 src/pages/SettingsPage/GeneralSettings.js |  1 +
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/api/Settings.php b/api/Settings.php
index 6ccf284..4acbb4b 100644
--- a/api/Settings.php
+++ b/api/Settings.php
@@ -29,13 +29,15 @@ if (isset($_POST['action'])) {
             $videopath = $_POST['videopath'];
             $tvshowpath = $_POST['tvshowpath'];
             $tmdbsupport = $_POST['tmdbsupport'];
+            $darkmodeenabled = $_POST['darkmodeenabled'];
 
             $query = "UPDATE settings SET 
                         video_path='$videopath',
                         episode_path='$tvshowpath',
                         password='$password',
                         mediacenter_name='$mediacentername',
-                        TMDB_grabbing=$tmdbsupport
+                        TMDB_grabbing=$tmdbsupport, 
+                        DarkMode=$darkmodeenabled
                     WHERE 1";
 
             if ($conn->query($query) === true) {
diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
index 005ce46..f022b1e 100644
--- a/src/AppDarkTheme.module.css
+++ b/src/AppDarkTheme.module.css
@@ -2,15 +2,15 @@
  * The coloring elements for dark theme
  */
 
-.backgroundcolor{
+.backgroundcolor {
     background-color: #141520;
 }
 
-.textcolor{
+.textcolor {
     color: white;
 }
 
-.subtextcolor{
+.subtextcolor {
     color: #dedad6;
 }
 
@@ -18,11 +18,11 @@
     background: white;
 }
 
-.hrcolor{
-    border-color: rgba(255,255,255,.1);
+.hrcolor {
+    border-color: rgba(255, 255, 255, .1);
 }
 
-.previewhover:hover{
+.previewhover:hover {
     box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
 }
 
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index 3bea177..3eb2113 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/src/pages/SettingsPage/GeneralSettings.js
@@ -130,6 +130,7 @@ class GeneralSettings extends React.Component {
         updateRequest.append('tvshowpath', this.state.tvshowpath);
         updateRequest.append('mediacentername', this.state.mediacentername);
         updateRequest.append("tmdbsupport", this.state.tmdbsupport);
+        updateRequest.append("darkmodeenabled", StaticInfos.isDarkTheme());
 
         fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()

From ad1c4b221d310fed804c8d5a2066a5afac78fe4c Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Sun, 2 Aug 2020 17:55:06 +0000
Subject: [PATCH 06/11] fix failing tests (classname wrong)

---
 src/App.test.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App.test.js b/src/App.test.js
index d69a1f0..bb341c0 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -18,19 +18,19 @@ describe('<App/>', function () {
 
     it('renders title', () => {
         const wrapper = shallow(<App/>);
-        expect(wrapper.find('.navbar-brand').text()).toBe('OpenMediaCenter');
+        expect(wrapper.find('.navbrand').text()).toBe('OpenMediaCenter');
     });
 
     it('are navlinks correct', function () {
         const wrapper = shallow(<App/>);
-        expect(wrapper.find('nav').find('li')).toHaveLength(4);
+        expect(wrapper.find('.navitem')).toHaveLength(4);
     });
 
     it('simulate video view change ', function () {
         const wrapper = shallow(<App/>);
         wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
-        wrapper.instance().changeRootElement(<div id='testit'></div>);
+        wrapper.instance().changeRootElement(<div id='testit'/>);
 
         expect(wrapper.find("#testit")).toHaveLength(1);
     });
@@ -39,7 +39,7 @@ describe('<App/>', function () {
         const wrapper = shallow(<App/>);
         wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
-        wrapper.instance().changeRootElement(<div id='testit'></div>);
+        wrapper.instance().changeRootElement(<div id='testit'/>);
 
         expect(wrapper.find("#testit")).toHaveLength(1);
 
@@ -52,9 +52,9 @@ describe('<App/>', function () {
         const wrapper = shallow(<App/>);
         wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
-        wrapper.find(".nav-link").findWhere(t => t.text() === "Random Video" && t.type() === "div").simulate("click");
+        wrapper.find(".navitem").findWhere(t => t.text() === "Random Video" && t.type() === "div").simulate("click");
 
-        wrapper.instance().changeRootElement(<div id='testit'></div>);
+        wrapper.instance().changeRootElement(<div id='testit'/>);
 
         expect(wrapper.find("#testit")).toHaveLength(1);
 
@@ -69,7 +69,7 @@ describe('<App/>', function () {
 
         wrapper.setState({page: "wrongvalue"});
         expect(wrapper.find("HomePage")).toHaveLength(0);
-        wrapper.find(".nav-link").findWhere(t => t.text() === "Home" && t.type() === "div").simulate("click");
+        wrapper.find(".navitem").findWhere(t => t.text() === "Home" && t.type() === "div").simulate("click");
         expect(wrapper.find("HomePage")).toHaveLength(1);
     });
 
@@ -78,7 +78,7 @@ describe('<App/>', function () {
         wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
         expect(wrapper.find("CategoryPage")).toHaveLength(0);
-        wrapper.find(".nav-link").findWhere(t => t.text() === "Categories" && t.type() === "div").simulate("click");
+        wrapper.find(".navitem").findWhere(t => t.text() === "Categories" && t.type() === "div").simulate("click");
         expect(wrapper.find("CategoryPage")).toHaveLength(1);
     });
 
@@ -87,7 +87,7 @@ describe('<App/>', function () {
         wrapper.setState({generalSettingsLoaded: true}); // simulate fetch to have already finisheed
 
         expect(wrapper.find("SettingsPage")).toHaveLength(0);
-        wrapper.find(".nav-link").findWhere(t => t.text() === "Settings" && t.type() === "div").simulate("click");
+        wrapper.find(".navitem").findWhere(t => t.text() === "Settings" && t.type() === "div").simulate("click");
         expect(wrapper.find("SettingsPage")).toHaveLength(1);
     });
 

From 226f7183489b02adb55010dbee5c87a9b85075d7 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Sun, 2 Aug 2020 18:05:07 +0000
Subject: [PATCH 07/11] delete index.css

---
 src/index.css | 0
 src/index.js  | 1 -
 2 files changed, 1 deletion(-)
 delete mode 100644 src/index.css

diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/index.js b/src/index.js
index 88fa6af..7384bc7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 
 ReactDOM.render(

From 8bea726e9807a21a33e66f4bd7f2e9cef3039e6f Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Mon, 3 Aug 2020 18:38:22 +0000
Subject: [PATCH 08/11] theming of previews and sidebar

---
 src/AppDarkTheme.module.css             | 10 +++++++++-
 src/AppLightTheme.module.css            | 10 +++++++++-
 src/elements/Preview/Preview.js         |  4 ++--
 src/elements/Preview/Preview.module.css |  3 ---
 src/elements/SideBar/SideBar.js         |  9 +++++++--
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
index f022b1e..ffc2e7d 100644
--- a/src/AppDarkTheme.module.css
+++ b/src/AppDarkTheme.module.css
@@ -14,6 +14,10 @@
     color: #dedad6;
 }
 
+.lighttextcolor {
+    color: #d5d5d5;
+}
+
 .navitem::after {
     background: white;
 }
@@ -22,7 +26,11 @@
     border-color: rgba(255, 255, 255, .1);
 }
 
-.previewhover:hover {
+.secbackground {
+    background-color: #3c3d48;
+}
+
+.preview:hover {
     box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
 }
 
diff --git a/src/AppLightTheme.module.css b/src/AppLightTheme.module.css
index 496bfc8..a3edaf0 100644
--- a/src/AppLightTheme.module.css
+++ b/src/AppLightTheme.module.css
@@ -18,10 +18,18 @@
     color: #212529;
 }
 
+.lighttextcolor {
+    color: #3d3d3d;
+}
+
 .hrcolor {
     border-color: rgba(0, 0, 0, 0.1);
 }
 
-.previewhover:hover {
+.secbackground {
+    background-color: #a8c3ff;
+}
+
+.preview:hover {
     box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
 }
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index f854ce2..0d316a1 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -38,8 +38,8 @@ class Preview extends React.Component {
     render() {
         const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
-            <div className={style.videopreview + ' ' + themeStyle.previewhover} onClick={() => this.itemClick()}>
-                <div className={style.previewtitle}>{this.state.name}</div>
+            <div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
+                <div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
                 <div className={style.previewpic}>
                     {this.state.previewpicture != null ?
                         <img className={style.previewimage}
diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css
index ebfce87..d8f73f9 100644
--- a/src/elements/Preview/Preview.module.css
+++ b/src/elements/Preview/Preview.module.css
@@ -1,6 +1,5 @@
 .previewtitle {
     height: 20px;
-    color: #3d3d3d;
     text-align: center;
     font-weight: bold;
     max-width: 266px;
@@ -36,8 +35,6 @@
     float: left;
     margin-left: 25px;
     margin-top: 25px;
-    /*background-color: #7F7F7F;*/
-    background-color: #a8c3ff;
     cursor: pointer;
     opacity: 0.85;
     border-radius: 20px;
diff --git a/src/elements/SideBar/SideBar.js b/src/elements/SideBar/SideBar.js
index 9375f33..6ae2ac0 100644
--- a/src/elements/SideBar/SideBar.js
+++ b/src/elements/SideBar/SideBar.js
@@ -1,9 +1,13 @@
 import React from "react";
 import style from "./SideBar.module.css"
+import StaticInfos from "../../GlobalInfos";
+import darktheme from "../../AppDarkTheme.module.css";
+import lighttheme from "../../AppLightTheme.module.css";
 
 class SideBar extends React.Component {
     render() {
-        return (<div className={style.sideinfo}>
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
             {this.props.children}
         </div>);
     }
@@ -11,8 +15,9 @@ class SideBar extends React.Component {
 
 export class SideBarTitle extends React.Component {
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
-            <div className={style.sidebartitle}>{this.props.children}</div>
+            <div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div>
         );
     }
 }

From 747f3005c8a3fd0654671ec5b8c80e915bafe3f1 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Mon, 3 Aug 2020 23:31:43 +0000
Subject: [PATCH 09/11] easier getter function to get themestyle better dark
 theme for SideBar.js

---
 src/App.js                                |  4 +---
 src/AppDarkTheme.module.css               |  4 ++++
 src/AppLightTheme.module.css              |  4 ++++
 src/GlobalInfos.js                        |  7 +++++++
 src/elements/PageTitle/PageTitle.js       | 21 +++++++++++++++++----
 src/elements/PageTitle/PageTitle.test.js  |  2 +-
 src/elements/Preview/Preview.js           |  9 ++++-----
 src/elements/SideBar/SideBar.js           |  9 ++++-----
 src/elements/SideBar/SideBar.module.css   |  2 --
 src/pages/CategoryPage/CategoryPage.js    |  4 ++--
 src/pages/HomePage/HomePage.js            |  6 +++---
 src/pages/Player/Player.js                | 10 +++-------
 src/pages/SettingsPage/GeneralSettings.js |  4 +---
 src/pages/SettingsPage/SettingsPage.js    |  4 +++-
 14 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/src/App.js b/src/App.js
index 067e9f4..b1fb897 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,8 +6,6 @@ import StaticInfos from "./GlobalInfos";
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
 import style from './App.module.css'
-import lighttheme from './AppLightTheme.module.css'
-import darktheme from './AppDarkTheme.module.css'
 
 import SettingsPage from "./pages/SettingsPage/SettingsPage";
 import CategoryPage from "./pages/CategoryPage/CategoryPage";
@@ -83,7 +81,7 @@ class App extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         // add the main theme to the page body
         document.body.className = themeStyle.backgroundcolor;
         return (
diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
index ffc2e7d..d951ea9 100644
--- a/src/AppDarkTheme.module.css
+++ b/src/AppDarkTheme.module.css
@@ -30,6 +30,10 @@
     background-color: #3c3d48;
 }
 
+.thirdbackground {
+    background-color: #141520;
+}
+
 .preview:hover {
     box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
 }
diff --git a/src/AppLightTheme.module.css b/src/AppLightTheme.module.css
index a3edaf0..72ace73 100644
--- a/src/AppLightTheme.module.css
+++ b/src/AppLightTheme.module.css
@@ -30,6 +30,10 @@
     background-color: #a8c3ff;
 }
 
+.thirdbackground {
+    background-color: #8ca3fc;
+}
+
 .preview:hover {
     box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
 }
diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js
index fa10022..b1cbf57 100644
--- a/src/GlobalInfos.js
+++ b/src/GlobalInfos.js
@@ -1,3 +1,6 @@
+import darktheme from "./AppDarkTheme.module.css";
+import lighttheme from "./AppLightTheme.module.css";
+
 class GlobalInfos {
     #darktheme = true;
 
@@ -8,6 +11,10 @@ class GlobalInfos {
     enableDarkTheme(enable = true){
         this.#darktheme = enable;
     }
+
+    getThemeStyle(){
+        return this.isDarkTheme() ? darktheme : lighttheme;
+    }
 }
 
 const StaticInfos = new GlobalInfos();
diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js
index 360fcd1..9e55b68 100644
--- a/src/elements/PageTitle/PageTitle.js
+++ b/src/elements/PageTitle/PageTitle.js
@@ -1,7 +1,5 @@
 import React from "react";
 import style from "./PageTitle.module.css"
-import darktheme from "../../AppDarkTheme.module.css"
-import lighttheme from "../../AppLightTheme.module.css"
 import StaticInfos from "../../GlobalInfos";
 
 class PageTitle extends React.Component {
@@ -13,7 +11,7 @@ class PageTitle extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
             <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
                 <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
@@ -21,10 +19,25 @@ class PageTitle extends React.Component {
                 <>
                     {this.props.children}
                 </>
-                <hr className={themeStyle.hrcolor}/>
+                <Line/>
             </div>
         );
     }
 }
 
+/**
+ * class to override default <hr> color and styling
+ * use this for horizontal lines to use the current active theming
+ */
+export class Line extends React.Component {
+    render() {
+        const themeStyle = StaticInfos.getThemeStyle();
+        return (
+            <>
+                <hr className={themeStyle.hrcolor}/>
+            </>
+        );
+    }
+}
+
 export default PageTitle;
diff --git a/src/elements/PageTitle/PageTitle.test.js b/src/elements/PageTitle/PageTitle.test.js
index 5d57908..6ed16c2 100644
--- a/src/elements/PageTitle/PageTitle.test.js
+++ b/src/elements/PageTitle/PageTitle.test.js
@@ -19,7 +19,7 @@ describe('<Preview/>', function () {
     it('renders pagetitle prop', function () {
         const wrapper = shallow(<PageTitle title='testtitle'/>);
 
-        expect(wrapper.find(".pageheader").text()).toBe("testtitle");
+        expect(wrapper.find(".pageheader").text()).toBe("testtitle<Line />");
     });
 
     it('renders subtitle prop', function () {
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index 0d316a1..7b05016 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -3,8 +3,6 @@ import style from "./Preview.module.css";
 import Player from "../../pages/Player/Player";
 import {Spinner} from "react-bootstrap";
 import StaticInfos from "../../GlobalInfos";
-import darktheme from "../../AppDarkTheme.module.css";
-import lighttheme from "../../AppLightTheme.module.css";
 
 class Preview extends React.Component {
     constructor(props, context) {
@@ -36,7 +34,7 @@ class Preview extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
             <div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
                 <div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
@@ -67,9 +65,10 @@ class Preview extends React.Component {
 
 export class TagPreview extends React.Component {
     render() {
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
-            <div className={style.videopreview + ' ' + style.tagpreview} onClick={() => this.itemClick()}>
-                <div className={style.tagpreviewtitle}>
+            <div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
+                <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
                     {this.props.name}
                 </div>
             </div>
diff --git a/src/elements/SideBar/SideBar.js b/src/elements/SideBar/SideBar.js
index 6ae2ac0..738391c 100644
--- a/src/elements/SideBar/SideBar.js
+++ b/src/elements/SideBar/SideBar.js
@@ -1,12 +1,10 @@
 import React from "react";
 import style from "./SideBar.module.css"
 import StaticInfos from "../../GlobalInfos";
-import darktheme from "../../AppDarkTheme.module.css";
-import lighttheme from "../../AppLightTheme.module.css";
 
 class SideBar extends React.Component {
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
             {this.props.children}
         </div>);
@@ -15,7 +13,7 @@ class SideBar extends React.Component {
 
 export class SideBarTitle extends React.Component {
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
             <div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div>
         );
@@ -24,8 +22,9 @@ export class SideBarTitle extends React.Component {
 
 export class SideBarItem extends React.Component {
     render() {
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
-            <div className={style.sidebarinfo}>{this.props.children}</div>
+            <div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
         );
     }
 }
diff --git a/src/elements/SideBar/SideBar.module.css b/src/elements/SideBar/SideBar.module.css
index 4120c44..fcb93c9 100644
--- a/src/elements/SideBar/SideBar.module.css
+++ b/src/elements/SideBar/SideBar.module.css
@@ -4,7 +4,6 @@
     padding: 20px;
     margin-top: 25px;
     margin-left: 15px;
-    background-color: #b4c7fe;
     border-radius: 20px;
     border: 2px #3574fe solid;
     overflow: hidden;
@@ -17,7 +16,6 @@
 
 .sidebarinfo {
     margin-top: 5px;
-    background-color: #8ca3fc;
     border-radius: 5px;
     padding: 2px 10px 2px 15px;
     width: 220px;
diff --git a/src/pages/CategoryPage/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js
index 8ca56d1..2e26468 100644
--- a/src/pages/CategoryPage/CategoryPage.js
+++ b/src/pages/CategoryPage/CategoryPage.js
@@ -5,7 +5,7 @@ import videocontainerstyle from "../../elements/VideoContainer/VideoContainer.mo
 
 import {TagPreview} from "../../elements/Preview/Preview";
 import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
-import PageTitle from "../../elements/PageTitle/PageTitle";
+import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
 import VideoContainer from "../../elements/VideoContainer/VideoContainer";
 
 class CategoryPage extends React.Component {
@@ -56,7 +56,7 @@ class CategoryPage extends React.Component {
                             this.loadTag(e.props.category)
                         }
                     }}>HD</Tag>
-                    <hr/>
+                    <Line/>
                     <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
                         this.setState({popupvisible: true})
                     }}>Add a new Tag!
diff --git a/src/pages/HomePage/HomePage.js b/src/pages/HomePage/HomePage.js
index 9b1f056..5f92a23 100644
--- a/src/pages/HomePage/HomePage.js
+++ b/src/pages/HomePage/HomePage.js
@@ -4,7 +4,7 @@ import Tag from "../../elements/Tag/Tag";
 import VideoContainer from "../../elements/VideoContainer/VideoContainer";
 
 import style from "./HomePage.module.css"
-import PageTitle from "../../elements/PageTitle/PageTitle";
+import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
 
 class HomePage extends React.Component {
     constructor(props, context) {
@@ -138,13 +138,13 @@ class HomePage extends React.Component {
                 </PageTitle>
                 <SideBar>
                     <SideBarTitle>Infos:</SideBarTitle>
-                    <hr/>
+                    <Line/>
                     <SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
                     <SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
                     <SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
                     <SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
                     <SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
-                    <hr/>
+                    <Line/>
                     <SideBarTitle>Default Tags:</SideBarTitle>
                     <Tag viewbinding={this.props.viewbinding}>All</Tag>
                     <Tag viewbinding={this.props.viewbinding}>FullHd</Tag>
diff --git a/src/pages/Player/Player.js b/src/pages/Player/Player.js
index 1310d81..03bd5af 100644
--- a/src/pages/Player/Player.js
+++ b/src/pages/Player/Player.js
@@ -1,14 +1,11 @@
 import React from "react";
 import style from "./Player.module.css"
-import darktheme from "../../AppDarkTheme.module.css"
-import lighttheme from "../../AppLightTheme.module.css"
 
 import {PlyrComponent} from 'plyr-react';
 import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
 import Tag from "../../elements/Tag/Tag";
 import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
-import PageTitle from "../../elements/PageTitle/PageTitle";
-import StaticInfos from "../../GlobalInfos";
+import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
 
 
 class Player extends React.Component {
@@ -49,7 +46,6 @@ class Player extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
             <div id='videocontainer'>
                 <PageTitle
@@ -58,13 +54,13 @@ class Player extends React.Component {
 
                 <SideBar>
                     <SideBarTitle>Infos:</SideBarTitle>
-                    <hr className={themeStyle.hrcolor}/>
+                    <Line/>
                     <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
                     {this.state.quality !== 0 ?
                         <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
                     {this.state.length !== 0 ?
                         <SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null}
-                    <hr/>
+                    <Line/>
                     <SideBarTitle>Tags:</SideBarTitle>
                     {this.state.tags.map((m) => (
                         <Tag
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index 3eb2113..75eecbc 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/src/pages/SettingsPage/GeneralSettings.js
@@ -2,8 +2,6 @@ import React from "react";
 import {Button, Col, Form} from "react-bootstrap";
 import style from "./GeneralSettings.module.css"
 import StaticInfos from "../../GlobalInfos";
-import darktheme from "../../AppDarkTheme.module.css";
-import lighttheme from "../../AppLightTheme.module.css";
 
 class GeneralSettings extends React.Component {
     constructor(props) {
@@ -40,7 +38,7 @@ class GeneralSettings extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
+        const themeStyle = StaticInfos.getThemeStyle();
         return (
             <>
                 <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js
index d93954b..064c38d 100644
--- a/src/pages/SettingsPage/SettingsPage.js
+++ b/src/pages/SettingsPage/SettingsPage.js
@@ -2,6 +2,7 @@ import React from "react";
 import MovieSettings from "./MovieSettings";
 import GeneralSettings from "./GeneralSettings";
 import style from "./SettingsPage.module.css"
+import StaticInfos from "../../GlobalInfos";
 
 
 class SettingsPage extends React.Component {
@@ -27,9 +28,10 @@ class SettingsPage extends React.Component {
     }
 
     render() {
+        const themestyle = StaticInfos.getThemeStyle();
         return (
             <div>
-                <div className={style.SettingsSidebar}>
+                <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}> {/* todo: test style */}
                     <div className={style.SettingsSidebarTitle}>Settings</div>
                     <div onClick={() => this.setState({currentpage: "general"})}
                          className={style.SettingSidebarElement}>General

From 987ae7fb8e6cb76603a430bd16d9defe3b22772f Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Tue, 4 Aug 2020 18:53:11 +0200
Subject: [PATCH 10/11] correct theming of settings page fix saving of
 themestyle to db

---
 api/Settings.php                               | 12 ++++--------
 src/pages/SettingsPage/SettingsPage.js         |  4 ++--
 src/pages/SettingsPage/SettingsPage.module.css |  3 +--
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/api/Settings.php b/api/Settings.php
index 4acbb4b..cd3c522 100644
--- a/api/Settings.php
+++ b/api/Settings.php
@@ -18,7 +18,7 @@ if (isset($_POST['action'])) {
 
             $r = mysqli_fetch_assoc($result);
             // booleans need to be set manually
-            $r['passwordEnabled']  = $r['password'] != "-1";
+            $r['passwordEnabled'] = $r['password'] != "-1";
             $r['TMDB_grabbing'] = ($r['TMDB_grabbing'] != '0');
 
             echo json_encode($r);
@@ -55,14 +55,10 @@ if (isset($_POST['action'])) {
             }
 
             $r = mysqli_fetch_assoc($result);
-            if ($r['password'] != "-1") {
-                $r['passwordEnabled'] = true;
-            } else {
-                $r['passwordEnabled'] = false;
-            }
-            unset($r['password']);
 
-            $r['DarkMode'] = ($r['DarkMode'] != '0');
+            $r['passwordEnabled'] = $r['password'] != "-1";
+            unset($r['password']);
+            $r['DarkMode'] = (bool)($r['DarkMode'] != '0');
             echo json_encode($r);
             break;
     }
diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js
index 064c38d..10ff8be 100644
--- a/src/pages/SettingsPage/SettingsPage.js
+++ b/src/pages/SettingsPage/SettingsPage.js
@@ -31,8 +31,8 @@ class SettingsPage extends React.Component {
         const themestyle = StaticInfos.getThemeStyle();
         return (
             <div>
-                <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}> {/* todo: test style */}
-                    <div className={style.SettingsSidebarTitle}>Settings</div>
+                <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>
+                    <div className={style.SettingsSidebarTitle + ' ' + themestyle.lighttextcolor}>Settings</div>
                     <div onClick={() => this.setState({currentpage: "general"})}
                          className={style.SettingSidebarElement}>General
                     </div>
diff --git a/src/pages/SettingsPage/SettingsPage.module.css b/src/pages/SettingsPage/SettingsPage.module.css
index 8807796..e4f9eda 100644
--- a/src/pages/SettingsPage/SettingsPage.module.css
+++ b/src/pages/SettingsPage/SettingsPage.module.css
@@ -2,7 +2,6 @@
     padding-top: 20px;
     float: left;
     width: 10%;
-    background-color: #d3dcef;
     min-height: calc(100vh - 62px);
     min-width: 110px;
 
@@ -28,7 +27,7 @@
 .SettingSidebarElement {
     margin: 10px 5px 5px;
     padding: 5px;
-    background-color: #a8b2de;
+    background-color: #919fd9;
     text-align: center;
     font-weight: bold;
     border-radius: 7px;

From f87c02c2762c46a02806ae5b8285dcba04013231 Mon Sep 17 00:00:00 2001
From: Lukas Heiligenbrunner <lukas.heiligenbrunner@gmail.com>
Date: Wed, 5 Aug 2020 22:00:55 +0200
Subject: [PATCH 11/11] correct naming of Generalinfos and added tests

---
 src/App.js                                    |  6 ++---
 src/GlobalInfos.js                            |  6 ++---
 src/GlobalInfos.test.js                       | 24 +++++++++++++++++++
 src/elements/PageTitle/PageTitle.js           |  6 ++---
 src/elements/Preview/Preview.js               |  6 ++---
 src/elements/Preview/Preview.module.css       |  1 -
 src/elements/SideBar/SideBar.js               |  8 +++----
 src/pages/SettingsPage/GeneralSettings.js     | 10 ++++----
 .../SettingsPage/GeneralSettings.test.js      | 10 ++++++++
 src/pages/SettingsPage/SettingsPage.js        |  4 ++--
 10 files changed, 57 insertions(+), 24 deletions(-)
 create mode 100644 src/GlobalInfos.test.js

diff --git a/src/App.js b/src/App.js
index d724803..0bc97e0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import HomePage from "./pages/HomePage/HomePage";
 import RandomPage from "./pages/RandomPage/RandomPage";
-import StaticInfos from "./GlobalInfos";
+import GlobalInfos from "./GlobalInfos";
 
 // include bootstraps css
 import 'bootstrap/dist/css/bootstrap.min.css';
@@ -33,7 +33,7 @@ class App extends React.Component {
             .then((response) => response.json()
                 .then((result) => {
                     // set theme
-                    StaticInfos.enableDarkTheme(result.DarkMode);
+                    GlobalInfos.enableDarkTheme(result.DarkMode);
 
                     this.setState({
                         generalSettingsLoaded: true,
@@ -83,7 +83,7 @@ class App extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.getThemeStyle();
+        const themeStyle = GlobalInfos.getThemeStyle();
         // add the main theme to the page body
         document.body.className = themeStyle.backgroundcolor;
         return (
diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js
index b1cbf57..af86c41 100644
--- a/src/GlobalInfos.js
+++ b/src/GlobalInfos.js
@@ -1,7 +1,7 @@
 import darktheme from "./AppDarkTheme.module.css";
 import lighttheme from "./AppLightTheme.module.css";
 
-class GlobalInfos {
+class StaticInfos {
     #darktheme = true;
 
     isDarkTheme() {
@@ -17,7 +17,7 @@ class GlobalInfos {
     }
 }
 
-const StaticInfos = new GlobalInfos();
+const GlobalInfos = new StaticInfos();
 //Object.freeze(StaticInfos);
 
-export default StaticInfos;
+export default GlobalInfos;
diff --git a/src/GlobalInfos.test.js b/src/GlobalInfos.test.js
new file mode 100644
index 0000000..c87cf85
--- /dev/null
+++ b/src/GlobalInfos.test.js
@@ -0,0 +1,24 @@
+import React from "react";
+import GlobalInfos from "./GlobalInfos";
+
+describe('<GlobalInfos/>', function () {
+    it('always same instance ', function () {
+        GlobalInfos.enableDarkTheme(true);
+
+        expect(GlobalInfos.isDarkTheme()).toBe(true);
+
+        GlobalInfos.enableDarkTheme(false);
+
+        expect(GlobalInfos.isDarkTheme()).toBe(false);
+    });
+
+    it('test default theme', function () {
+        expect(GlobalInfos.isDarkTheme()).toBe(false);
+    });
+
+    it('test receive of stylesheet', function () {
+        const style = GlobalInfos.getThemeStyle();
+
+        expect(style.navitem).not.toBeNull();
+    });
+});
diff --git a/src/elements/PageTitle/PageTitle.js b/src/elements/PageTitle/PageTitle.js
index 9e55b68..a71d946 100644
--- a/src/elements/PageTitle/PageTitle.js
+++ b/src/elements/PageTitle/PageTitle.js
@@ -1,6 +1,6 @@
 import React from "react";
 import style from "./PageTitle.module.css"
-import StaticInfos from "../../GlobalInfos";
+import GlobalInfos from "../../GlobalInfos";
 
 class PageTitle extends React.Component {
     constructor(props) {
@@ -11,7 +11,7 @@ class PageTitle extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.getThemeStyle();
+        const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
                 <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
@@ -31,7 +31,7 @@ class PageTitle extends React.Component {
  */
 export class Line extends React.Component {
     render() {
-        const themeStyle = StaticInfos.getThemeStyle();
+        const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <>
                 <hr className={themeStyle.hrcolor}/>
diff --git a/src/elements/Preview/Preview.js b/src/elements/Preview/Preview.js
index 7b05016..82cbadf 100644
--- a/src/elements/Preview/Preview.js
+++ b/src/elements/Preview/Preview.js
@@ -2,7 +2,7 @@ import React from "react";
 import style from "./Preview.module.css";
 import Player from "../../pages/Player/Player";
 import {Spinner} from "react-bootstrap";
-import StaticInfos from "../../GlobalInfos";
+import GlobalInfos from "../../GlobalInfos";
 
 class Preview extends React.Component {
     constructor(props, context) {
@@ -34,7 +34,7 @@ class Preview extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.getThemeStyle();
+        const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
                 <div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
@@ -65,7 +65,7 @@ class Preview extends React.Component {
 
 export class TagPreview extends React.Component {
     render() {
-        const themeStyle = StaticInfos.getThemeStyle();
+        const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
                 <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
diff --git a/src/elements/Preview/Preview.module.css b/src/elements/Preview/Preview.module.css
index d8f73f9..a369f71 100644
--- a/src/elements/Preview/Preview.module.css
+++ b/src/elements/Preview/Preview.module.css
@@ -42,7 +42,6 @@
 
 .videopreview:hover {
     opacity: 1;
-    /*box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;*/
     transition: all 300ms;
 }
 
diff --git a/src/elements/SideBar/SideBar.js b/src/elements/SideBar/SideBar.js
index 738391c..1b050a8 100644
--- a/src/elements/SideBar/SideBar.js
+++ b/src/elements/SideBar/SideBar.js
@@ -1,10 +1,10 @@
 import React from "react";
 import style from "./SideBar.module.css"
-import StaticInfos from "../../GlobalInfos";
+import GlobalInfos from "../../GlobalInfos";
 
 class SideBar extends React.Component {
     render() {
-        const themeStyle = StaticInfos.getThemeStyle();
+        const themeStyle = GlobalInfos.getThemeStyle();
         return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
             {this.props.children}
         </div>);
@@ -13,7 +13,7 @@ class SideBar extends React.Component {
 
 export class SideBarTitle extends React.Component {
     render() {
-        const themeStyle = StaticInfos.getThemeStyle();
+        const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div>
         );
@@ -22,7 +22,7 @@ export class SideBarTitle extends React.Component {
 
 export class SideBarItem extends React.Component {
     render() {
-        const themeStyle = StaticInfos.getThemeStyle();
+        const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
         );
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index 75eecbc..39f5a26 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/src/pages/SettingsPage/GeneralSettings.js
@@ -1,7 +1,7 @@
 import React from "react";
 import {Button, Col, Form} from "react-bootstrap";
 import style from "./GeneralSettings.module.css"
-import StaticInfos from "../../GlobalInfos";
+import GlobalInfos from "../../GlobalInfos";
 
 class GeneralSettings extends React.Component {
     constructor(props) {
@@ -38,7 +38,7 @@ class GeneralSettings extends React.Component {
     }
 
     render() {
-        const themeStyle = StaticInfos.getThemeStyle();
+        const themeStyle = GlobalInfos.getThemeStyle();
         return (
             <>
                 <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
@@ -96,9 +96,9 @@ class GeneralSettings extends React.Component {
                             id="custom-switch-3"
                             data-testid='darktheme-switch'
                             label="Enable Dark-Theme"
-                            checked={StaticInfos.isDarkTheme()}
+                            checked={GlobalInfos.isDarkTheme()}
                             onChange={() => {
-                                StaticInfos.enableDarkTheme(!StaticInfos.isDarkTheme());
+                                GlobalInfos.enableDarkTheme(!GlobalInfos.isDarkTheme());
                                 this.forceUpdate();
                                 // todo initiate rerender
                             }}
@@ -128,7 +128,7 @@ class GeneralSettings extends React.Component {
         updateRequest.append('tvshowpath', this.state.tvshowpath);
         updateRequest.append('mediacentername', this.state.mediacentername);
         updateRequest.append("tmdbsupport", this.state.tmdbsupport);
-        updateRequest.append("darkmodeenabled", StaticInfos.isDarkTheme());
+        updateRequest.append("darkmodeenabled", GlobalInfos.isDarkTheme());
 
         fetch('/api/Settings.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
diff --git a/src/pages/SettingsPage/GeneralSettings.test.js b/src/pages/SettingsPage/GeneralSettings.test.js
index 89e63bb..6d8ba59 100644
--- a/src/pages/SettingsPage/GeneralSettings.test.js
+++ b/src/pages/SettingsPage/GeneralSettings.test.js
@@ -1,6 +1,7 @@
 import {shallow} from "enzyme";
 import React from "react";
 import GeneralSettings from "./GeneralSettings";
+import GlobalInfos from "../../GlobalInfos";
 
 function prepareFetchApi(response) {
     const mockJsonPromise = Promise.resolve(response);
@@ -25,6 +26,15 @@ describe('<GeneralSettings/>', function () {
         expect(wrapper.find("[data-testid='passwordfield']")).toHaveLength(1);
     });
 
+    it('test theme switchbutton', function () {
+        const wrapper = shallow(<GeneralSettings/>);
+
+        GlobalInfos.enableDarkTheme(false);
+        expect(GlobalInfos.isDarkTheme()).toBe(false);
+        wrapper.find("[data-testid='darktheme-switch']").simulate("change");
+        expect(GlobalInfos.isDarkTheme()).toBe(true);
+    });
+
     it('test savesettings', done => {
         const wrapper = shallow(<GeneralSettings/>);
 
diff --git a/src/pages/SettingsPage/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js
index 10ff8be..b663eda 100644
--- a/src/pages/SettingsPage/SettingsPage.js
+++ b/src/pages/SettingsPage/SettingsPage.js
@@ -2,7 +2,7 @@ import React from "react";
 import MovieSettings from "./MovieSettings";
 import GeneralSettings from "./GeneralSettings";
 import style from "./SettingsPage.module.css"
-import StaticInfos from "../../GlobalInfos";
+import GlobalInfos from "../../GlobalInfos";
 
 
 class SettingsPage extends React.Component {
@@ -28,7 +28,7 @@ class SettingsPage extends React.Component {
     }
 
     render() {
-        const themestyle = StaticInfos.getThemeStyle();
+        const themestyle = GlobalInfos.getThemeStyle();
         return (
             <div>
                 <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}>