Commit 94a3133b authored by Andrew Hrdy's avatar Andrew Hrdy

Dark mode support

parent 550c12ff
......@@ -13,7 +13,6 @@ import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import CloseIcon from '@material-ui/icons/Close';
import IconButton from '@material-ui/core/IconButton';
import FacilityDialog from './FacilityDialog';
class Sidebar extends React.Component<SidebarProps> {
......
......@@ -3,6 +3,10 @@
.app-bar {
background-color: white !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important;
@media (prefers-color-scheme: dark) {
background-color: #424242 !important;
}
}
.app-bar-logo {
......@@ -13,6 +17,10 @@
.app-bar-text-color {
color: #354052;
@media (prefers-color-scheme: dark) {
color: white;
}
}
.app-bar-logo-name, .app-bar-right-section {
......
......@@ -28,8 +28,11 @@
@media screen and (min-width: map-get($breakpoints, lg)) {
.favorite-button-heart-hover {
color: grey;
}
@media (prefers-color-scheme: dark) {
color: white;
}
}
}
//Under lg
......@@ -41,6 +44,10 @@
color: grey;
@media (prefers-color-scheme: dark) {
color: white;
}
height: 24px * $favorite-button-sm-scale !important;
width: 24px * $favorite-button-sm-scale !important;
padding: 5px * $favorite-button-sm-scale !important;
......
.mobile-app-bar {
background-color: white !important;
@media (prefers-color-scheme: dark) {
background-color: #424242 !important;
}
}
\ No newline at end of file
......@@ -55,11 +55,16 @@
.sidebar-avatar {
width: 100px !important;
height: 100px !important;
border-radius: 0 !important;
background-color: white;
border-radius: 50% !important;
& > img {
width: 90px;
height: 90px;
object-fit: contain !important;
border-radius: 0 !important;
margin: 5px !important;
}
}
......
......@@ -4,6 +4,10 @@
line-height: 24px;
font-weight: 500;
color: rgba(0, 0, 0, 0.87);
@media (prefers-color-scheme: dark) {
color: white
}
}
.text-w-title-content {
......@@ -13,4 +17,8 @@
font-weight: 400;
color: rgba(0, 0, 0, 0.87);
width: 100%;
@media (prefers-color-scheme: dark) {
color: white
}
}
\ No newline at end of file
.alert-container-btn {
color: rgba(0, 0, 0, 0.4) !important;
@media (prefers-color-scheme: dark) {
color: white !important;
}
}
.alert-container-popover {
......
......@@ -12,6 +12,10 @@
.fc-root:hover {
.favorite-button-heart {
color: grey;
@media (prefers-color-scheme: dark) {
color: white;
}
}
}
}
......@@ -46,6 +50,7 @@
border-radius: 50%;
box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12);
overflow: hidden;
background-color: white;
}
.fc-logo {
......
......@@ -22,6 +22,10 @@
.search-bar-search-icon, .search-bar-arrow-icon {
display: block;
color: rgba(0, 0, 0, 0.54);
@media (prefers-color-scheme: dark) {
color: white;
}
}
.search-bar-arrow-icon {
......@@ -48,7 +52,6 @@
@media screen and (min-width: map-get($breakpoints, lg)) {
.search-bar-paper-background {
&.search-bar-focus {
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
border: 1px solid rgba(0, 0, 0, 0.15);
}
......@@ -67,7 +70,6 @@
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.search-bar-paper-background {
background-color: rgba(255, 255, 255, 1) !important;
width: auto !important;
&.search-bar-mobile-open {
......
......@@ -29,6 +29,10 @@ body {
padding: 0;
font-family: "Roboto", "-apple-system", "Helvetica", "Arial", sans-serif;
background-color: #f1f2f6;
@media (prefers-color-scheme: dark) {
background-color: #303030;
}
}
body > #root {
......
......@@ -10,29 +10,25 @@ export const themeTypography: TypographyOptions = {
fontSize: 16,
fontWeight: 400,
fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
lineHeight: '24px',
color: 'rgba(0, 0, 0, 0.87)'
lineHeight: '24px'
},
body2: {
fontSize: 14,
fontWeight: 500,
fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
lineHeight: '24px',
color: 'rgba(0, 0, 0, 0.87)'
lineHeight: '24px'
},
body1: {
fontSize: 14,
fontWeight: 400,
fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
lineHeight: '20px',
color: 'rgba(0, 0, 0, 0.87)'
lineHeight: '20px'
},
caption: {
fontSize: 12,
fontWeight: 400,
fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
lineHeight: 1,
color: 'rgba(0, 0, 0, 0.54)'
lineHeight: 1
},
button: {
fontSize: 14,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment