/90sYouTube

YouTube if you have 90s goggles on

Primary LanguageTypeScript

90sYouTube

Adding a new theme

  1. Create a new folder with a desired name in /app/app/src/themeSelector/themes/
    e.g. /app/app/src/themeSelector/themes/myCustomTheme
  2. 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.
  3. Pick a Google Font for the new theme. Install it with yarn add typeface-{your-font-name}.
    e.g. yarn add typeface-pt-sans
  4. 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 a logo.png file in myCustomTheme folder.
  5. Create a index.ts file in myCustomTheme 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";
  1. 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
}
  1. Run yarn start and test the new theme by selecting it from the sidebar.

Hosting

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:

paypal