tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve dark mode css and contrast

Browse Source
This commit is contained in:
Tanner Collin 2020-10-10 21:57:25 +00:00
parent 982e53657f
commit 7f0913006c
3 changed files with 58 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
webclient/src/App.js
View File

@ -2,6 +2,7 @@ import React, { useState, useEffect, useReducer, useContext } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
import './semantic-ui/semantic.min.css'; import './semantic-ui/semantic.min.css';
import './light.css'; import './light.css';
import './dark.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import Darkmode from 'darkmode-js'; import Darkmode from 'darkmode-js';
import { isAdmin, requester } from './utils.js'; import { isAdmin, requester } from './utils.js';

57
webclient/src/dark.css Normal file
View File

@ -0,0 +1,57 @@
.darkmode-layer, .darkmode-toggle {
z-index: 500;
}
.darkmode--activated .ui.image {
mix-blend-mode: difference;
filter: brightness(75%);
}
.darkmode--activated i.green.circle.icon {
mix-blend-mode: difference;
color: #21ba4582 !important;
}
.darkmode--activated i.yellow.circle.icon {
mix-blend-mode: difference;
color: #fbbd0882 !important;
}
.darkmode--activated i.red.circle.icon {
mix-blend-mode: difference;
color: #db282882 !important;
}
.darkmode--activated .footer {
mix-blend-mode: difference;
}
.darkmode--activated .ql-toolbar.ql-snow,
.darkmode--activated .ql-container.ql-snow,
.darkmode--activated .ui.segment,
.darkmode--activated .ui.form .field input,
.darkmode--activated .ui.form .field .selection.dropdown,
.darkmode--activated .ui.form .field .ui.checkbox label::before,
.darkmode--activated .ui.form .field textarea {
border: 1px solid rgba(34,36,38,.50) !important;
}
.darkmode--activated .ui.basic.table tbody tr {
border-bottom: 1px solid rgba(34,36,38,.50) !important;
}
.darkmode--activated .ui.button {
background: #c9c9c9 !important;
}
.darkmode--activated .ui.red.button {
mix-blend-mode: difference;
background: #db282882 !important;
}
.darkmode--activated .ui.green.button,
.darkmode--activated .ui.button.toggle.active {
mix-blend-mode: difference;
background: #21ba4582 !important;
}

20
webclient/src/light.css
View File

@ -150,23 +150,3 @@ body {
margin-left: -3.5px; margin-left: -3.5px;
margin-right: 0.5em; margin-right: 0.5em;
} }
.darkmode-layer, .darkmode-toggle {
z-index: 500;
}
.darkmode--activated .ui.image {
mix-blend-mode: difference;
filter: brightness(50%);
}
.darkmode--activated i.green.circle.icon,
.darkmode--activated i.yellow.circle.icon,
.darkmode--activated i.red.circle.icon {
mix-blend-mode: difference;
}
.darkmode--activated .footer {
mix-blend-mode: difference;
}