gristlabs_grist-core/app/client/ui/TopBarCss.ts
George Gevoian ec157dc469 (core) Add dark mode to user preferences
Summary:
Adds initial implementation of dark mode. Preferences for dark mode are
available on the account settings page. Dark mode is currently a beta feature
as there are still some small bugs to squash and a few remaining UI elements
to style.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: paulfitz, jarek

Differential Revision: https://phab.getgrist.com/D3587
2022-09-05 19:17:32 -07:00

35 lines
831 B
TypeScript

import {theme} from 'app/client/ui2018/cssVars';
import {icon} from 'app/client/ui2018/icons';
import {styled} from 'grainjs';
export const cssHoverCircle = styled('div', `
width: 32px;
height: 32px;
background: none;
border-radius: 16px;
&:hover, &.weasel-popup-open {
background-color: ${theme.hover};
}
&-disabled:hover {
background: none;
}
`);
export const cssTopBarBtn = styled(icon, `
width: 32px;
height: 32px;
padding: 8px 8px;
cursor: pointer;
-webkit-mask-size: 16px 16px;
background-color: ${theme.topBarButtonPrimaryFg};
.${cssHoverCircle.className}-disabled & {
background-color: ${theme.topBarButtonDisabledFg};
cursor: default;
}
&-slate { background-color: ${theme.topBarButtonSecondaryFg}; }
&-error { background-color: ${theme.topBarButtonErrorFg}; }
`);