correct theme style at settings page
This commit is contained in:
parent
aa741c5a90
commit
0ec4954ec5
@ -1,3 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* The coloring elements for dark theme
|
||||||
|
*/
|
||||||
|
|
||||||
.backgroundcolor{
|
.backgroundcolor{
|
||||||
background-color: #141520;
|
background-color: #141520;
|
||||||
}
|
}
|
||||||
@ -6,6 +10,10 @@
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.subtextcolor{
|
||||||
|
color: #dedad6;
|
||||||
|
}
|
||||||
|
|
||||||
.navitem::after {
|
.navitem::after {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* The coloring elements for light theme
|
||||||
|
*/
|
||||||
|
|
||||||
.navitem::after {
|
.navitem::after {
|
||||||
background: black;
|
background: black;
|
||||||
}
|
}
|
||||||
@ -10,10 +14,14 @@
|
|||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.subtextcolor {
|
||||||
|
color: #212529;
|
||||||
|
}
|
||||||
|
|
||||||
.hrcolor {
|
.hrcolor {
|
||||||
border-color: rgba(0, 0, 0, 0.1);
|
border-color: rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.previewhover:hover{
|
.previewhover:hover {
|
||||||
box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
|
box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,13 @@
|
|||||||
class GlobalInfos {
|
class GlobalInfos {
|
||||||
|
#darktheme = false;
|
||||||
|
|
||||||
isDarkTheme() {
|
isDarkTheme() {
|
||||||
return true;
|
return this.#darktheme;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
enableDarkTheme(enable = true){
|
||||||
|
this.#darktheme = enable;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const StaticInfos = new GlobalInfos();
|
const StaticInfos = new GlobalInfos();
|
||||||
|
@ -1,6 +1,9 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import {Button, Col, Form} from "react-bootstrap";
|
import {Button, Col, Form} from "react-bootstrap";
|
||||||
import style from "./GeneralSettings.module.css"
|
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 {
|
class GeneralSettings extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -37,9 +40,10 @@ class GeneralSettings extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={style.GeneralForm}>
|
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
|
||||||
<Form data-testid='mainformsettings' onSubmit={(e) => {
|
<Form data-testid='mainformsettings' onSubmit={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.saveSettings();
|
this.saveSettings();
|
||||||
|
@ -3,8 +3,11 @@
|
|||||||
float: left;
|
float: left;
|
||||||
width: 10%;
|
width: 10%;
|
||||||
background-color: #d3dcef;
|
background-color: #d3dcef;
|
||||||
min-height: calc(100vh - 56px);
|
min-height: calc(100vh - 62px);
|
||||||
min-width: 110px;
|
min-width: 110px;
|
||||||
|
|
||||||
|
border-top-right-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.SettingsSidebarTitle {
|
.SettingsSidebarTitle {
|
||||||
|
Loading…
Reference in New Issue
Block a user