WT-9350: customize widget gallery theme

This adds a theme that changes the widget gallery colors to the Wt
purple, or JWt orange.

The paintbrush example was updated with button colors that match the
color that is actually used.

The JWt logo was added, and the JWt widget gallery will now use the JWt logo.

Author: RockinRoel

.dprint.json

@@ -18,7 +18,8 @@
     "src/js/*.{js}",
     "src/web/skeleton/*.{js}",
     "src/themes/bootstrap/5/*.{js}",
-    "examples/custom-bs-theme/theme/*.{js}"
+    "examples/custom-bs-theme/theme/*.{js}",
+    "examples/widgetgallery/style/*.{js}"
   ],
   "excludes": [
     "**/node_modules",

examples/widgetgallery/CMakeLists.txt

@@ -8,6 +8,7 @@ SET(WIDGETGALLERY_SOURCES
   Media.h Media.C
   Navigation.h Navigation.C
   Sample.h
+  Theme.h Theme.C
   Topic.h Topic.C
   TopicTemplate.h TopicTemplate.C
   TreesTables.h TreesTables.C

examples/widgetgallery/Theme.C

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2022 Emweb bv, Herent, Belgium
+ *
+ * See the LICENSE file for terms of use.
+ */
+
+#include "Theme.h"
+
+#include <Wt/WLink.h>
+
+Theme::Theme(const std::string &name)
+  : name_(name)
+{}
+
+std::vector<Wt::WLinkedCssStyleSheet> Theme::styleSheets() const
+{
+  return {
+    Wt::WLinkedCssStyleSheet(Wt::WLink("style/" + name_ + ".css"))
+  };
+}

examples/widgetgallery/Theme.h

@@ -0,0 +1,26 @@
+// This may look like C code, but it's really -*- C++ -*-
+/*
+ * Copyright (C) 2022 Emweb bv, Herent, Belgium
+ *
+ * See the LICENSE file for terms of use.
+ */
+
+#ifndef THEME_H_
+#define THEME_H_
+
+#include <Wt/WBootstrap5Theme.h>
+#include <Wt/WLinkedCssStyleSheet.h>
+
+#include <vector>
+
+class Theme : public Wt::WBootstrap5Theme {
+public:
+  explicit Theme(const std::string& name);
+
+  std::vector<Wt::WLinkedCssStyleSheet> styleSheets() const override;
+
+private:
+  std::string name_;
+};
+
+#endif // THEME_H_

examples/widgetgallery/WidgetGallery.C

@@ -26,6 +26,14 @@ WidgetGallery::WidgetGallery()
     openMenuButton_(nullptr),
     menuOpen_(false) // once applies when responsive UI
 {
+#ifndef WT_TARGET_JAVA
+  setCondition("if:cpp", true);
+  setCondition("if:java", false);
+#else
+  setCondition("if:cpp", false);
+  setCondition("if:java", true);
+#endif
+
   contentsStack_ = bindNew<Wt::WStackedWidget>("contents");
 
   Wt::WAnimation animation(Wt::AnimationEffect::Fade,

examples/widgetgallery/approot/src.xml

@@ -4,7 +4,12 @@
     <div class="wg-wrapper">
       <div class="wg-sidebar">
         <div class="wg-logo">
-          <img src="/icons/wt.png" />
+          ${<if:cpp>}
+            <img src="/icons/wt.png" />
+          ${</if:cpp>}
+          ${<if:java>}
+            <img src="/icons/jwt.png" />
+          ${</if:java>}
           <h1>Widget Gallery</h1>
         </div>
         ${menu}

examples/widgetgallery/approot/tpl.xml

@@ -3,12 +3,6 @@
     line-height: 100%;
 }
 
-.contents h1,
-.contents h2,
-.contents h3 {
-    color: #007bff;
-}
-
 .submenu {
     overflow: auto;
 }