Theming

A guide to developing themes for the new DaInfo App.

Visualizing the App

Before starting to build a theme for the app, it will be helpful to visualize what the app looks like. Here are a few pages that cover most types of interfaces used in the app. Although there are many more features, they often utilize reused components from these pages.

Color Components

The app is primarily styled using nine color attributes, with the help of four additional color attributes. Of the nine main attributes, three influence the background of the app, three influence the text in the app, and three influence how input fields look within the app.

Note

In the following examples, the specified color component is the one highlighted in yellow.

Background

Main Background

Across all screens, this provides the main background for the app.

Accent Background

Used for basic contrast when displaying elements.

Highlight Background

Used for highlighting specific display components; especially those that can be interacted with.

Highlight Background (C)

Optionally different from Highlight Background to customize the cocurricular button on the Faculty page.

Text

Main Text

Alternate Text

Alternate Text (F)

Optionally different from Alternate Text to provide more contrast on the Faculty page.

Highlight Text

Highlight Text (F)

Optionally different from Highlight Text to provide more contrast on the Faculty page.

Input

Main Border

The default border on input fields.

Focus Border

The border when input fields are focused on.

Input Text

The color for the text within input fields.

Display

This is a color chosen to provide aesthetically pleasing contrast for the theme colors on the Theme Selector page.

Picking Colors

You may pick colors as you please. The Tailwind CSS Palette might be a good place to start (press Shift to view hex codes). The theme needs to be saved in the following format.

Format

Tip

Colors may be defined either as hex codes or as Tailwind preset colors

shortName: {

    name: "Longer Name",
    desc: "One-liner description of the theme",
    author: "Name for Credit",

    light: {
      display: "#fff000",
      mainBackground: colors.blue[50],
      accentBackground: ...,
      highlightBackground: ...,
      highlightBackgroundC: ...,
      mainText: ...,
      alternateText: ...,
      alternateTextF: ...,
      highlightText: ...,
      highlightTextF: ...,
      mainBorder: ...,
      focusBorder: ...,
      inputText: ...,
    },

    dark: {
      display: "#fff000",
      mainBackground: colors.blue[50],
      accentBackground: ...,
      highlightBackground: ...,
      highlightBackgroundC: ...,
      mainText: ...,
      alternateText: ...,
      alternateTextF: ...,
      highlightText: ...,
      highlightTextF: ...,
      mainBorder: ...,
      focusBorder: ...,
      inputText: ...,
    }

  }

Users will see either the dark colors or the light colors depending on what mode they have set on their device's Appearance settings. If you think this flexibility is not beneficial for your theme, you may duplicate the same colors for both the types. If you are more comfortable with another format, you may use that and I can convert it into this format. Please, however, ensure that all the required colors are present. Thank you!