Adding a theme

This guide explains how to add support for a new theme to Cobalt.

Backend

1. Make sure you start from the project root.

2. Add the new theme to the ThemeEnum in the cobalt/backend/domain/enums.py file:

class ThemeEnum(StrEnum):
    """
    User theme enum.
    """
    COBALT_DARK = "cobalt_dark"
    COBALT_LIGHT = "cobalt_light"
    NEW_THEME_DARK = "new_theme_dark"

WARNING

Make sure to specify either dark or light in the key and value.

3. Generate a new migration:

make alembic-revision name="Add new dark theme"

TIP

Short alias is also available: make a:r name="Add new dark theme".

4. Since alembic does not track changes to enum values, you need to manually update the new migration file in the cobalt/backend/infrastructure/databases/postgres/migrations/versions folder:

def upgrade() -> None:
    """Upgrade schema."""
    # ### commands auto generated by Alembic - please adjust! ###
    op.execute("ALTER TYPE themeenum ADD VALUE IF NOT EXISTS 'NEW_THEME_DARK'") 
    # ### end Alembic commands ###

5. Restart the backend container:

docker restart cobalt-backend

Frontend

1. Make sure you start from the project root.

2. Add the colors for the new theme to the cobalt/frontend/src/assets/styles/variables/themes.scss file:

$new-theme-dark: (
  primary: #3f85f1,
  ...
  shadow-soft: 0 1px 6px rgba(0, 0, 0, 0.1),
);

3. In the same file, register a new theme:

[data-theme="new_theme_dark"] {
  @include generate-theme($new-theme-dark);
}

4. Add the new theme to the ThemeEnum type in the cobalt/frontend/src/types/enums/theme.ts file:

export enum ThemeEnum {
  COBALT_DARK = "cobalt_dark",
  COBALT_LIGHT ="cobalt_light",
  NEW_THEME_DARK = "new_theme_dark"
}

WARNING

Don't forget to add the settings.general.theme.options.new_theme_dark translation key to all locale files.