add seperate modules for dark and light theme

This commit is contained in:
lukas 2020-07-24 22:47:21 +02:00
parent 15ede7821e
commit a3b63618b4
10 changed files with 119 additions and 47 deletions

View File

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

View File

@ -1,10 +1,14 @@
import React from 'react'; import React from 'react';
import "./App.css"
import HomePage from "./pages/HomePage/HomePage"; import HomePage from "./pages/HomePage/HomePage";
import RandomPage from "./pages/RandomPage/RandomPage"; import RandomPage from "./pages/RandomPage/RandomPage";
import StaticInfos from "./GlobalInfos";
// include bootstraps css // include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.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 SettingsPage from "./pages/SettingsPage/SettingsPage";
import CategoryPage from "./pages/CategoryPage/CategoryPage"; import CategoryPage from "./pages/CategoryPage/CategoryPage";
@ -78,38 +82,25 @@ class App extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return ( return (
<div className="App"> <div className="App">
<nav className="navbar navbar-expand-sm bg-primary navbar-dark"> <div className={[style.navcontainer, themeStyle.navcontainer].join(' ')}>
<div className="navbar-brand">{this.state.mediacentername}</div> <div className={style.navbrand}>{this.state.mediacentername}</div>
<ul className="navbar-nav"> <div className={[style.navitem, this.state.page === "default" ? style.navitemselected : {}].join(' ')}
<li className="nav-item"> onClick={() => this.setState({page: "default"})}>Home
<div className="nav-link" </div>
style={this.state.page === "default" ? {color: "rgba(255,255,255,.75"} : {}} <div className={[style.navitem, this.state.page === "random" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "default"})}>Home onClick={() => this.setState({page: "random"})}>Random Video
</div> </div>
</li> <div className={[style.navitem, this.state.page === "categories" ? style.navitemselected : {}].join(' ')}
<li className="nav-item"> onClick={() => this.setState({page: "categories"})}>Categories
<div className="nav-link" </div>
style={this.state.page === "random" ? {color: "rgba(255,255,255,.75"} : {}} <div className={[style.navitem, this.state.page === "settings" ? style.navitemselected : {}].join(' ')}
onClick={() => this.setState({page: "random"})}>Random Video onClick={() => this.setState({page: "settings"})}>Settings
</div> </div>
</li> </div>
<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>
{this.state.generalSettingsLoaded ? this.MainBody() : "loading"} {this.state.generalSettingsLoaded ? this.MainBody() : "loading"}
</div> </div>
); );

51
src/App.module.css Normal file
View File

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

View File

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

View File

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

10
src/GlobalInfos.js Normal file
View File

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

View File

@ -1,5 +1,8 @@
import React from "react"; import React from "react";
import style from "./PageTitle.module.css" 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 { class PageTitle extends React.Component {
constructor(props) { constructor(props) {
@ -10,17 +13,19 @@ class PageTitle extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return ( return (
<div className={style.pageheader}> <div className={style.pageheader + ' ' + themeStyle.pageheader}>
<span className={style.pageheadertitle}>{this.props.title}</span> <span className={style.pageheadertitle + ' ' + themeStyle.pageheadertitle}>{this.props.title}</span>
<span className={style.pageheadersubtitle}>{this.props.subtitle}</span> <span className={style.pageheadersubtitle}>{this.props.subtitle}</span>
<> <>
{this.props.children} {this.props.children}
</> </>
<hr/> <hr/>
</div> </div>
); )
;
} }
} }
export default PageTitle; export default PageTitle;

View File

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

View File

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