[PATCH] Dark theme for downloads.dpi
Hi list, Here is a patch which provides a dark theme for downloads.dpi. Screenshot is attached. Maybe something like this could be a part of a future 'dark mode' option for Dillo. Feedback welcome! Regards, Alex --- a/dpi/downloads.cc Sun Aug 11 22:21:59 2024 +++ b/dpi/downloads.cc Wed Aug 21 13:13:41 2024 @@ -240,7 +240,7 @@ ProgressBar::ProgressBar(int x, int y, int w, int h, c mShowPct = true; mShowMsg = false; box(FL_THIN_UP_BOX); - color(FL_WHITE); + color(FL_YELLOW); } void ProgressBar::draw() @@ -259,16 +259,16 @@ void ProgressBar::draw() double pct = (mPresent - mMin) / mMax; r.w = r.w * pct + .5; - fl_rectf(r.x, r.y, r.w, r.h, FL_BLUE); + fl_rectf(r.x, r.y, r.w, r.h, FL_WHITE); if (mShowMsg) { - fl_color(FL_RED); + fl_color(FL_BLACK); fl_font(this->labelfont(), this->labelsize()); fl_draw(mMsg, x(), y(), w(), h(), FL_ALIGN_CENTER); } else if (mShowPct) { char buffer[30]; sprintf(buffer, "%d%%", int (pct * 100 + .5)); - fl_color(FL_RED); + fl_color(FL_BLACK); fl_font(this->labelfont(), this->labelsize()); fl_draw(buffer, x(), y(), w(), h(), FL_ALIGN_CENTER); } @@ -345,12 +345,14 @@ DLItem::DLItem(const char *full_filename, const char * WidgetDone = 0; WgetStatus = -1; - gw = 400, gh = 70; + gw = 420, gh = 85; group = new Fl_Group(0,0,gw,gh); group->begin(); + group->color(FL_BLACK); prTitle = new Fl_Box(24, 7, 290, 23); prTitle->box(FL_RSHADOW_BOX); - prTitle->color(FL_WHITE); + prTitle->color(FL_BLACK); + prTitle->labelcolor(FL_WHITE); prTitle->align(FL_ALIGN_LEFT|FL_ALIGN_INSIDE|FL_ALIGN_CLIP); prTitle->copy_label(shortname); // Attach this 'log_text' to the tooltip @@ -370,7 +372,7 @@ DLItem::DLItem(const char *full_filename, const char * o->tooltip("Downloaded Size"); prGot = new Fl_Box(ix,iy+14,iw,ih, "0KB"); prGot->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); - prGot->labelcolor(FL_BLUE); + prGot->labelcolor(FL_YELLOW); prGot->labelsize(12); prGot->box(FL_NO_BOX); @@ -382,6 +384,7 @@ DLItem::DLItem(const char *full_filename, const char * o->tooltip("Total Size"); prSize = new Fl_Box(ix,iy+14,iw,ih, "??"); prSize->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); + prSize->labelcolor(FL_DARK2); prSize->labelsize(12); prSize->box(FL_NO_BOX); @@ -393,6 +396,7 @@ DLItem::DLItem(const char *full_filename, const char * o->tooltip("Current transfer Rate (KBytes/sec)"); prRate = new Fl_Box(ix,iy+14,iw,ih, "??"); prRate->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); + prRate->labelcolor(FL_DARK2); prRate->labelsize(12); prRate->box(FL_NO_BOX); @@ -404,6 +408,7 @@ DLItem::DLItem(const char *full_filename, const char * o->tooltip("Average transfer Rate (KBytes/sec)"); pr_Rate = new Fl_Box(ix,iy+14,iw,ih, "??"); pr_Rate->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); + pr_Rate->labelcolor(FL_DARK2); pr_Rate->labelsize(12); pr_Rate->box(FL_NO_BOX); @@ -415,16 +420,19 @@ DLItem::DLItem(const char *full_filename, const char * o->tooltip("Estimated Time of Arrival"); prETA = new Fl_Box(ix,iy+14,iw,ih, "??"); prETA->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); + prETA->labelcolor(FL_DARK2); prETA->labelsize(12); prETA->box(FL_NO_BOX); prButton = new Fl_Button(326, 9, 44, 19, "Stop"); prButton->tooltip("Stop this transfer"); prButton->box(FL_UP_BOX); + prButton->color(FL_DARK2); + prButton->labelcolor(FL_BLACK); prButton->clear_visible_focus(); prButton->callback(prButton_scb, this); - group->box(FL_ROUNDED_BOX); + group->box(FL_THIN_UP_BOX); group->end(); } @@ -1056,9 +1064,9 @@ DLWin::DLWin(int ww, int wh) { mScroll->resizable(mPG); mWin->end(); mWin->resizable(mScroll); - mWin->callback(dlwin_esc_cb, NULL); + mWin->callback(dlwin_esc_cb, NULL); mWin->show(); - + // Set SIGCHLD handlers sigemptyset(&mask_sigchld); sigaddset(&mask_sigchld, SIGCHLD);
Hi, Here is a ligher and slightly more modern looking dark theme for downloads.dpi. Enjoy, Alex --- a/dpi/downloads.cc Sun Aug 11 22:21:59 2024 +++ b/dpi/downloads.cc Wed Aug 21 18:06:03 2024 @@ -240,7 +240,7 @@ ProgressBar::ProgressBar(int x, int y, int w, int h, c mShowPct = true; mShowMsg = false; box(FL_THIN_UP_BOX); - color(FL_WHITE); + color(FL_DARK_CYAN); } void ProgressBar::draw() @@ -259,16 +259,16 @@ void ProgressBar::draw() double pct = (mPresent - mMin) / mMax; r.w = r.w * pct + .5; - fl_rectf(r.x, r.y, r.w, r.h, FL_BLUE); + fl_rectf(r.x, r.y, r.w, r.h, FL_WHITE); if (mShowMsg) { - fl_color(FL_RED); + fl_color(FL_BLACK); fl_font(this->labelfont(), this->labelsize()); fl_draw(mMsg, x(), y(), w(), h(), FL_ALIGN_CENTER); } else if (mShowPct) { char buffer[30]; sprintf(buffer, "%d%%", int (pct * 100 + .5)); - fl_color(FL_RED); + fl_color(FL_BLACK); fl_font(this->labelfont(), this->labelsize()); fl_draw(buffer, x(), y(), w(), h(), FL_ALIGN_CENTER); } @@ -345,12 +345,14 @@ DLItem::DLItem(const char *full_filename, const char * WidgetDone = 0; WgetStatus = -1; - gw = 400, gh = 70; + gw = 420, gh = 85; group = new Fl_Group(0,0,gw,gh); group->begin(); + group->color(FL_DARK3); prTitle = new Fl_Box(24, 7, 290, 23); - prTitle->box(FL_RSHADOW_BOX); - prTitle->color(FL_WHITE); + prTitle->box(FL_THIN_UP_BOX); + prTitle->color(FL_BLACK); + prTitle->labelcolor(FL_WHITE); prTitle->align(FL_ALIGN_LEFT|FL_ALIGN_INSIDE|FL_ALIGN_CLIP); prTitle->copy_label(shortname); // Attach this 'log_text' to the tooltip @@ -364,67 +366,78 @@ DLItem::DLItem(const char *full_filename, const char * int ix = 122, iy = 37, iw = 50, ih = 14; Fl_Widget *o = new Fl_Box(ix,iy,iw,ih, "Got"); - o->box(FL_RFLAT_BOX); - o->color(FL_DARK2); + o->box(FL_THIN_UP_BOX); + o->color(FL_BLACK); + o->labelcolor(FL_WHITE); o->labelsize(12); o->tooltip("Downloaded Size"); prGot = new Fl_Box(ix,iy+14,iw,ih, "0KB"); prGot->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); - prGot->labelcolor(FL_BLUE); + prGot->labelcolor(FL_WHITE); prGot->labelsize(12); prGot->box(FL_NO_BOX); ix += iw; o = new Fl_Box(ix,iy,iw,ih, "Size"); - o->box(FL_RFLAT_BOX); - o->color(FL_DARK2); + o->box(FL_THIN_UP_BOX); + o->color(FL_BLACK); + o->labelcolor(FL_WHITE); o->labelsize(12); o->tooltip("Total Size"); prSize = new Fl_Box(ix,iy+14,iw,ih, "??"); prSize->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); + prSize->labelcolor(FL_WHITE); prSize->labelsize(12); prSize->box(FL_NO_BOX); ix += iw; o = new Fl_Box(ix,iy,iw,ih, "Rate"); - o->box(FL_RFLAT_BOX); - o->color(FL_DARK2); + o->box(FL_THIN_UP_BOX); + o->color(FL_BLACK); + o->labelcolor(FL_WHITE); o->labelsize(12); o->tooltip("Current transfer Rate (KBytes/sec)"); prRate = new Fl_Box(ix,iy+14,iw,ih, "??"); prRate->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); + prRate->labelcolor(FL_WHITE); prRate->labelsize(12); prRate->box(FL_NO_BOX); ix += iw; o = new Fl_Box(ix,iy,iw,ih, "~Rate"); - o->box(FL_RFLAT_BOX); - o->color(FL_DARK2); + o->box(FL_THIN_UP_BOX); + o->color(FL_BLACK); + o->labelcolor(FL_WHITE); o->labelsize(12); o->tooltip("Average transfer Rate (KBytes/sec)"); pr_Rate = new Fl_Box(ix,iy+14,iw,ih, "??"); pr_Rate->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); + pr_Rate->labelcolor(FL_WHITE); pr_Rate->labelsize(12); pr_Rate->box(FL_NO_BOX); ix += iw; prETAt = o = new Fl_Box(ix,iy,iw,ih, "ETA"); - o->box(FL_RFLAT_BOX); - o->color(FL_DARK2); + o->box(FL_THIN_UP_BOX); + o->color(FL_BLACK); + o->labelcolor(FL_WHITE); o->labelsize(12); o->tooltip("Estimated Time of Arrival"); prETA = new Fl_Box(ix,iy+14,iw,ih, "??"); prETA->align(FL_ALIGN_CENTER|FL_ALIGN_INSIDE); + prETA->labelcolor(FL_WHITE); prETA->labelsize(12); prETA->box(FL_NO_BOX); prButton = new Fl_Button(326, 9, 44, 19, "Stop"); prButton->tooltip("Stop this transfer"); - prButton->box(FL_UP_BOX); + prButton->box(FL_THIN_UP_BOX); + prButton->color(FL_DARK2); + prButton->labelcolor(FL_BLACK); prButton->clear_visible_focus(); prButton->callback(prButton_scb, this); - group->box(FL_ROUNDED_BOX); + group->box(FL_THIN_UP_BOX); group->end(); }
On Wed, Aug 21, 2024 at 06:16:01PM +0200, a1ex@dismail.de wrote:
Hi,
Here is a ligher and slightly more modern looking dark theme for downloads.dpi.
Very nice! I'm wondering if we could add a mechanism to define themes without having to rebuild Dillo. It would be nice to define some CSS-like styles that define the Dillo interface colors and button styles too, and be able to switch among them at runtime. As we already have the CSS parser, we could just use CSS rules that apply to classes. Example: Fl_Widget *o = new Fl_Box(ix,iy,iw,ih, "Got"); o->box(FL_THIN_UP_BOX); o->color(FL_BLACK); o->labelcolor(FL_WHITE); .downloads { color: "white"; /* Use white text by default */ } .downloads.got-header { border-style: thin-up-box; /* custom */ background: "black"; /* Inherits white text */ } I wanted to have at least a light and dark theme, so I can easily switch from one to another quickly, probably with a single button like the dark reader extension for Firefox: https://darkreader.org/ See this issue too: https://github.com/dillo-browser/dillo/issues/247 Here are some FLTK themes in Rust which also change the FLTK color map: https://github.com/fltk-rs/fltk-theme/tree/main Best, Rodrigo.
Hi Rodrigo, On Fri, 23 Aug 2024 01:12:38 +0200 Rodrigo Arias <rodarima@gmail.com> wrote:
I'm wondering if we could add a mechanism to define themes without having to rebuild Dillo.
It would be nice to define some CSS-like styles that define the Dillo interface colors and button styles too, and be able to switch among them at runtime. As we already have the CSS parser, we could just use CSS rules that apply to classes. ... I wanted to have at least a light and dark theme, so I can easily switch from one to another quickly, probably with a single button like the dark reader extension for Firefox:
That would be great. Maybe we could just have 2 separate theme css files for light and dark mode, for example 'light.css' and 'dark.css' in ~/.dillo might be easiest. How do you envision this will work with the existing 'ui_*_color' prefs in dillorc? Would we just override those if theming is enabled, or should we get rid of them entirely and have everything controlled by the theme?
Here are some FLTK themes in Rust which also change the FLTK color map:
Thanks, there are some nice looking themes there, and might be a good source for ideas. I also found this, which is written in C++, but targets FLTK 1.4: https://github.com/MoAlyousef/Fl_Theme Regards, Alex
Hi, On Sat, Aug 24, 2024 at 02:15:13PM +0200, a1ex@dismail.de wrote:
That would be great. Maybe we could just have 2 separate theme css files for light and dark mode, for example 'light.css' and 'dark.css' in ~/.dillo might be easiest.
I think I would place them under ~/.dillo/theme/ so we can select which one you want from the menu, based on the name you put to the .css file.
How do you envision this will work with the existing 'ui_*_color' prefs in dillorc? Would we just override those if theming is enabled, or should we get rid of them entirely and have everything controlled by the theme?
It would be nice to keep it working for some time, so users can slowly update to CSS themes. Maybe we can just auto-generate a legacy.css theme with the dillorc options. I'm also thinking we may want to also include the icons, so we avoid the problem of having a single icon that must support dark and light backgrounds. In this case, maybe a layout like this may be more useful: ~/.dillo/theme/<name>/style.css ~/.dillo/theme/<name>/icons.png Which also makes it easy to install new themes by just cloning a remote git repository. Best, Rodrigo.
Hi, On Sat, 24 Aug 2024 15:39:01 +0200 Rodrigo Arias <rodarima@gmail.com> wrote:
I'm also thinking we may want to also include the icons, so we avoid the problem of having a single icon that must support dark and light backgrounds. In this case, maybe a layout like this may be more useful:
~/.dillo/theme/<name>/style.css ~/.dillo/theme/<name>/icons.png
I agree that themed icons would be very nice, so your layout here makes sense. Might be a bit of work to get Dillo to use icons.png instead of the built-in pixmaps.h though :) Anyway, it sounds like this will be a pretty complicated patch. Not sure where I can help, but can try if desired on smaller parts. -Alex
Hi, On Sat, Aug 24, 2024 at 06:40:33PM +0200, a1ex@dismail.de wrote:
Hi,
On Sat, 24 Aug 2024 15:39:01 +0200 Rodrigo Arias <rodarima@gmail.com> wrote:
I'm also thinking we may want to also include the icons, so we avoid the problem of having a single icon that must support dark and light backgrounds. In this case, maybe a layout like this may be more useful:
~/.dillo/theme/<name>/style.css ~/.dillo/theme/<name>/icons.png
I agree that themed icons would be very nice, so your layout here makes sense.
Might be a bit of work to get Dillo to use icons.png instead of the built-in pixmaps.h though :)
Anyway, it sounds like this will be a pretty complicated patch. Not sure where I can help, but can try if desired on smaller parts.
Not sure if it would be an easy patch. You may want to review the issues in case you find some that seems more approachable. https://github.com/dillo-browser/dillo/issues I would also appreciate if someone can test this PR by doing some daily google searches over a week or so with the cookies disabled for google: https://github.com/dillo-browser/dillo/pull/251 The question is if it is better to leave the ucbcb=1 parameter in the URL by default or not: search_url="Google https://www.google.com/search?ie=UTF-8&oe=UTF-8&gbv=1&ucbcb=1&q=%s" I tried to skip the consent dialog by denying it by default so it doesn't appear, but I get mixed results even without cookies disabled. Some times it appears again and others it doesn't, not sure how they determine when it should appear. Maybe it is better to leave it out. Testing this PR would be helpful and doesn't require much effort, in case you are interested. I can only do limited tests before Google fingerprints my IP and then it never ask me consent again. (And yes, I'm aware of the implications of using Google, but it is the only search engine that gives me any result in very weird searches like part numbers of unknown electrical components) Best, Rodrigo.
participants (2)
-
a1ex＠dismail.de -
Rodrigo Arias