add seperate modules for dark and light theme

src/App.css

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

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

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

src/AppDarkTheme.module.css

@@ -0,0 +1,8 @@
+.navcontainer{
+    background-color: #141520;
+    color: white;
+}
+
+.navitem::after {
+    background: white;
+}

src/AppLightTheme.module.css

@@ -0,0 +1,8 @@
+.navcontainer{
+    background-color: white;
+    color: black;
+}
+
+.navitem::after {
+    background: black;
+}

src/GlobalInfos.js

@@ -0,0 +1,10 @@
+class GlobalInfos {
+    isDarkTheme() {
+        return true;
+    };
+}
+
+const StaticInfos = new GlobalInfos();
+Object.freeze(StaticInfos);
+
+export default StaticInfos;

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;
+export default PageTitle;

src/elements/PageTitle/PageTitleDarkTheme.module.css

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

src/index.css

@@ -5,4 +5,4 @@ body {
     sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-}
+}