Dark mode in initializr and fixing build to update to latest version of plugin

Author: shai-almog

.github/workflows/initializr-cn1-version-pr.yml

@@ -3,8 +3,10 @@ name: Initializr CN1 Version PR
 on:
   push:
     tags:
-      - "v*"
-      - "[0-9]*"
+      - "*"
+  release:
+    types:
+      - published
 
 permissions:
   contents: write
@@ -18,21 +20,22 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Update Initializr Codename One versions
-        run: ./scripts/initializr/update-cn1-version.sh "${GITHUB_REF_NAME}"
+        run: ./scripts/initializr/update-cn1-version.sh "${{ github.event.release.tag_name || github.ref_name }}"
 
       - name: Create pull request
         uses: peter-evans/create-pull-request@v6
         with:
-          commit-message: "scripts/initializr: bump Codename One versions to ${{ github.ref_name }}"
-          title: "scripts/initializr: bump Codename One versions to ${{ github.ref_name }}"
+          commit-message: "scripts/initializr: bump Codename One versions to ${{ github.event.release.tag_name || github.ref_name }}"
+          title: "scripts/initializr: bump Codename One versions to ${{ github.event.release.tag_name || github.ref_name }}"
           body: |
-            Automated update of Codename One versions in `scripts/initializr` after release `${{ github.ref_name }}`.
+            Automated update of Codename One versions in `scripts/initializr` after release `${{ github.event.release.tag_name || github.ref_name }}`.
 
             Updated:
             - All `scripts/initializr/**/pom.xml` files containing `cn1.plugin.version`
             - `scripts/initializr/common/src/main/java/com/codename1/initializr/model/GeneratorModel.java`
             - `scripts/initializr/common/src/test/java/com/codename1/initializr/model/GeneratorModelMatrixTest.java`
-          branch: automation/initializr-cn1-version-${{ github.ref_name }}
+            - Embedded root `pom.xml` in `scripts/initializr/common/src/main/resources/common.zip`
+          branch: automation/initializr-cn1-version-${{ github.event.release.tag_name || github.ref_name }}
           delete-branch: true
           labels: |
             automation

.github/workflows/pr.yml

@@ -13,6 +13,7 @@ on:
       - '**/*.md'
       - '.github/workflows/developer-guide-docs.yml'
       - '.github/workflows/website-docs.yml'
+      - '.github/workflows/initializr-cn1-version-pr.yml'
       - 'CodenameOneDesigner/**'
       - 'Ports/IOSPort/**'
   push:
@@ -27,6 +28,7 @@ on:
       - '**/*.md'
       - '.github/workflows/developer-guide-docs.yml'
       - '.github/workflows/website-docs.yml'
+      - '.github/workflows/initializr-cn1-version-pr.yml'
       - 'CodenameOneDesigner/**'
       - 'Ports/IOSPort/**'
 

.github/workflows/website-docs.yml

@@ -5,12 +5,14 @@ on:
     types: [opened, synchronize, reopened, ready_for_review]
     paths:
       - 'docs/website/**'
+      - 'scripts/initializr/**'
       - 'scripts/website/**'
       - '.github/workflows/website-docs.yml'
   push:
     branches: [main, master]
     paths:
       - 'docs/website/**'
+      - 'scripts/initializr/**'
       - 'scripts/website/**'
       - '.github/workflows/website-docs.yml'
   workflow_dispatch:

docs/website/layouts/_default/initializr.html

@@ -20,12 +20,30 @@
 </section>
 
 <style>
+:root {
+  --cn1-initializr-bg: #eef3ff;
+  --cn1-initializr-loader-bg: #eef3ff;
+  --cn1-initializr-loader-text: #1d2638;
+  --cn1-initializr-loader-progress-bg: rgba(255, 255, 255, 0.72);
+  --cn1-initializr-loader-progress-border: rgba(49, 105, 230, 0.25);
+}
+
+body.dark,
+body.cn1-initializr-dark {
+  --cn1-initializr-bg: #0a111d;
+  --cn1-initializr-loader-bg: #0a111d;
+  --cn1-initializr-loader-text: #d8e4ff;
+  --cn1-initializr-loader-progress-bg: rgba(10, 18, 31, 0.86);
+  --cn1-initializr-loader-progress-border: rgba(84, 128, 221, 0.45);
+}
+
 .cn1-initializr-page {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  background: var(--cn1-initializr-bg);
 }
 
 .cn1-initializr-shell {
@@ -34,7 +52,7 @@
   overflow: hidden;
   border: 0;
   border-radius: 0;
-  background: transparent;
+  background: var(--cn1-initializr-bg);
   box-shadow: none;
 }
 
@@ -48,8 +66,9 @@
     z-index: 2;
     text-align: center;
     padding: 2rem;
-    color: #1d2638;
-    background:
+    color: var(--cn1-initializr-loader-text);
+    background-color: var(--cn1-initializr-loader-bg);
+    background-image:
       radial-gradient(1000px 420px at 20% 0%, rgba(99, 142, 255, 0.22), rgba(99, 142, 255, 0) 65%),
       radial-gradient(720px 360px at 100% 100%, rgba(60, 173, 216, 0.2), rgba(60, 173, 216, 0) 65%);
     transition: opacity 220ms ease-out, visibility 220ms ease-out;
@@ -60,8 +79,11 @@
     visibility: hidden;
   }
 
-  body.dark .cn1-initializr-loader {
-    color: #d8e4ff;
+  body.dark .cn1-initializr-loader,
+  body.cn1-initializr-dark .cn1-initializr-loader {
+    background-image:
+      radial-gradient(1000px 420px at 20% 0%, rgba(80, 120, 216, 0.26), rgba(80, 120, 216, 0) 65%),
+      radial-gradient(720px 360px at 100% 100%, rgba(52, 168, 196, 0.24), rgba(52, 168, 196, 0) 65%);
   }
 
   .cn1-initializr-loader .icon {
@@ -85,8 +107,8 @@
     height: 9px;
     border-radius: 999px;
     overflow: hidden;
-    border: 1px solid rgba(49, 105, 230, 0.25);
-    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid var(--cn1-initializr-loader-progress-border);
+    background: var(--cn1-initializr-loader-progress-bg);
   }
 
   .cn1-loader-progress-bar {
@@ -110,7 +132,7 @@
     width: 100%;
     height: 100%;
     border: 0;
-    background: transparent;
+    background: var(--cn1-initializr-bg);
   }
 
   @keyframes cn1-spin {
@@ -143,15 +165,51 @@
   var frame = document.getElementById("cn1-initializr-frame");
   var loader = document.getElementById("cn1-initializr-loader");
   var siteHeader = document.querySelector(".header");
+  var mediaQuery = window.matchMedia ? window.matchMedia("(prefers-color-scheme: dark)") : null;
 
   function syncHeight() {
     var h = siteHeader ? siteHeader.offsetHeight : 76;
     root.style.setProperty("--cn1-initializr-header-height", h + "px");
   }
 
+  function syncInitializrTheme() {
+    var pref = "";
+    var dark = false;
+    try {
+      pref = localStorage.getItem("pref-theme") || "";
+    } catch (e) {
+      pref = "";
+    }
+    if (pref === "dark") {
+      dark = true;
+    } else if (pref === "light") {
+      dark = false;
+    } else {
+      dark = body.classList.contains("dark") || !!(mediaQuery && mediaQuery.matches);
+    }
+    body.classList.toggle("cn1-initializr-dark", dark);
+  }
+
   body.classList.add("cn1-initializr-page-body");
   syncHeight();
+  syncInitializrTheme();
   window.addEventListener("resize", syncHeight);
+  document.addEventListener("click", function (evt) {
+    if (evt.target && evt.target.id === "theme-toggle") {
+      window.requestAnimationFrame(syncInitializrTheme);
+    }
+  });
+  if (mediaQuery && mediaQuery.addEventListener) {
+    mediaQuery.addEventListener("change", syncInitializrTheme);
+  } else if (mediaQuery && mediaQuery.addListener) {
+    mediaQuery.addListener(syncInitializrTheme);
+  }
+  if (window.MutationObserver) {
+    new MutationObserver(syncInitializrTheme).observe(body, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+  }
 
   if (frame && loader) {
     frame.addEventListener("load", function () {

scripts/initializr/android/src/main/java/com/codename1/initializr/WebsiteThemeNativeImpl.java

@@ -0,0 +1,12 @@
+package com.codename1.initializr;
+
+public class WebsiteThemeNativeImpl {
+    public boolean isDarkMode() {
+        return false;
+    }
+
+    public boolean isSupported() {
+        return false;
+    }
+
+}