Merge pull request #4242 from tonhuisman/feature/UI-enable-disable-auto-dark-mode

[UI] Make auto-dark mode optional

docs/source/Tools/Tools.rst

@@ -407,6 +407,15 @@ This should best only be enabled if the configuration, and other files like rule
 
 NB: If the OTA update is bigger than available flash + file-system size, the OTA update will fail, but as the file-system is already overwritten, any configuration and files are overwritten irreversibly!
 
+Enable Web auto-dark mode
+^^^^^^^^^^^^^^^^^^^^^^^^^
+
+Added: 2022-09-03
+
+When using Dark-mode as an Operating System or Web-browser setting, the ESPEasy Web interface defaults to using a Dark theme as well. For those that prefer to use non-dark mode, this can be disabled.
+
+NB: If this option is not available, the Dark-mode code is *not* included in the build, and non-dark mode will be used.
+
 Deep Sleep Alternative
 ^^^^^^^^^^^^^^^^^^^^^^
 

embed_files.sh

@@ -54,7 +54,7 @@ function ascii2hexCstyle {
 	file_name=$(constFileName $1)
 	result=$(cat /tmp/converter.temp | hexdump -ve '1/1 "0x%.2x,"')
 	result=$(echo $result | sed 's/,$//')
-	echo "const char DATA_${file_name}[] PROGMEM = {$result,0};"
+	echo "static const char DATA_${file_name}[] PROGMEM = {$result,0};"
 	echo
 	echo
 }

src/Custom-sample.h

@@ -260,6 +260,7 @@
 
 #define SETUP_PAGE_SHOW_CONFIG_BUTTON    true
 
+// #define FEATURE_AUTO_DARK_MODE           0 // Disable auto-dark mode
 
 //#define WEBPAGE_TEMPLATE_HIDE_HELP_BUTTON
 

src/src/CustomBuild/define_plugin_sets.h

@@ -2258,4 +2258,12 @@ To create/register a plugin, you have to :
 #endif
 
 
+#ifndef FEATURE_AUTO_DARK_MODE
+  // #ifdef LIMIT_BUILD_SIZE
+  //   #define FEATURE_AUTO_DARK_MODE            0
+  // #else
+    #define FEATURE_AUTO_DARK_MODE            1
+  // #endif
+#endif
+
 #endif // CUSTOMBUILD_DEFINE_PLUGIN_SETS_H

src/src/DataStructs/SettingsStruct.h

@@ -164,6 +164,11 @@ class SettingsStruct_tmpl
   bool AllowTaskValueSetAllPlugins() const;
   void AllowTaskValueSetAllPlugins(bool value);
 
+  #if FEATURE_AUTO_DARK_MODE
+  bool EnableAutomaticDarkMode() const;
+  void EnableAutomaticDarkMode(bool value);
+  #endif // FEATURE_AUTO_DARK_MODE
+
 
   void validate();
 

src/src/DataStructs_templ/SettingsStruct.cpp

@@ -317,6 +317,18 @@ void SettingsStruct_tmpl<N_TASKS>::SendToHTTP_follow_redirects(bool value) {
   bitWrite(VariousBits1, 27, value);
 }
 
