lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

add seperate modules for dark and light theme

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.css
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);
}

51
src/App.js
View File

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

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

8
src/AppDarkTheme.module.css Normal file
View File

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

8
src/AppLightTheme.module.css Normal file
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;

11
src/elements/PageTitle/PageTitle.js
View File

@ -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,16 +13,18 @@ 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>
);
)
;
}
}

11
src/elements/PageTitle/PageTitleDarkTheme.module.css Normal file
View File

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

0
src/elements/PageTitle/PageTitleLightTheme.module.css Normal file
View File