search

Amsterdam-Music-Lab / MUSCLE

An application to easily set up and run online listening experiments for music research.
https://www.amsterdammusiclab.nl/
MIT License
4 stars 1 forks source link

Add theming #293

Open jaburgoyne opened 1 year ago

jaburgoyne commented 1 year ago

The lowest-hanging fruit seems to be to allow other labs to change the fonts (display and body text), the default colour scheme (cf. the AML style guide), and the favicons

BeritJanssen commented 1 year ago

We might set colours and fonts as scss variables, and let labs override them.

drikusroor commented 7 months ago

As discussed last Tuesday, I think we concluded it would be nice if we could configure a theme through the Django admin interface. Preferably the:

  1. Font
  2. Logo
  3. Background image
  4. Design token colors (set primary color, secondary color, success color, warning color, etc.)

A Dark theme would be 2nd priority.

@jaburgoyne Could you update the PR title & description to something more concise, with clearer boundaries and a well-defined scope? Perhaps by using a User Story Format (example below)?

As a MUSCLE admin user I would like to be able to configure the font, logo, background image and main design token colors (primary, success, positive, negative, secondary, info) so I can easily customize the MUSCLE application's design for my organization.

(feel free to copy + paste)

jaburgoyne commented 7 months ago

As a lab leader implementing the MUSCLE infrastructure at my own laboratory, I would like to be able to configure the fonts (heading, body, and perhaps code), logo, background image, and utility-class colours (primary, secondary, etc.) so that my lab's experiments have a consistent local look.

jaburgoyne commented 7 months ago

Lower priority: As an experiment designer using text in non-Latin scripts, I may want to be able to configure the fonts (heading, body, and perhaps code) to support internationalisation for a specific experiment only.

jaburgoyne commented 7 months ago

Still lower priority: As an experiment designer, I may want to be able to configure the background image and utility-class colours specifically for an individual experiment.

jaburgoyne commented 7 months ago

Lowest priority: As a lab manager running an experiment on behalf of an external party, I may want to be able to configure the logo for an individual experiment.

jaburgoyne commented 7 months ago

The utility classes for colours that are implemented in Bootstrap (the world I'm most familiar with) would be the following:

We don't necessarily need to support all of these (and could also support 'normal' colour names in addition), but this may still help to contextualise the issue.