+#if FEATURE_AUTO_DARK_MODE
+template<unsigned int N_TASKS>
+bool SettingsStruct_tmpl<N_TASKS>::EnableAutomaticDarkMode() const {
+  return !bitRead(VariousBits1, 28);
+}
+
+template<unsigned int N_TASKS>
+void SettingsStruct_tmpl<N_TASKS>::EnableAutomaticDarkMode(bool value) {
+  bitWrite(VariousBits1, 28, !value);
+}
+#endif // FEATURE_AUTO_DARK_MODE
+
 template<unsigned int N_TASKS>
 ExtTimeSource_e SettingsStruct_tmpl<N_TASKS>::ExtTimeSource() const {
   return static_cast<ExtTimeSource_e>(ExternalTimeSource >> 1);

src/src/Helpers/StringProvider.cpp

@@ -100,6 +100,9 @@ const __FlashStringHelper * getLabel(LabelType::Enum label) {
 #ifndef BUILD_NO_RAM_TRACKER
     case LabelType::ENABLE_RAM_TRACKING:    return F("Enable RAM Tracker");
 #endif
+#if FEATURE_AUTO_DARK_MODE
+    case LabelType::ENABLE_AUTO_DARK_MODE:  return F("Enable Web auto-dark mode");
+#endif // FEATURE_AUTO_DARK_MODE
 
     case LabelType::BOOT_TYPE:              return F("Last Boot Cause");
     case LabelType::BOOT_COUNT:             return F("Boot Count");
@@ -301,6 +304,9 @@ String getValue(LabelType::Enum label) {
 #ifndef BUILD_NO_RAM_TRACKER
     case LabelType::ENABLE_RAM_TRACKING:        return jsonBool(Settings.EnableRAMTracking());
 #endif
+#if FEATURE_AUTO_DARK_MODE
+    case LabelType::ENABLE_AUTO_DARK_MODE:      return jsonBool(Settings.EnableAutomaticDarkMode());
+#endif // FEATURE_AUTO_DARK_MODE
 
 
     case LabelType::BOOT_TYPE:              return getLastBootCauseString();

src/src/Helpers/StringProvider.h

@@ -62,6 +62,9 @@ struct LabelType {
 #ifndef BUILD_NO_RAM_TRACKER
     ENABLE_RAM_TRACKING,
 #endif
+#if FEATURE_AUTO_DARK_MODE
+    ENABLE_AUTO_DARK_MODE,
+#endif
 
     BOOT_TYPE,               // Cold boot
     BOOT_COUNT,              // 0

src/src/Static/WebStaticData.cpp

@@ -1,6 +1,7 @@
 #include "../Static/WebStaticData.h"
 
 #include "../CustomBuild/CompiletimeDefines.h"
+#include "../Globals/Settings.h"
 #include "../Globals/Cache.h"
 #include "../Helpers/ESPEasy_Storage.h"
 #include "../WebServer/HTML_wrappers.h"
@@ -43,6 +44,11 @@ void serve_CSS() {
   #ifndef WEBSERVER_CSS
 //  serve_CDN_CSS(F("espeasy_default.min.css"));
   serve_CDN_CSS(F("esp_auto.min.css"));
+  #if FEATURE_AUTO_DARK_MODE
+  if (Settings.EnableAutomaticDarkMode()) {
+    serve_CDN_CSS(F("esp_auto_dark.min.css"));
+  }
+  #endif
   #else
   addHtml(F("<style>"));
 
@@ -51,7 +57,12 @@ void serve_CSS() {
   TXBuffer.addFlashString((PGM_P)FPSTR(DATA_ESPEASY_DEFAULT_MIN_CSS));
   #else
     #ifdef EMBED_ESPEASY_AUTO_MIN_CSS
-    TXBuffer.addFlashString((PGM_P)FPSTR(DATA_ESPEASY_AUTO_MIN_CSS));
+    TXBuffer.addFlashString((PGM_P)FPSTR(DATA_ESP_AUTO_MIN_CSS));
+    #if FEATURE_AUTO_DARK_MODE
+    if (Settings.EnableAutomaticDarkMode()) {
+      TXBuffer.addFlashString((PGM_P)FPSTR(DATA_ESP_AUTO_DARK_MIN_CSS));
+    }
+    #endif
     #endif
   #endif
   addHtml(F("</style>"));

src/src/WebServer/AdvancedConfigPage.cpp

@@ -118,7 +118,12 @@ void handle_advanced() {
     Settings.EnableRulesCaching(isFormItemChecked(LabelType::ENABLE_RULES_CACHING));
 //    Settings.EnableRulesEventReorder(isFormItemChecked(LabelType::ENABLE_RULES_EVENT_REORDER)); // TD-er: Disabled for now
 
+#ifndef NO_HTTP_UPDATER
     Settings.AllowOTAUnlimited(isFormItemChecked(LabelType::ALLOW_OTA_UNLIMITED));
+#endif // NO_HTTP_UPDATER
+#if FEATURE_AUTO_DARK_MODE
+    Settings.EnableAutomaticDarkMode(isFormItemChecked(LabelType::ENABLE_AUTO_DARK_MODE));
+#endif // FEATURE_AUTO_DARK_MODE
 
     addHtmlError(SaveSettings());
 
@@ -246,6 +251,9 @@ void handle_advanced() {
   addFormNote(F("When enabled, OTA updating can overwrite the filesystem and settings!"));
   addFormNote(F("Requires reboot to activate"));
   # endif // ifndef NO_HTTP_UPDATER
+  #if FEATURE_AUTO_DARK_MODE
+  addFormCheckBox(LabelType::ENABLE_AUTO_DARK_MODE, Settings.EnableAutomaticDarkMode());
+  #endif // FEATURE_AUTO_DARK_MODE
 
   #ifdef ESP8266
   addFormCheckBox(LabelType::DEEP_SLEEP_ALTERNATIVE_CALL, Settings.UseAlternativeDeepSleep());

static/esp_auto.css

@@ -499,108 +499,3 @@ footer {
 		user-select: none
 	}
 }
-
-@media (prefers-color-scheme:dark) {
-
-	input,
-	select {
-		background-color: #444
-	}
-
-	h3 {
-		background-color: #2e2e2e
-	}
-
-	.dotmark {
-		background-color: #eee
-	}
-
-	.container2 .dotmark:after {
-		background: #fff
-	}
-
-	#toastmessage {
-		background-color: #00000085;
-		color: #fff
-	}
-
-	.multirow th,
-	.normal th {
-		background-color: #444;
-		border-color: #545454;
-		color: #dfdfdf
-	}
-
-	.multirow td {
-		border-color: #545454
-	}
-
-	.multirow tr:nth-child(odd) {
-		background-color: #2a2c2e
-	}
-
-	.highlight td {
-		background-color: #553044
-	}
-
-	.note {
-		color: #7b7b7b
-	}
-
-	.menu {
-		background-color: transparent;
-		color: #fff
-	}
-
-	.menu.active {
-		background-color: #222;
-		border-color: transparent;
-		color: #fff
-	}
-
-	.menu:hover {
-		background: #00000030;
-		color: #fff
-	}
-
-	.div_r {
-		background-color: #30553d
-	}
-
-	.alert,
-	.warning {
-		color: #fff
-	}
-
-	.closebtn:hover {
-		color: #000
-	}
-
-	.apheader,
-	.bodymenu,
-	.checkmark,
-	.multirow tr,
-	.normal td,
-	.normal tr,
-	tbody,
-	textarea {
-		background-color: #222
-	}
-
-	*,
-	.closebtn,
-	.div_r,
-	.textarea,
-	h1,
-	h6,
-	.wide,
-	textarea {
-		color: #c3c3c3
-	}
-
-	.button,
-	.container input:checked~.checkmark,
-	.headermenu {
-		background-color: #44607a
-	}
-}

static/esp_auto_dark.css

@@ -0,0 +1,104 @@
+@media (prefers-color-scheme:dark) {
+
+	input,
+	select {
+		background-color: #444
+	}
+
+	h3 {
+		background-color: #2e2e2e
+	}
+
+	.dotmark {
+		background-color: #eee
+	}
+
+	.container2 .dotmark:after {
+		background: #fff
+	}
+
+	#toastmessage {
+		background-color: #00000085;
+		color: #fff
+	}
+
+	.multirow th,
+	.normal th {
+		background-color: #444;
+		border-color: #545454;
+		color: #dfdfdf
+	}
+
+	.multirow td {
+		border-color: #545454
+	}
+
+	.multirow tr:nth-child(odd) {
+		background-color: #2a2c2e
+	}
+
+	.highlight td {
+		background-color: #553044
+	}
+
+	.note {
+		color: #7b7b7b
+	}
+
+	.menu {
+		background-color: transparent;
+		color: #fff
+	}
+
+	.menu.active {
+		background-color: #222;
+		border-color: transparent;
+		color: #fff
+	}
+
+	.menu:hover {
+		background: #00000030;
+		color: #fff
+	}
+
+	.div_r {
+		background-color: #30553d
+	}
+
+	.alert,
+	.warning {
+		color: #fff
+	}
+
+	.closebtn:hover {
+		color: #000
+	}
+
+	.apheader,
+	.bodymenu,
+	.checkmark,
+	.multirow tr,
+	.normal td,
+	.normal tr,
+	tbody,
+	textarea {
+		background-color: #222
+	}
+
+	*,
+	.closebtn,
+	.div_r,
+	.textarea,
+	h1,
+	h6,
+	.wide,
+	textarea {
+		color: #c3c3c3
+	}
+
+	.button,
+	.container input:checked~.checkmark,
+	.headermenu {
+		background-color: #44607a
+	}
+}

static/esp_auto_dark.min.css

@@ -0,0 +1 @@
+@media (prefers-color-scheme:dark){input,select{background-color:#444}h3{background-color:#2e2e2e}.dotmark{background-color:#eee}.container2 .dotmark:after{background:#fff}#toastmessage{background-color:#00000085;color:#fff}.multirow th,.normal th{background-color:#444;border-color:#545454;color:#dfdfdf}.multirow td{border-color:#545454}.multirow tr:nth-child(odd){background-color:#2a2c2e}.highlight td{background-color:#553044}.note{color:#7b7b7b}.alert,.menu,.menu:hover,.warning{color:#fff}.menu{background-color:transparent}.menu.active{background-color:#222;border-color:transparent;color:#fff}.menu:hover{background:#00000030}.div_r{background-color:#30553d}.closebtn:hover{color:#000}.apheader,.bodymenu,.checkmark,.multirow tr,.normal td,.normal tr,tbody,textarea{background-color:#222}*,.closebtn,.div_r,.textarea,.wide,h1,h6,textarea{color:#c3c3c3}.button,.container input:checked~.checkmark,.headermenu{background-color:#44607a}}