LogalDeveloper/owncast
0
Fork 0
Code Activity

Support color customization from the admin (#2338)

Browse Source 
* Add user-customizable theming. Closes #1915

* Prettified Code!

* Add user-customizable theming. Closes #1915

* Add explicit color for page content background

* Prettified Code!

Co-authored-by: gabek <gabek@users.noreply.github.com>
This commit is contained in:
Gabe Kangas
2022-11-12 20:26:55 -08:00
committed by GitHub
parent 5bbf9db84a
commit 813f8692f0
33 changed files with 499 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/MainLayout.tsx
View File

@@ -201,7 +201,9 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
<Menu.Item key="config-notify">
<Link href="/admin/config-notify">Notifications</Link>
</Menu.Item>
<Menu.Item key="config-appearance">
<Link href="/admin/config/appearance">Appearance</Link>
</Menu.Item>
<Menu.Item key="config-storage">
<Link href="/admin/config-storage">S3 Storage</Link>
</Menu.Item>

1
web/components/chat/ChatActionMessage/ChatActionMessage.module.scss
View File

@@ -1,4 +1,5 @@
.chatAction {
padding: 5px;
text-align: center;
color: var(--theme-color-components-chat-text);
}

2
web/components/chat/ChatContainer/ChatContainer.module.scss
View File

@@ -42,7 +42,7 @@
.chatContainer {
display: flex;
flex-direction: column;
background-color: var(--theme-color-background-chat);
background-color: var(--theme-color-components-chat-background);
height: 100%;
}
.virtuoso {

3
web/components/chat/ChatJoinMessage/ChatJoinMessage.module.scss
View File

@@ -1,6 +1,7 @@
.root {
padding: 10px 0px;
text-align: center;
font-size: .8rem;
font-size: 0.8rem;
font-style: italic;
color: var(--theme-color-components-chat-text);
}

4
web/components/chat/ChatUserMessage/ChatUserMessage.module.scss
View File

@@ -9,6 +9,8 @@ $p-size: 8px;
position: relative;
font-size: 0.9rem;
padding: 0px $p-size $p-size $p-size;
color: var(--theme-color-components-chat-text);
.user {
display: flex;
align-items: center;
@@ -63,7 +65,7 @@ $p-size: 8px;
.messagePadding {
padding: 0px 0px;
padding-top: .4rem;
padding-top: 0.4rem;
}
.messagePaddingCollapsed {

2
web/components/layouts/Main.tsx
View File

@@ -21,6 +21,7 @@ import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration';
import Footer from '../ui/Footer/Footer';
import { Theme } from '../theme/Theme';
export const Main: FC = () => {
const [isMobile] = useRecoilState<boolean | undefined>(isMobileAtom);
@@ -111,6 +112,7 @@ export const Main: FC = () => {
<ClientConfigStore />
<TitleNotifier />
<Theme />
<Layout ref={layoutRef} style={{ minHeight: '100vh' }}>
<Header name={title || name} chatAvailable={isChatAvailable} chatDisabled={chatDisabled} />
<Content />

27
web/components/theme/Theme.tsx Normal file
View File

@@ -0,0 +1,27 @@
/* eslint-disable react/no-danger */
import { FC } from 'react';
import { useRecoilValue } from 'recoil';
import { ClientConfig } from '../../interfaces/client-config.model';
import { clientConfigStateAtom } from '../stores/ClientConfigStore';
export const Theme: FC = () => {
const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
const { appearanceVariables, customStyles } = clientConfig;
const appearanceVars = Object.keys(appearanceVariables)
.filter(variable => !!appearanceVariables[variable])
.map(variable => `--${variable}: ${appearanceVariables[variable]}`);
return (
<style
dangerouslySetInnerHTML={{
__html: `
:root {
${appearanceVars.join(';\n')}
}
${customStyles}
`,
}}
/>
);
};

6
web/components/ui/CustomPageContent/CustomPageContent.module.scss
View File

@@ -7,16 +7,16 @@
.customPageContent {
font-size: 1rem;
line-height: 1.6em;
color: var(--theme-color-palette-0);
color: var(--theme-color-components-text-on-light);
padding: calc(2 * var(--content-padding));
border-radius: var(--theme-rounded-corners);
width: 100%;
background-color: var(--theme-color-background-light);
background-color: var(--theme-color-components-content-background);
hr {
margin: 1.35em 0;
border: 0;
border-top: solid 1px var(--theme-text-secondary);
border-top: solid 1px var(--theme-color-components-content-background);
}
div.summary {

8
web/components/ui/Footer/Footer.module.scss
View File

@@ -9,16 +9,12 @@
width: 100%;
color: var(--theme-color-components-text-on-dark);
font-family: var(--theme-text-body-font-family);
padding: 0 .6rem;
padding: 0 0.6rem;
font-size: 0.8rem;
font-weight: 600;
border-top: 1px solid rgba(214, 211, 211, 0.5);
a {
color: var(--theme-text-secondary);
}
.links {
column-gap: 2rem;
width: auto;

6
web/components/ui/Sidebar/Sidebar.module.scss
View File

@@ -1,11 +1,11 @@
@import '../../../styles/mixins.scss';
.root {
background-color: var(--theme-color-background-chat);
background-color: var(--theme-color-components-chat-background);
display: none;
@include screen(desktop) {
position: sticky;
display: block;
position: sticky;
display: block;
}
}

4
web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
View File

@@ -1,6 +1,6 @@
.followers {
width: 100%;
background-color: var(--theme-color-background-light);
background-color: var(--theme-color-components-content-background);
padding: 5px;
}
@@ -8,5 +8,5 @@
padding: calc(2 * var(--content-padding));
border-radius: var(--theme-rounded-corners);
width: 100%;
background-color: var(--theme-color-background-light);
background-color: var(--theme-color-components-content-background);
}