Skip to content

Feature: Theme switcher

Christopher Mark Fullarton requested to merge themeSwitcher into staging

This update will introduce the new theme switcher feature.

Based upon the input of the SWT course I've created 2 Themes for arsnova.click (Dark and THM).

The owner of a session can choose the theme which shall be used for all attendees in the new created route /theme which is located between /answeroptions and /settimer

Changes

  • All color definitions are removed from their respective .scss files. Instead they are now stored as variables in the new theme-switcher.scss file. When adding new elements which require a color (background, foreground, border, box-shadow, etc.) they must be added in theme-switcher.scss file aswell where the color is set to the variable
  • All themes inherit the variables from the default arsnova.click theme but they can override them.
  • Since CSS does not allow to cascade styles on keyframes all keyframes have to be added in the theme-switcher with all style settings they need.

ToDo's

  • Implement "Elegant" theme (A theme for more sophisticated quizzes)
  • Implement "ARSnova" theme (Like arsnova.eu)

Known issues

  • Fix a few styling issues (regarding contrast, etc.) in the dark theme
  • Fix a few styling issues (regarding contrast, etc.) in the THM theme
  • Update the SVG logo file to be transparent
  • Refactor the hljs classes (Check which of them are needed and think of good names for the SCSS variables, etc.)
  • Add the theme to the session configuration when persisting it to the MongoDB (route from /timer to /lobby)

Preview

Theme "Dark":

image

Theme "THM":

image

Theme "Elegant":

image

Theme "ARSnova":

image

Merge request reports