jeans/Tasmota
jeans/Tasmota
1
0
Fork 0
mirror of https://github.com/arendst/Tasmota.git synced 2025-07-25 03:36:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Visual tweaks of Dark UI

Browse Source 
Visual tweaks of Dark UI (#6844)
This commit is contained in:
Theo Arends 2019-11-06 11:16:43 +01:00
parent ba5ae717dd
commit 8711ad00ad
2 changed files with 43 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
tasmota/my_user_config.h
View File

@ -135,8 +135,8 @@
// -- HTTP GUI Colors ----------------------------- // -- HTTP GUI Colors -----------------------------
// HTML hex color codes. Only 3 and 6 digit hex string values are supported!! See https://www.w3schools.com/colors/colors_hex.asp // HTML hex color codes. Only 3 and 6 digit hex string values are supported!! See https://www.w3schools.com/colors/colors_hex.asp
// Light theme // Light theme - pre v7
// webcolor {"webcolor":["#000","#fff","#f2f2f2","#000","#fff","#000","#fff"]} // WebColor {"WebColor":["#000","#fff","#f2f2f2","#000","#fff","#000","#fff","#f00","#008000","#fff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#fff","#999","#000"]}
/* /*
#define COLOR_TEXT "#000" // [WebColor1] Global text color - Black #define COLOR_TEXT "#000" // [WebColor1] Global text color - Black
#define COLOR_BACKGROUND "#fff" // [WebColor2] Global background color - White #define COLOR_BACKGROUND "#fff" // [WebColor2] Global background color - White
@ -145,30 +145,40 @@
#define COLOR_INPUT "#fff" // [WebColor5] Input background color - White #define COLOR_INPUT "#fff" // [WebColor5] Input background color - White
#define COLOR_CONSOLE_TEXT "#000" // [WebColor6] Console text color - Black #define COLOR_CONSOLE_TEXT "#000" // [WebColor6] Console text color - Black
#define COLOR_CONSOLE "#fff" // [WebColor7] Console background color - White #define COLOR_CONSOLE "#fff" // [WebColor7] Console background color - White
#define COLOR_TEXT_WARNING "#f00" // [WebColor8] Warning text color - Red
#define COLOR_TEXT_SUCCESS "#008000" // [WebColor9] Success text color - Dark lime green
#define COLOR_BUTTON_TEXT "#fff" // [WebColor10] Button text color - White
#define COLOR_BUTTON "#1fa3ec" // [WebColor11] Button color - Vivid blue
#define COLOR_BUTTON_HOVER "#0e70a4" // [WebColor12] Button color when hovered over - Dark blue
#define COLOR_BUTTON_RESET "#d43535" // [WebColor13] Restart/Reset/Delete button color - Strong red
#define COLOR_BUTTON_RESET_HOVER "#931f1f" // [WebColor14] Restart/Reset/Delete button color when hovered over - Dark red
#define COLOR_BUTTON_SAVE "#47c266" // [WebColor15] Save button color - Moderate lime green
#define COLOR_BUTTON_SAVE_HOVER "#5aaf6f" // [WebColor16] Save button color when hovered over - Dark moderate lime green
#define COLOR_TIMER_TAB_TEXT "#fff" // [WebColor17] Config timer tab text color - White
#define COLOR_TIMER_TAB_BACKGROUND "#999" // [WebColor18] Config timer tab background color - Dark gray
#define COLOR_TITLE_TEXT "#000" // [WebColor19] Title text color - Whiteish
*/ */
// Dark theme // Dark theme
// webcolor {"webcolor":["#eee","#181818","#4f4f4f","#000","#ddd","#6a9955","#1e1e1e"]} // WebColor {"WebColor":["#eaeaea","#252525","#4f4f4f","#000","#ddd","#65c115","#1f1f1f","#ff5661","#008000","#faffff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#faffff","#999","#eaeaea"]}
#define COLOR_TEXT "#eee" // [WebColor1] Global text color - Whiteish #define COLOR_TEXT "#eaeaea" // [WebColor1] Global text color - Very light gray
#define COLOR_BACKGROUND "#181818" // [WebColor2] Global background color - Blackish #define COLOR_BACKGROUND "#252525" // [WebColor2] Global background color - Very dark gray (mostly black)
#define COLOR_FORM "#4f4f4f" // [WebColor3] Form background color - Greyish #define COLOR_FORM "#4f4f4f" // [WebColor3] Form background color - Very dark gray
#define COLOR_INPUT_TEXT "#000" // [WebColor4] Input text color - Black #define COLOR_INPUT_TEXT "#000" // [WebColor4] Input text color - Black
#define COLOR_INPUT "#ddd" // [WebColor5] Input background color - Darker white #define COLOR_INPUT "#ddd" // [WebColor5] Input background color - Very light gray
#define COLOR_CONSOLE_TEXT "#6a9955" // [WebColor6] Console text color - Greenish #define COLOR_CONSOLE_TEXT "#65c115" // [WebColor6] Console text color - Strong Green
#define COLOR_CONSOLE "#1e1e1e" // [WebColor7] Console background color - Blackish #define COLOR_CONSOLE "#1f1f1f" // [WebColor7] Console background color - Very dark gray (mostly black)
#define COLOR_TEXT_WARNING "#ff5661" // [WebColor8] Warning text color - Brick Red
// Other colors #define COLOR_TEXT_SUCCESS "#008000" // [WebColor9] Success text color - Dark lime green
#define COLOR_TEXT_WARNING "#f00" // [WebColor8] Warning text color - Red #define COLOR_BUTTON_TEXT "#faffff" // [WebColor10] Button text color - Very pale (mostly white) cyan
#define COLOR_TEXT_SUCCESS "#008000" // [WebColor9] Success text color - Green #define COLOR_BUTTON "#1fa3ec" // [WebColor11] Button color - Vivid blue
#define COLOR_BUTTON_TEXT "#fff" // [WebColor10] Button text color - White #define COLOR_BUTTON_HOVER "#0e70a4" // [WebColor12] Button color when hovered over - Dark blue
#define COLOR_BUTTON "#1fa3ec" // [WebColor11] Button color - Blueish #define COLOR_BUTTON_RESET "#d43535" // [WebColor13] Restart/Reset/Delete button color - Strong red
#define COLOR_BUTTON_HOVER "#0e70a4" // [WebColor12] Button color when hovered over - Darker blueish #define COLOR_BUTTON_RESET_HOVER "#931f1f" // [WebColor14] Restart/Reset/Delete button color when hovered over - Dark red
#define COLOR_BUTTON_RESET "#d43535" // [WebColor13] Restart/Reset/Delete button color - Redish #define COLOR_BUTTON_SAVE "#47c266" // [WebColor15] Save button color - Moderate lime green
#define COLOR_BUTTON_RESET_HOVER "#931f1f" // [WebColor14] Restart/Reset/Delete button color when hovered over - Darker redish #define COLOR_BUTTON_SAVE_HOVER "#5aaf6f" // [WebColor16] Save button color when hovered over - Dark moderate lime green
#define COLOR_BUTTON_SAVE "#47c266" // [WebColor15] Save button color - Greenish #define COLOR_TIMER_TAB_TEXT "#faffff" // [WebColor17] Config timer tab text color - Very pale (mostly white) cyan.
#define COLOR_BUTTON_SAVE_HOVER "#5aaf6f" // [WebColor16] Save button color when hovered over - Darker greenish #define COLOR_TIMER_TAB_BACKGROUND "#999" // [WebColor18] Config timer tab background color - Dark gray
#define COLOR_TIMER_TAB_TEXT "#fff" // [WebColor17] Config timer tab text color - White #define COLOR_TITLE_TEXT "#eaeaea" // [WebColor19] Title text color - Very light gray
#define COLOR_TIMER_TAB_BACKGROUND "#999" // [WebColor18] Config timer tab background color - Light grey
#define COLOR_TITLE_TEXT COLOR_TEXT // [WebColor19] Title text color - Whiteish
// -- mDNS ---------------------------------------- // -- mDNS ----------------------------------------
#define MDNS_ENABLED 0 // [SetOption55] Use mDNS (0 = Disable, 1 = Enable) #define MDNS_ENABLED 0 // [SetOption55] Use mDNS (0 = Disable, 1 = Enable)

17
tasmota/xdrv_01_webserver.ino
View File

@ -352,7 +352,7 @@ const char HTTP_HEAD_STYLE2[] PROGMEM =
".bred:hover{background:#%06x;}" // COLOR_BUTTON_RESET_HOVER ".bred:hover{background:#%06x;}" // COLOR_BUTTON_RESET_HOVER
".bgrn{background:#%06x;}" // COLOR_BUTTON_SAVE ".bgrn{background:#%06x;}" // COLOR_BUTTON_SAVE
".bgrn:hover{background:#%06x;}" // COLOR_BUTTON_SAVE_HOVER ".bgrn:hover{background:#%06x;}" // COLOR_BUTTON_SAVE_HOVER
"a{text-decoration:none;}" "a{color:#%06x;text-decoration:none;}" // COLOR_BUTTON
".p{float:left;text-align:left;}" ".p{float:left;text-align:left;}"
".q{float:right;text-align:right;}"; ".q{float:right;text-align:right;}";
const char HTTP_HEAD_STYLE3[] PROGMEM = const char HTTP_HEAD_STYLE3[] PROGMEM =
@ -818,8 +818,11 @@ void WSContentSendStyle_P(const char* formatP, ...)
} }
WSContentSend_P(HTTP_HEAD_LAST_SCRIPT); WSContentSend_P(HTTP_HEAD_LAST_SCRIPT);
WSContentSend_P(HTTP_HEAD_STYLE1, WebColor(COL_FORM), WebColor(COL_INPUT), WebColor(COL_INPUT_TEXT), WebColor(COL_INPUT), WebColor(COL_INPUT_TEXT), WebColor(COL_CONSOLE), WebColor(COL_CONSOLE_TEXT), WebColor(COL_BACKGROUND)); WSContentSend_P(HTTP_HEAD_STYLE1, WebColor(COL_FORM), WebColor(COL_INPUT), WebColor(COL_INPUT_TEXT), WebColor(COL_INPUT),
WSContentSend_P(HTTP_HEAD_STYLE2, WebColor(COL_BUTTON), WebColor(COL_BUTTON_TEXT), WebColor(COL_BUTTON_HOVER), WebColor(COL_BUTTON_RESET), WebColor(COL_BUTTON_RESET_HOVER), WebColor(COL_BUTTON_SAVE), WebColor(COL_BUTTON_SAVE_HOVER)); WebColor(COL_INPUT_TEXT), WebColor(COL_CONSOLE), WebColor(COL_CONSOLE_TEXT), WebColor(COL_BACKGROUND));
WSContentSend_P(HTTP_HEAD_STYLE2, WebColor(COL_BUTTON), WebColor(COL_BUTTON_TEXT), WebColor(COL_BUTTON_HOVER),
WebColor(COL_BUTTON_RESET), WebColor(COL_BUTTON_RESET_HOVER), WebColor(COL_BUTTON_SAVE), WebColor(COL_BUTTON_SAVE_HOVER),
WebColor(COL_BUTTON));
if (formatP != nullptr) { if (formatP != nullptr) {
// This uses char strings. Be aware of sending %% if % is needed // This uses char strings. Be aware of sending %% if % is needed
va_list arg; va_list arg;
@ -2578,10 +2581,10 @@ extern uint8_t tasm_cmd_activ;
bool JsonWebColor(const char* dataBuf) bool JsonWebColor(const char* dataBuf)
{ {
// Default (light) // Default (Dark theme)
// {"WebColor":["#000000","#ffffff","#f2f2f2","#000000","#ffffff","#000000","#ffffff","#ff0000","#008000","#ffffff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#ffffff","#999999","#000000"]} // {"WebColor":["#eaeaea","#252525","#4f4f4f","#000","#ddd","#65c115","#1f1f1f","#ff5661","#008000","#faffff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#faffff","#999","#eaeaea"]}
// Alternative (Dark) // Default pre v7 (Light theme)
// {"Webcolor":["#eeeeee","#181818","#4f4f4f","#000000","#dddddd","#6a9955","#1e1e1e","#ff0000","#008000","#ffffff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#ffffff","#999999","#eeeeee"]} // {"WebColor":["#000","#fff","#f2f2f2","#000","#fff","#000","#fff","#f00","#008000","#fff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#fff","#999","#000"]} // {"WebColor":["#000000","#ffffff","#f2f2f2","#000000","#ffffff","#000000","#ffffff","#ff0000","#008000","#ffffff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#ffffff","#999999","#000000"]}
char dataBufLc[strlen(dataBuf) +1]; char dataBufLc[strlen(dataBuf) +1];
LowerCase(dataBufLc, dataBuf); LowerCase(dataBufLc, dataBuf);