only two style files

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>

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;
 }
 
 

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;
+}
+

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;
+}

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 darktheme from "../../AppDarkTheme.module.css"
-import lighttheme from "./PageTitleLightTheme.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}>
+            <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
-                <span className={style.pageheadertitle + ' ' + themeStyle.pageheadertitle}>{this.props.title}</span>
+                <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
-                <span className={style.pageheadersubtitle}>{this.props.subtitle}</span>
+                <span className={style.pageheadersubtitle + ' ' + themeStyle.textcolor}>{this.props.subtitle}</span>
                 <>
                     {this.props.children}
                 </>
-                <hr/>
+                <hr className={themeStyle.hrcolor}/>
             </div>
-        )
+        );
-            ;
     }
 }
 

src/elements/PageTitle/PageTitle.module.css

@@ -1,8 +1,5 @@
 .pageheader {
-    margin-top: 20px;
+    padding: 20px 12% 20px 22%;
-    margin-bottom: 20px;
-    padding-left: 22%;
-    padding-right: 12%;
 }
 
 .pageheadertitle {

src/elements/PageTitle/PageTitleDarkTheme.module.css

@@ -1,11 +0,0 @@
-.pageheader {
-    background-color: #141520;
-}
-
-.pageheadertitle {
-    color:white;
-}
-
-.pageheadersubtitle {
-    color:white;
-}

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 ?

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;
 }
 

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}