Still converting to bootstrap 5. Reworked album layout. Switched to bootswatch solar theme

approot/artist.xml

@@ -6,7 +6,7 @@
 	<div class="mb-3">
 		${name}
 		${clusters class="mb-2"}
-		${play-btn class="btn btn-lg btn-outline-dark border-0 me-2"}${more-btn class="btn btn-lg btn-outline-dark border-0"}
+		${play-btn class="btn btn-outline-primary me-2"}${more-btn class="btn btn-outline-primary"}
 	</div>
 	${<if-has-release>}
 	${releases class="row gy-4"}

approot/main.xml

@@ -7,11 +7,11 @@
 		${contents}
 		${notifications class="toast-container position-fixed top-0 end-0 p-3"}
 	</div>
-	${player class="fixed-bottom bg-light Lms-player"}
+	${player class="fixed-bottom bg-dark Lms-player"}
 </message>
 
 <message id="Lms.main.template.navbar">
-	<nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
+	<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
 		<div class="container">
 			<form class="d-flex">
 				${search class="form-control" type="search"}

approot/messages.xml

@@ -177,11 +177,9 @@
 
 
 <!--Settings-->
-<message id="Lms.Settings.appearance">Appearance</message>
 <message id="Lms.Settings.audio">Audio</message>
 <message id="Lms.Settings.audio-settings-are-local">These audio settings are local to your browser!</message>
 <message id="Lms.Settings.change-password">Change password</message>
-<message id="Lms.Settings.dark-mode">Dark mode</message>
 <message id="Lms.Settings.demo-cannot-save">Cannot save using a demo account!</message>
 <message id="Lms.Settings.menu-settings"><i class="fa fa-fw fa-cog" aria-hidden="true"></i> Settings</message>
 <message id="Lms.Settings.password-bad">Bad password</message>

approot/messages_fr.xml

@@ -177,11 +177,9 @@
 
 
 <!--Settings-->
-<message id="Lms.Settings.appearance">Apparence</message>
 <message id="Lms.Settings.audio">Audio</message>
 <message id="Lms.Settings.audio-settings-are-local">Ces paramètres audio sont locaux à votre navigateur !</message>
 <message id="Lms.Settings.change-password">Changement de mot de passe</message>
-<message id="Lms.Settings.dark-mode">Mode sombre</message>
 <message id="Lms.Settings.demo-cannot-save">Impossible de sauvegarder en utilisant un compte de démo !</message>
 <message id="Lms.Settings.menu-settings"><i class="fa fa-fw fa-cog" aria-hidden="true"></i> Paramètres</message>
 <message id="Lms.Settings.password-bad">Mauvais mot de passe</message>

approot/messages_it.xml

@@ -176,11 +176,9 @@
 
 
 <!--Settings-->
-<message id="Lms.Settings.appearance">Aspetto</message>
 <message id="Lms.Settings.audio">Audio</message>
 <message id="Lms.Settings.audio-settings-are-local">Queste impostazioni sono salvate localmente su questo dispositivo!</message>
 <message id="Lms.Settings.change-password">Cambia password</message>
-<message id="Lms.Settings.dark-mode">Tema scuro</message>
 <message id="Lms.Settings.demo-cannot-save">Non posso salvare le impostazioni utilizzando l'account demo!</message>
 <message id="Lms.Settings.menu-settings"><i class="fa fa-fw fa-cog" aria-hidden="true"></i> Impostazioni</message>
 <message id="Lms.Settings.password-bad">Password errata</message>

approot/messages_zh.xml

@@ -176,11 +176,9 @@
 <message id="Lms.PlayHistory.playhistory">播放历史</message>
 
 <!--Settings-->
-<message id="Lms.Settings.appearance">外观</message>
 <message id="Lms.Settings.audio">音频</message>
 <message id="Lms.Settings.audio-settings-are-local">这些音频设置仅保存在您的本地浏览器！</message>
 <message id="Lms.Settings.change-password">更改密码</message>
-<message id="Lms.Settings.dark-mode">夜间模式</message>
 <message id="Lms.Settings.demo-cannot-save">使用演示账号时不能保存！</message>
 <message id="Lms.Settings.menu-settings"><i class="fa fa-fw fa-cog" aria-hidden="true"></i> 设置</message>
 <message id="Lms.Settings.password-bad">无效密码</message>

approot/release.xml

@@ -7,20 +7,20 @@
 </message>
 
 <message id="Lms.Explore.Release.template">
-	<div class="row mb-3 gy-3">
-		<div class="col-lg-4">
+	<div class="row mb-5 gy-3">
+		<div class="col-lg-3 col-md-4">
 			${cover class="Lms-explore-release-cover"}
-			<div>
-				${name}
+		</div>
+		<div class="col">
+			<h3>${name}</h3>
 			${<if-has-release-artists>}${artists}${</if-has-release-artists>}
 			${<if-has-various-release-artists>}${tr:Lms.Explore.various-artists}${</if-has-various-release-artists>}
 			<div class="small text-muted">${<if-has-year>}${year}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>} · ${</if-has-year>}${duration}</div>
 			${clusters}
 		</div>
