Themes

The GitHub Bubble Chart supports multiple themes to match different styles and preferences. You can use a predefined theme or contribute your own custom theme by following the structure outlined below.

Available Themes

Below is a list of currently predefined themes:

default	light	dark

dark_dimmed	dark_high_contrast

How to Choose a Theme

You can select a theme by passing the theme parameter in the URL:

https://github-bubble-chart.vercel.app?username=teociaps&theme=dark

Note: When using a custom configuration JSON file, specify the theme in the options object of your JSON file instead of using the URL parameter. See custom configuration JSON for more details.

Creating a Custom Theme

If you want to create your own theme, you need to follow the base structure for themes. Each theme extends the ThemeBase class and must define specific properties:

export abstract class ThemeBase {
  public abstract textColor: string;
  public abstract backgroundColor: string;
  public abstract border: {
    color: string;
    width: number;
    rounded: boolean;
  };
}

Example of a Custom Theme

export class CustomPurpleTheme extends ThemeBase {
  public textColor = '#ffffff';
  public backgroundColor = '#6a0dad';
  public border = {
    color: '#ffffff',
    width: 2,
    rounded: true,
  };
}

Don't forget to add your theme to the themeMap, at the end of the same file:

export const themeMap: { [key: string]: ThemeBase } = {
  ...
  custom_purple: new CustomPurpleTheme(), // Add your theme here
};

Submitting Your Theme

If you have created a new theme and want to contribute it to the project, follow these steps:

1. Fork the Repository.
2. Create Your Theme: implement your theme here src\chart\themes.ts following the structure above.
3. Create a Pull Request: Submit your changes to the repository following the contribution guidelines. Make sure to include screenshots or examples of your theme in action.