UI: Implement Web Assets' theme system, and add 'dark' theme #103972

Merged
Márton Lente merged 23 commits from ui/theme-system into main 2024-09-30 15:03:39 +02:00
3 changed files with 4 additions and 2 deletions
Showing only changes of commit f35c192eea - Show all commits

View File

@ -1,6 +1,7 @@
/* Theme-system mixins to make dynamic location colours contrast work with dark /* Theme-system mixins to make dynamic location colours contrast work with dark
* and light themes. */ * and light themes. */
=theme-dark-schedule =theme-dark-schedule
--event-detail-location-color-l: 65%
--schedule-container-location-color-l: 65% --schedule-container-location-color-l: 65%
--schedule-filters-container-location-bg-color-l: 20% --schedule-filters-container-location-bg-color-l: 20%
--schedule-filters-container-location-color-l: 60% --schedule-filters-container-location-color-l: 60%
@ -15,6 +16,7 @@
=theme-light-schedule =theme-light-schedule
--event-detail-location-color-l: 35%
--schedule-container-location-color-l: 35% --schedule-container-location-color-l: 35%
--schedule-filters-container-location-bg-color-l: 10% --schedule-filters-container-location-bg-color-l: 10%
--schedule-filters-container-location-color-l: 50% --schedule-filters-container-location-color-l: 50%

View File

@ -7,7 +7,7 @@
| {% if object.status == 'accepted' %} | {% if object.status == 'accepted' %}
div.ml-4 div.ml-4
small.text-muted.d-block Location small.text-muted.d-block Location
span(style="color: hsl(var(--location-hue-{{ object.location.slug }}), 50%, 50%);") span(style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, var(--event-detail-location-color-l));")
| {% if object.location.slug %} | {% if object.location.slug %}
| {{ object.location.slug | title }} | {{ object.location.slug | title }}
| {% else %} | {% else %}

View File

@ -78,7 +78,7 @@ meta(name='twitter:image', content='{{request.scheme}}://{{request.META.HTTP_HOS
ul.event-description ul.event-description
| {% if object.location.slug %} | {% if object.location.slug %}
li.event-location( li.event-location(
style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, 35%);") style="color: hsl(var(--location-hue-{{ object.location.slug }}), 80%, var(--event-detail-location-color-l));")
| {{ object.location.slug | upper }} | {{ object.location.slug | upper }}
| {% endif %} | {% endif %}