Visual tweaks of Dark UI

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

View File

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

View File

@ -352,7 +352,7 @@ const char HTTP_HEAD_STYLE2[] PROGMEM =
".bred:hover{background:#%06x;}" // COLOR_BUTTON_RESET_HOVER
".bgrn{background:#%06x;}" // COLOR_BUTTON_SAVE
".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;}"
".q{float:right;text-align:right;}";
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_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_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));
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_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) {
// This uses char strings. Be aware of sending %% if % is needed
va_list arg;
@ -2578,10 +2581,10 @@ extern uint8_t tasm_cmd_activ;
bool JsonWebColor(const char* dataBuf)
{
// Default (light)
// {"WebColor":["#000000","#ffffff","#f2f2f2","#000000","#ffffff","#000000","#ffffff","#ff0000","#008000","#ffffff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#ffffff","#999999","#000000"]}
// Alternative (Dark)
// {"Webcolor":["#eeeeee","#181818","#4f4f4f","#000000","#dddddd","#6a9955","#1e1e1e","#ff0000","#008000","#ffffff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#ffffff","#999999","#eeeeee"]}
// Default (Dark theme)
// {"WebColor":["#eaeaea","#252525","#4f4f4f","#000","#ddd","#65c115","#1f1f1f","#ff5661","#008000","#faffff","#1fa3ec","#0e70a4","#d43535","#931f1f","#47c266","#5aaf6f","#faffff","#999","#eaeaea"]}
// Default pre v7 (Light theme)
// {"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];
LowerCase(dataBufLc, dataBuf);