From 41c75cc41e9c7353396e3be28a6d20850eeed566 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
<161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 22 Nov 2025 22:08:37 +0000
Subject: [PATCH] Implement setCustomCSS for custom CSS injection
This commit introduces `setCustomCSS` to the ESPUI class, allowing users to inject custom CSS into the web interface, analogous to `setCustomJS`.
Changes include:
- Added `setCustomCSS` method to `ESPUI.h` and `ESPUI.cpp`.
- Added `/css/custom.css` route handler in `ESPUI.begin`.
- Updated `src/dataIndexHTML.h` to include the link to `/css/custom.css` in both `HTML_INDEX` and `HTML_INDEX_GZIP`.
---
src/ESPUI.cpp | 21 +++++++++++++++++++++
src/ESPUI.h | 5 +++++
src/dataIndexHTML.h | 4 ++--
3 files changed, 28 insertions(+), 2 deletions(-)
diff --git a/src/ESPUI.cpp b/src/ESPUI.cpp
index 8f06276..a77d0b7 100644
--- a/src/ESPUI.cpp
+++ b/src/ESPUI.cpp
@@ -22,6 +22,11 @@
// js: JavaScript code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
static const char* customJS = nullptr;
+// Optional user-defined CSS to be included in the UI.
+// Served at /css/custom.css, which is automatically included in index.htm.
+// css: CSS code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
+static const char* customCSS = nullptr;
+
// Set custom JavaScript to be included in the UI.
// js: JavaScript code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
void ESPUIClass::setCustomJS(const char* js)
@@ -29,6 +34,13 @@ void ESPUIClass::setCustomJS(const char* js)
customJS = js;
}
+// Set custom CSS to be included in the UI.
+// css: CSS code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
+void ESPUIClass::setCustomCSS(const char* css)
+{
+ customCSS = css;
+}
+
static String heapInfo(const __FlashStringHelper* mode)
{
String result;
@@ -1293,6 +1305,15 @@ void ESPUIClass::begin(const char* _title, const char* username, const char* pas
request->send(200, "application/javascript", customJS ? customJS : "");
});
+ server->on("/css/custom.css", HTTP_GET, [](AsyncWebServerRequest* request) {
+ if (ESPUI.basicAuth && !request->authenticate(ESPUI.basicAuthUsername, ESPUI.basicAuthPassword))
+ {
+ return request->requestAuthentication();
+ }
+
+ request->send(200, "text/css", customCSS ? customCSS : "");
+ });
+
server->begin();
#if defined(DEBUG_ESPUI)
diff --git a/src/ESPUI.h b/src/ESPUI.h
index 970daa1..2905576 100644
--- a/src/ESPUI.h
+++ b/src/ESPUI.h
@@ -206,6 +206,11 @@ public:
// This is intentionally not a String to avoid dynamic memory allocation.
void setCustomJS(const char* js);
+ // Set optional user-defined CSS to be included in the UI.
+ // css: CSS code as a C-string. Must remain valid for the lifetime of the ESPUIClass instance.
+ // This is intentionally not a String to avoid dynamic memory allocation.
+ void setCustomCSS(const char* css);
+
// Variables
const char* ui_title = "ESPUI"; // Store UI Title and Header Name
Control* controls = nullptr;
diff --git a/src/dataIndexHTML.h b/src/dataIndexHTML.h
index df4c8f6..d7934e8 100644
--- a/src/dataIndexHTML.h
+++ b/src/dataIndexHTML.h
@@ -1,5 +1,5 @@
const char HTML_INDEX[] PROGMEM = R"=====(
- Control