-		</div>
-		<div class="col-lg-8">
+		<div class="col-12">
 			<div class="mb-3">
-				${play-btn class="btn btn-lg btn-outline-dark border-0 me-2"}${more-btn class="btn btn-lg btn-outline-dark border-0"}
+				${play-btn class="btn btn-outline-primary me-2"}${more-btn class="btn btn-outline-primary"}
 			</div>
 			${container class="d-grid gap-3"}
 		</div>
@@ -29,7 +29,7 @@
 		${<if-has-similar-releases>}
 		<div class="col-12">
 			<h3>${tr:Lms.Explore.Release.similar-releases}</h3>
-			${similar-releases class="row"}
+			${similar-releases class="row gy-4"}
 		</div>
 		${</if-has-similar-releases>}
 		${<if-has-copyright>}
@@ -61,7 +61,7 @@
 </message>
 
 <message id="Lms.Explore.Release.template.entry">
-	<div class="d-flex align-items-center rounded Lms-bg-light-hover">
+	<div class="d-flex align-items-center rounded Lms-bg-dark-hover">
 		<div class="p-2 text-muted text-end" style="min-width: 2.1rem;">
 			${<if-has-track-number>}${track-number}${</if-has-track-number>}
 		</div>

approot/releases.xml

@@ -5,13 +5,13 @@
 <message id="Lms.Explore.Releases.template">
 	<div class="mb-3">
 		${mode class="nav nav-pills mb-2"}
-		${play-btn class="btn btn-lg btn-outline-dark border-0 me-2"}${more-btn class="btn btn-lg btn-outline-dark border-0"}
+		${play-btn class="btn btn-outline-primary me-2"}${more-btn class="btn btn-outline-primary"}
 	</div>
 	${releases}
 </message>
 
 <message id="Lms.Explore.Releases.template.entry-grid">
-		<div class="card border-0">
+		<div class="card border-0 bg-transparent">
 			${cover class="shadow-sm"}
 			${release-name class="text-truncate text-nowrap"}
 			${<if-has-year>}${year}${</if-has-year>}
@@ -25,5 +25,4 @@
 	${loading-indicator}
 </message>
 
-
 </messages>

approot/settings.xml

@@ -5,18 +5,6 @@
 
 <message id="Lms.Settings.template">
 	<form class="row g-3">
-		<legend>${tr:Lms.Settings.appearance}</legend>
-		<div class="col-12">
-			<div class="form-check">
-				${dark-mode class="form-check-input"}
-				<label class="form-check-label" for="${id:dark-mode}">
-					${tr:Lms.Settings.dark-mode}
-				</label>
-				<div class="invalid-feedback">
-					${dark-mode-info}
-				</div>
-			</div>
-		</div>
 		<legend>${tr:Lms.Settings.audio}</legend>
 		<div class="alert alert-info">
 			${tr:Lms.Settings.audio-settings-are-local}

approot/tracks.xml

@@ -6,7 +6,7 @@
 <message id="Lms.Explore.Tracks.template">
 	<div class="mb-3">
 		${mode class="nav nav-pills mb-2"}
-		${play-btn class="btn btn-lg btn-outline-dark border-0 me-2"}${more-btn class="btn btn-lg btn-outline-dark border-0"}
+		${play-btn class="btn btn-outline-primary me-2"}${more-btn class="btn btn-outline-primary"}
 	</div>
 	${tracks}
 </message>

docroot/css/lms.css

@@ -1,6 +1,6 @@
 /* Generic rules */
-.Lms-bg-light-hover:hover {
-	background-color: var(--bs-light);
+.Lms-bg-dark-hover:hover {
+	background-color: var(--bs-dark);
 }
 
 .Lms-mw-fit-content {

src/lms/ui/LmsApplication.cpp

@@ -164,10 +164,9 @@ LmsApplication::~LmsApplication() = default;
 void
 LmsApplication::init()
 {
-	setTheme(std::make_shared<Wt::WBootstrap5Theme>());
+	setTheme(std::make_shared<LmsTheme>());
 
 	useStyleSheet("resources/font-awesome/css/font-awesome.min.css");
-	useStyleSheet("css/lms.css");
 	require("js/mediaplayer.js");
 
 	setTitle("LMS");

src/lms/ui/LmsTheme.cpp

@@ -22,68 +22,18 @@
 #include "utils/Logger.hpp"
 #include "LmsApplication.hpp"
 
-namespace UserInterface {
-
-LmsTheme::LmsTheme(Database::UITheme theme)
-: _theme {theme}
+namespace UserInterface
 {
-}
-
-void
-LmsTheme::setTheme(Database::UITheme )
-{
-
-/*	if (theme == _theme)
-		return;
-
-	// Hack, use the application interface directly since changing theme is not allowed
-	const auto currentStyleSheets {getStyleSheets(_theme)};
-	for (auto it {std::crbegin(currentStyleSheets)}; it != std::crend(currentStyleSheets); ++it)
-		LmsApp->removeStyleSheet(*it);
-
-	_theme = theme;
-	for (const auto& styleSheet : getStyleSheets(theme))
-		LmsApp->useStyleSheet(styleSheet);
-		*/
-}
-/*
-std::vector<Wt::WLinkedCssStyleSheet>
-LmsTheme::styleSheets() const
-{
-/	const std::vector<Wt::WLink> styleSheets {getStyleSheets(_theme)};
-	std::vector<Wt::WLinkedCssStyleSheet> res;
-	res.reserve(styleSheets.size());
-
-	std::transform(std::cbegin(styleSheets), std::cend(styleSheets), std::back_inserter(res), [](const Wt::WLink& styleSheet) { return Wt::WLinkedCssStyleSheet {styleSheet}; });
-	return res;
-}
-
-std::vector<Wt::WLink>
-LmsTheme::getStyleSheets(Database::UITheme )
-{
-	switch (theme)
+	std::vector<Wt::WLinkedCssStyleSheet>
+	LmsTheme::styleSheets() const
 	{
-		case Database::UITheme::Dark:
-			return
+		static const std::vector<Wt::WLinkedCssStyleSheet> files
 		{
-				{"css/fonts.css"},
-				{"css/bootstrap-darkly.min.css"},
-				{"resources/themes/bootstrap/3/wt.css"},
+			{"css/bootstrap.solar.min.css"},
+			{"resources/themes/bootstrap/5/wt.min.css"},
 			{"css/lms.css"},
-				{"css/lms-darkly.css"},
 		};
 
-		case Database::UITheme::Light:
-			return
-			{
-				{"css/fonts.css"},
-				{"css/bootstrap-flatly.min.css"},
-				{"resources/themes/bootstrap/3/wt.css"},
-				{"css/lms.css"},
-				{"css/lms-flatly.css"},
-			};
+		return files;
 	}
-	return {};
-}
-*/
 }

src/lms/ui/LmsTheme.hpp

@@ -24,21 +24,12 @@
 #include <Wt/WBootstrap5Theme.h>
 #include <Wt/WLinkedCssStyleSheet.h>
 
-#include "services/database/Types.hpp"
-
 namespace UserInterface
 {
 	class LmsTheme : public Wt::WBootstrap5Theme
 	{
-		public:
-			LmsTheme(Database::UITheme theme);
-
-			void setTheme(Database::UITheme theme);
-
 		private:
-//			std::vector<Wt::WLinkedCssStyleSheet> styleSheets() const override;
-//			static std::vector<Wt::WLink> getStyleSheets(Database::UITheme theme);
-
-			Database::UITheme _theme;
+			std::vector<Wt::WLinkedCssStyleSheet> styleSheets() const override;
+			static std::vector<Wt::WLink> getStyleSheets();
 	};
 }

src/lms/ui/SettingsView.cpp

@@ -42,7 +42,6 @@
 #include "utils/Service.hpp"
 
 #include "LmsApplication.hpp"
-#include "LmsTheme.hpp"
 #include "MediaPlayer.hpp"
 
 namespace UserInterface {
@@ -53,7 +52,6 @@ class SettingsModel : public Wt::WFormModel
 {
 	public:
 		// Associate each field with a unique string literal.
-		static inline const Field DarkModeField {"dark-mode"};
 		static inline const Field TranscodeModeField {"transcode-mode"};
 		static inline const Field TranscodeFormatField {"transcode-format"};
 		static inline const Field TranscodeBitrateField {"transcode-bitrate"};
@@ -80,7 +78,6 @@ class SettingsModel : public Wt::WFormModel
 		{
 			initializeModels();
 
-			addField(DarkModeField);
 			addField(TranscodeModeField);
 			addField(TranscodeBitrateField);
 			addField(TranscodeFormatField);
@@ -139,14 +136,6 @@ class SettingsModel : public Wt::WFormModel
 
 			User::pointer user {LmsApp->getUser()};
 
-			{
-				const UITheme newTheme {Wt::asNumber(value(DarkModeField)) ? UITheme::Dark : UITheme::Light};
-				LmsTheme* lmsTheme {static_cast<LmsTheme*>(LmsApp->theme().get())};
-				lmsTheme->setTheme(newTheme);
-
-				user.modify()->setUITheme(newTheme);
-			}
-
 			{
 				MediaPlayer::Settings settings;
 
@@ -209,8 +198,6 @@ class SettingsModel : public Wt::WFormModel
 
 			User::pointer user {LmsApp->getUser()};
 
-			setValue(DarkModeField, user->getUITheme() == UITheme::Dark);
-
 			{
 				const auto settings {*LmsApp->getMediaPlayer().getSettings()};
 
@@ -408,12 +395,6 @@ SettingsView::refreshView()
 
 	auto model {std::make_shared<SettingsModel>(authPasswordService, !LmsApp->isUserAuthStrong())};
 
-	// Appearance
-	{
-		auto darkMode {std::make_unique<Wt::WCheckBox>()};
-		t->setFormWidget(SettingsModel::DarkModeField, std::move(darkMode));
-	}
-
 	if (authPasswordService)
 	{
 		t->setCondition("if-has-change-password", true);