Dark Mode (#912)

closes #704
This commit is contained in:
Tom Moor
2019-03-12 21:35:35 -07:00
committed by GitHub
parent 6445da33db
commit 59c82f1f06
46 changed files with 648 additions and 252 deletions

View File

@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
import { Link } from 'react-router-dom';
import Document from 'models/Document';
import styled, { withTheme } from 'styled-components';
import { darken } from 'polished';
import Flex from 'shared/components/Flex';
import Highlight from 'components/Highlight';
import { StarredIcon } from 'outline-icons';
@@ -20,7 +21,7 @@ type Props = {
};
const StyledStar = withTheme(styled(({ solid, theme, ...props }) => (
<StarredIcon color={solid ? theme.black : theme.text} {...props} />
<StarredIcon color={theme.text} {...props} />
))`
flex-shrink: 0;
opacity: ${props => (props.solid ? '1 !important' : 0)};
@@ -59,8 +60,8 @@ const DocumentLink = styled(Link)`
&:hover,
&:active,
&:focus {
background: ${props => props.theme.smokeLight};
border: 2px solid ${props => props.theme.smoke};
background: ${props => props.theme.listItemHoverBackground};
border: 2px solid ${props => props.theme.listItemHoverBorder};
outline: none;
${StyledStar}, ${StyledDocumentMenu} {
@@ -73,7 +74,7 @@ const DocumentLink = styled(Link)`
}
&:focus {
border: 2px solid ${props => props.theme.slateDark};
border: 2px solid ${props => darken(0.5, props.theme.listItemHoverBorder)};
}
`;
@@ -102,7 +103,7 @@ const Title = styled(Highlight)`
const ResultContext = styled(Highlight)`
display: block;
color: ${props => props.theme.slateDark};
color: ${props => props.theme.textTertiary};
font-size: 14px;
margin-top: -0.25em;
margin-bottom: 0.25em;