Dark mode in the editor

[cicciocb]

Hi all,
following the recent requests I received to implement a "Dark Mode" on the Annex32 editor, I played around a bit to find a simple way for any user to customize the colors according to their own taste.

This is a screen shot showing the level of customisation possible .... all is done inside a single .css file.

image.png

If you are interested, I've just uploaded another version for the ESP32, the 1.52.7.
By default the editor page works as before but now can be fully customised.
You just need to upload a single annex32.css file into the root of the disk.
You can freely modify the content of this file and experiment directly on the module.

I've just prepared a default "DARK mode" annex32.css file that you can find below

annex32.css

All the settings are commented so it should not be hard to modify as per your taste.

Please try it and let me know.

p.s.
This is the content of the .css file

Code: [Local Link Removed for Guests]

/* ============ Setting specific for the text editor area =============*/
/* ====================================================================*/
.editAreaButtonNormal {
  border-color: transparent !important;  /* color of the border around the buttons */
}

#progress {
  background-color:#333; /* background color of the save progress bar*/
}
.area_toolbar {
  background-color:#333; /* background color icons toolbar*/
}

.statusbar td {
  background-color:#333;  /* colors of the status bar*/
  color:cyan;
}

#editor{
  background-color: #000; /* background color of the editor area*/
}

#container {
  color:white;  /* color of the text when syntax highlight is off*/
}

#content_highlight{
  color:#ccc;  /* color of the text when syntax highlight is active*/
}

#selection_field{
  background-color: #404040c0; /* background color of the line selected*/
} 

#line_number{ 
  border-right: solid white 1px;  /* Line numbers area border */
  color: green;  /* Line numbers color*/
}

textarea::selection {
  background: #30909090; /* background color text selected*/
}

#result .edit_area_highlight{
  background-color: gold;  /* color of the blinking cursor */
}


/* ================== Setting for the whole page ======================*/
/* ====================================================================*/
body, html{
  background-color: #222; /* background color of the page */
}

.topnav {
  background-color: #222; /* color of top buttons bar */
}

.box1 label {
  color:#80ff80; /*text color of the version label */
  background-color: black !important; /*background color of the version label */
  border-radius: 10px; /* Adjust the value to change the roundness */
}

.box1,
.box2,
.box5 td,
.box6 td
{
  color:#aaa; /* default color of the text */
}

.box1 input,
.box4 textarea,
.box5 textarea,
.box6 textarea
{
  color:cyan; /*color of all the text boxes */
  background-color: #222; /*background color of all the text boxes */
}

/* ------ Style the scrollbar --------- */
::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of the thumb */
  border-radius: 6px; /* Rounded corners of the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Color of the thumb on hover */
}

::-webkit-scrollbar-corner {
  background-color: #000; /* Color of the corner */
}

/* ---------- Define colors for the "BASIC" syntax ------- */
#_config_ {
  --basic-COMMENTS-color: #99CC00;
  --basic-QUOTESMARKS-color: #ffaa00;
  --basic-KEYWORDS-statements-color: #8866FF;
  --basic-KEYWORDS-commands-color: #0040FF;
  --basic-KEYWORDS-functions-color: #FF00FF;
  --basic-KEYWORDS-strings-color: #FF5500;
  --basic-KEYWORDS-operators-color: #FF0000;
  --basic-OPERATORS-color: #99CC00;
  --basic-DELIMITERS-color: #2266FF;
}

[BeanieBots]

A great addition. Especially for the visually challenged like myself.

[Tony_A]

Great, Much appreciated.

[cicciocb]

I fixed the "normal" working without the file annex32.css (download again the version 1.52.7).

I remember the following :

Without any annex32.css file present in the module, the editor work as before.
With a file annex32.css present in the module (see the file manager image below), the editor follows the settings defined inside this file.

The files attached in the previous post is configured for dark mode but you can change any color as per your own tastes.

image.png