diff --git a/web/public/styles/admin/main-layout.css b/web/public/styles/admin/main-layout.css index a4e12ffad..a71ee70a0 100644 --- a/web/public/styles/admin/main-layout.css +++ b/web/public/styles/admin/main-layout.css @@ -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; diff --git a/web/style-definitions/tokens/color/antd-overrides.yaml b/web/style-definitions/tokens/color/antd-overrides.yaml index 2fe4cf575..f6d342c12 100644 --- a/web/style-definitions/tokens/color/antd-overrides.yaml +++ b/web/style-definitions/tokens/color/antd-overrides.yaml @@ -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)'