feat(ui): Rework theming system, add new theme.

Author: bastienwirtz

docs/configuration.md

@@ -121,6 +121,7 @@ services:
     icon: "fas fa-code-branch"
     # A path to an image can also be provided. Note that icon take precedence if both icon and logo are set.
     # logo: "path/to/logo"
+    # class: "highlight-purple" # Optional css class to add on the service group. 
     items:
       - name: "Awesome app"
         logo: "assets/tools/sample.png"

docs/theming.md

@@ -1,51 +1,76 @@
 # Theming
 
-## Customization from yaml configuration file
+## Change theme
 
-Some aspect of the theme can be customized using the yaml configuration file.
+the default theme can be changed using the yaml configuration file
+
+```yaml
+theme: default # 'default', 'walkxcode', or 'neon' see files in 'src/assets/themes'.
+```
+
+## Colors and background customization
+
+Default colors and background can be customized for each theme variant (light and dark), using either the yaml config file, or the css variables (cf "Additional stylesheets" below).
+
+### Available options
+
+| yaml | css | description |
+| --------------------- | ----------------------- | --- |
+| `highlight-primary`   | `--highlight-primary`   | header background, group title icons       |
+| `highlight-secondary` | `--highlight-secondary` | navbar background, default tag color |
+| `highlight-hover`     | `--highlight-hover`     | navbar links hover, search input background |
+| `background`          | `--background`          | page background color |
+| `card-background`     | `--card-background`     | service card background color |
+| `text`                | `--text`                | main text color |
+| `text-header`         | `--text-header`         | header text color |
+| `text-title`          | `--text-title`          | service card title color |
+| `text-subtitle`       | `--text-subtitle`       | service card subtitle color  |
+| `card-shadow`         | `--card-shadow`         | Service card `box-shadow` |
+| `link`                | `--link`                | Links color (footer & message), service card icon color  |
+| `link-hover`          | `--link-hover`          | Links hover color (footer & message), service card icon hover color |
+| `background-image`    | `--background-image`    | page background image url (when used in css, set `url(<image-url>)` insted of just the url. see exemple below)|
+
+
+yaml exemple
 
 ```yml
 colors:
   light:
     highlight-primary: "#3367d6"
-    highlight-secondary: "#4285f4"
-    highlight-hover: "#5a95f5"
-    background: "#f5f5f5"
-    card-background: "#ffffff"
-    text: "#363636"
-    text-header: "#424242"
-    text-title: "#303030"
-    text-subtitle: "#424242"
-    card-shadow: rgba(0, 0, 0, 0.1)
-    link: "#3273dc"
-    link-hover: "#363636"
-    background-image: "assets/your/light/bg.png"
+    background-image: "assets/your/light/bg.webp"
+    ...
   dark:
     highlight-primary: "#3367d6"
-    highlight-secondary: "#4285f4"
-    highlight-hover: "#5a95f5"
-    background: "#131313"
-    card-background: "#2b2b2b"
-    text: "#eaeaea"
-    text-header: "#ffffff"
-    text-title: "#fafafa"
-    text-subtitle: "#f5f5f5"
-    card-shadow: rgba(0, 0, 0, 0.4)
-    link: "#3273dc"
-    link-hover: "#ffdd57"
-    background-image: "assets/your/dark/bg.png"
+    background-image: "assets/your/dark/bg.webp"
+    ...
+```
+
+CSS exemple
+
+```css
+.light {
+    --highlight-primary: #3367d6;
+    --background-image: url("assets/your/light/bg.webp");
+    ...
+}
+
+.dark {
+    --highlight-primary: #3367d6;
+    --background-image: url("assets/your/dark/bg.webp");
+    ...
+}
 ```
 
 ## Additional stylesheets
 
-One or more additional stylesheets can be loaded to add or override style from the current theme. Use the 'stylesheet' option in the yaml configuration file to add CSS file to be used.
+One or more additional stylesheets can be loaded to add or override style from the current theme. Use the 'stylesheet' option in the yaml configuration file to load your own CSS file.
 
 ```yml
 stylesheet:
    - "assets/custom.css"
 ```
 
-### customization exemple
+### Customization exemple
 
 #### Max width modification
 

package.json

@@ -11,10 +11,10 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
-    "bulma": "^0.9.4",
+    "bulma": "^1.0.1",
     "lodash.merge": "^4.6.2",
     "vue": "^3.4.26",
-    "yaml": "^2.4.2"
+    "yaml": "^2.4.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.8.0",
@@ -29,5 +29,5 @@
     "vite-plugin-pwa": "^0.20.0"
   },
   "license": "Apache-2.0",
-  "packageManager": "pnpm@9.1.4+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
+  "packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
 }

pnpm-lock.yaml

@@ -24,7 +24,7 @@ links:
     url: "https://www.wikipedia.org/"
 
 services:
-  - name: "More applications on another page!"
+  - name: "More apps on another page!"
     icon: "fas fa-cloud"
     items:
       - name: "Awesome app on a second page!"

public/assets/additional-page.yml.dist

@@ -12,33 +12,6 @@ footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a hre
 
 # Optional theme customization
 theme: default
-colors:
-  light:
-    highlight-primary: "#3367d6"
-    highlight-secondary: "#4285f4"
-    highlight-hover: "#5a95f5"
-    background: "#f5f5f5"
-    card-background: "#ffffff"
-    text: "#363636"
-    text-header: "#ffffff"
-    text-title: "#303030"
-    text-subtitle: "#424242"
-    card-shadow: rgba(0, 0, 0, 0.1)
-    link: "#3273dc"
-    link-hover: "#363636"
-  dark:
-    highlight-primary: "#3367d6"
-    highlight-secondary: "#4285f4"
-    highlight-hover: "#5a95f5"
-    background: "#131313"
-    card-background: "#2b2b2b"
-    text: "#eaeaea"
-    text-header: "#ffffff"
-    text-title: "#fafafa"
-    text-subtitle: "#f5f5f5"
-    card-shadow: rgba(0, 0, 0, 0.4)
-    link: "#3273dc"
-    link-hover: "#ffdd57"
 
 columns: "3"
 
@@ -97,7 +70,7 @@ services:
       - name: "Buy me a coffee!"
         subtitle: "Sponsor this project"
         icon: "fa-solid fa-mug-hot"
-        url: "https://www.buymeacoffee.com/bastien" 
+        url: "https://www.buymeacoffee.com/bastien"
   - name: "Smart cards showcase"
     icon: "fa-solid fa-brain"
     items: 
@@ -127,6 +100,8 @@ services:
         units: "metric"
         endpoint: "/dummy-data/openweather/weather"
         type: "OpenWeather"
+      - name: "Change Theme"
+        type: "ThemeChooser"
   - name: "Ressources"
     icon: "fa-regular fa-bookmark"
     items:

public/assets/config-demo.yml.dist

@@ -1,6 +1,6 @@
 ---
 # Homepage configuration
-# See https://fontawesome.com/v5/search for icons options
+# See https://fontawesome.com/v6/search for icons options
 
 title: "Demo dashboard"
 subtitle: "Homer"
@@ -12,6 +12,9 @@ footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a hre
 
 # Optional theme customization
 theme: default
+
+# Optional theme customization (color overrrides)
+# overrrides can also be done using CSS vars 
 colors:
   light:
     highlight-primary: "#3367d6"