From 59cd5de78baa31150958e6d0d6733407c0e95805 Mon Sep 17 00:00:00 2001 From: Tobias Urdin Date: Wed, 15 Mar 2023 23:36:45 +0000 Subject: web: add dark mode and theme selection This adds a theme selection in the preferences in the config modal and adds a new dark theme. Removes the line.png image and instead uses CSS linear-gradient that is available in all browsers since around 2018, also fixes the 15 pixels spacing issue that is there today. You can select between three different themes. Auto will use your system preference to choose either the light or dark theme, changes dynamically based on your system preference. Light is the current theme. Dark is the theme added by this patch series. The UX this changes is that if somebody has their system preferences set to dark, for example in Mac OS X that is in System Settings -> Appearance -> Dark the user will get the Zuul web UI in dark by default and same for the opposite. This uses a poor man's dark mode for swagger-ui as per the comment in [1]. [1] https://github.com/swagger-api/swagger-ui/issues/5327#issuecomment-742375520 Change-Id: I01cf32f3decdb885307a76eb79d644667bbbf9a3 --- releasenotes/notes/dark-mode-e9b1cca960d4b906.yaml | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 releasenotes/notes/dark-mode-e9b1cca960d4b906.yaml (limited to 'releasenotes/notes/dark-mode-e9b1cca960d4b906.yaml') diff --git a/releasenotes/notes/dark-mode-e9b1cca960d4b906.yaml b/releasenotes/notes/dark-mode-e9b1cca960d4b906.yaml new file mode 100644 index 000000000..997626af2 --- /dev/null +++ b/releasenotes/notes/dark-mode-e9b1cca960d4b906.yaml @@ -0,0 +1,9 @@ +--- +features: + - | + Added a new dark theme for the Zuul web interface. + - | + Added theme selection for the Zuul web interface. The default theme is set + to Auto which means your system/browsers preference determines if the Light + or Dark theme should be used. Either can be explicitly set in the settings + for the web interface by clicking the cogs in the top right. -- cgit v1.2.1