- Create a new folder with a desired name in
/app/app/src/themeSelector/themes/
e.g./app/app/src/themeSelector/themes/myCustomTheme
- Pick colors for the new theme. I recommend using an existing theme as a basis or using the Material UI Theme Creator by bareynol. Create both light and dark variant or just one of them.
- Pick a Google Font for the new theme. Install it with
yarn add typeface-{your-font-name}
.
e.g.yarn add typeface-pt-sans
- Create a logo variant. Use preferred software to create a custom logo or open the
/design/logo-and-styles.fig
file in Figma to make a variant of the existing logo. Save it as alogo.png
file inmyCustomTheme
folder. - Create a
index.ts
file inmyCustomTheme
folder with the following structure:
import 'typeface-{your-font-name}'; // only if you use a custom font
import logo from './logo.png'
import { ThemeOptions } from "@material-ui/core";
export const darkTheme: ThemeOptions = {
palette: {
type: 'dark',
// ...
}
// ... add other properties of the new dark theme variant
}
export const lightTheme: ThemeOptions = {
palette: {
type: 'light',
// ...
}
// ... add other properties of the new light theme variant
}
The list of available properties can be found in Material UI v4 documentation of the default theme. This list is extended by several custom properties, which are described in /app/app/src/types/Theme.d.ts
.
6. Import of the new theme at the top of the /app/app/src/themeSelector/index.ts
file:
import * as ninetiesYoutube from "./themes/ninetiesYoutube";
import * as poster from "./themes/poster";
// ...
import * as myCustomTheme from "./themes/myCustomTheme";
- In the same file add the light and dark variant of the theme to the
themes
object
export const themes: {[key: string]: ThemeOptions} = {
'nineties-youtube-light': ninetiesYoutube.lightTheme,
// ...
'my-custom-theme-light': myCustomTheme.lightTheme, // only if light variant defined
'my-custom-theme-dark': myCustomTheme.darkTheme, // only if dark variant defined
}
- Run
yarn start
and test the new theme by selecting it from the sidebar.
I'm hosting this for everyone for free. But of course there are server costs (and I don't even care much about "development costs"), But I would totally appreciate a small donation to cover the server costs so I can keep running this for free for everyone C: