mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-21 20:28:15 +03:00
Code Issues Projects Releases Packages Wiki Activity

Start on admin dark theme. Closes #1904

Browse source
This commit is contained in:
Gabe Kangas 2023-01-04 16:06:19 -08:00
parent e59ac558c5
commit 505b0bb7e8
No known key found for this signature in database
GPG key ID: 4345B2060657F330
2 changed files with 62 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
web/public/styles/admin/main-layout.css
View file

@ -1,3 +1,64 @@
/* NOTE: This is used for the admin only! */
@media (prefers-color-scheme: dark) {
/* Admin dark mode. Right now this is just adjusting the colors
to be darker. This is petty ugly but it's as good as we have for now. We
can look more into this after we upgrade to Ant Design v5
https://github.com/owncast/owncast/issues/2359 */
:root {
--theme-color-background-main: #1e2e3a;
}
.ant-layout {
color: white;
background-color: #172027;
}
.ant-btn, .ant-card-meta-title, .ant-typography, .stream-info-box, .ant-card, .ant-card-meta-description, .section-title, .formfield-container .formfield-label, .field-tip, .description{
color: rgba(255, 255, 255, 0.78) !important;
}
h2.ant-typography, div.ant-typography-h2, div.ant-typography-h2 > textarea, .ant-typography h2 {
color: white !important;
}
img {
opacity: .75;
transition: opacity .5s ease-in-out;
}
img:hover {
opacity: 1;
}
}
body {
margin: 0;
color: #ddd;
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
background-color: #222629;
font-feature-settings: "tnum";
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5em;
color: #fff;
font-weight: 500;
}
}
.app-container .side-nav {
position: fixed;
height: 100vh;

2
web/style-definitions/tokens/color/antd-overrides.yaml
View file

@ -1,6 +1,6 @@
# Ant Design component color overrides.
# You can find the variable names to override at:
# https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
# https://github.com/ant-design/ant-design/blob/4.x-stable/components/style/themes/dark.less (for ant v4)
link-color:
value: 'var(--theme-color-action)'