diff --git a/htdocs/css/themes.css b/htdocs/css/themes.css
index 442f466f..bb8a6f99 100644
--- a/htdocs/css/themes.css
+++ b/htdocs/css/themes.css
@@ -68,6 +68,14 @@ body.theme-navy {
--theme-gradient-color2: #002F3F;
}
+/* Theme: black */
+body.theme-black {
+ --theme-color1: #000000;
+ --theme-color2: #202020;
+ --theme-gradient-color1: #000000;
+ --theme-gradient-color2: #303030;
+}
+
/* Theme: night */
body.theme-night {
--theme-color1: #6c2ceb;
diff --git a/htdocs/gfx/svg-defs.svg b/htdocs/gfx/svg-defs.svg
index 52cfa184..e1df3536 100644
--- a/htdocs/gfx/svg-defs.svg
+++ b/htdocs/gfx/svg-defs.svg
@@ -31,7 +31,7 @@
-
-
+
+
diff --git a/htdocs/index.html b/htdocs/index.html
index 62f8b7fb..ebcef0ff 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -262,10 +262,6 @@
▾ Theme
-
-
-
-
@@ -277,7 +273,13 @@
+
+
+
+
+
+
▾ Display
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index f4abb256..54d9bf9c 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -2034,21 +2034,27 @@ function set_ui_frame(x) {
function set_ui_opacity(x) {
x = x<10? 10 : x>100? 100 : x;
$('.openwebrx-panel').css('opacity', x/100);
- $('#openwebrx-opacity-slider').val(x);
+ $('#openwebrx-opacity-slider')
+ .attr('title', 'Opacity (' + Math.round(x) + '%)')
+ .val(x);
}
function set_ui_scheme(theme) {
- const themes = ['brown', 'red', 'green', 'khaki', 'blue', 'navy', 'night'];
- $('#openwebrx-themes-listbox').val(theme);
-
// Save current theme name
ui_scheme = theme;
- themes.forEach(function(theme) {
- $('body').removeClass('theme-' + theme);
- });
+ // Set selector
+ var lb = $('#openwebrx-themes-listbox');
+ lb.val(theme);
+
+ // Remove existing theme
+ var opts = lb[0].options;
+ for(j=0 ; j