Dark mode in the editor

Feature requested and implemented
Post Reply
User avatar
cicciocb
Site Admin
Posts: 2194
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 470 times
Been thanked: 1461 times
Contact:

Dark mode in the editor

Post by 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. :D
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;
}
You do not have the required permissions to view the files attached to this post.
BeanieBots
Posts: 361
Joined: Tue Jun 21, 2022 2:17 pm
Location: South coast UK
Has thanked: 197 times
Been thanked: 115 times

Re: Dark mode in the editor

Post by BeanieBots »

A great addition. Especially for the visually challenged like myself.
Tony_A
Posts: 16
Joined: Sun Dec 31, 2023 8:08 am
Has thanked: 7 times
Been thanked: 5 times

Re: Dark mode in the editor

Post by Tony_A »

Great, Much appreciated.
User avatar
cicciocb
Site Admin
Posts: 2194
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 470 times
Been thanked: 1461 times
Contact:

Re: Dark mode in the editor

Post by 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
You do not have the required permissions to view the files attached to this post.
sebohere
Posts: 4
Joined: Mon Mar 15, 2021 2:50 pm

Re: Dark mode in the editor

Post by sebohere »

Hello. Is dark mode possible either for Annex WiFi RDS (ESP8266)? Can be the mentioned css file with possible modification, added in root (file manager), enough for changing to dark mode ? Thanks, regards, Sebastijan.
Post Reply