tab-stash/styles/themes/dark.less

43 lines
1.3 KiB
Plaintext

/* This is basically a set of modifications to the light theme, so best to start
there first. */
& {
--modal-bg: hsla(240deg, 10%, 12%, 50%);
--page-bg: hsl(240deg, 10%, 12%);
--page-fg: hsl(0deg, 0%, 93%);
--disabled-fg: hsl(0deg, 0%, 66%);
--userlink-fg: hsl(188deg, 100%, 50%);
--userlink-hover-fg: hsl(188deg, 100%, 70%);
--userlink-active-fg: hsl(188deg, 100%, 90%);
--selected-bg: hsl(188deg, 100%, 20%);
--selected-hover-bg: hsl(188deg, 100%, 30%);
--ctrl-bg: hsl(240deg, 10%, 12%);
--ctrl-border-clr: hsla(0deg, 0%, 93%, 34%);
--button-bg: hsl(240deg, 8%, 31%);
--button-hover-bg: hsl(240deg, 8%, 41%);
--button-active-bg: hsl(240deg, 8%, 51%);
--ephemeral-hover-shadow-clr: hsla(0, 0%, 93%, 15%);
--group-bg: hsl(240deg, 10%, 20%);
--group-border-clr: hsl(240deg, 10%, 35%);
--group-disabled-bg: hsl(240deg, 10%, 15%);
--indent-guide-border-clr: hsl(240deg, 10%, 35%, 60%);
// Container colors and styles. (Colors are the same in light and dark
// mode, but the thickness is different due to differing contrast. This
// basically follows what Firefox does.)
--container-indicator-shadow-style: inset -2px 0px 0px 0px;
}
&[data-view="tab"] {
--page-bg: hsl(250deg, 10%, 12%);
--group-bg: hsl(240deg, 10%, 20%);
}
.icon-vars(@theme: dark, @inverse: light);