Author Topic: Forum dark theme  (Read 8188 times)

0 Members and 1 Guest are viewing this topic.

Online MarkFTopic starter

  • Super Contributor
  • ***
  • Posts: 2647
  • Country: us
Forum dark theme
« on: November 29, 2017, 05:19:09 pm »
I put together a dark theme for the forum and thought I would share.

Enjoy.    :phew:

 

Update -  An updated version of the stylesheet can be found here
For Google Chrome, I use the Stylus extension from the chrome web store.
« Last Edit: March 25, 2024, 10:31:09 am by MarkF »
 
The following users thanked this post: thm_w, RoGeorge, Mr. Scram, kelemvor, DarkMode

Offline RoGeorge

  • Super Contributor
  • ***
  • Posts: 6704
  • Country: ro
Re: Forum dark theme
« Reply #1 on: June 13, 2019, 03:13:08 pm »
This is absolutely great, thank you MarkF:-+

I didn't know somebody already did this.  Found up only today, by reading this other thread:  https://www.eevblog.com/forum/suggestions/dark-theme/msg1444750/#msg1444750

I am using Ubuntu and Firefox, but the same CSS works great, with very minor changes (I wanted to preserve the default font-family and font-size, which are different between Windows and Linux - the hardcoded names from the zip seem to be for Windows, the current reposted code will preserve the fonts), that is why I am reposting it together with installation instructions.  In the meantime the "Stylish" add-on/plugin (not the attached file here, the file here is plain CSS text) was found to be a spyware, and it was banned from Mozilla repositories.

In the meantime there is another add-on that is open source, so you can see for yourself it is not spying on you.  It is called "Stylus".

How to use the black theme made by MarkF

1. Install "Stylus" add-on for your browser.  For Firefox this is done by pressing CTRL+SHIFT+A.  A new tab will open.  On top of the newly opened tab, in the search field named "Find more extensions" type "Stylus".  Follow the instruction and install it.  This will install stylus from the Internet.  By now, you a small "{S}" icon should have appeared in the upper right corner of any Firefox tab.  You can click on it at any time.

2. Now, we need to tell "Stylus" what colors and shapes we prefer for EEVblog.  This is done by writing all down all colors, shapes and sizes preferred in a CSS file.  MarkF already wrote the CSS file, we just need to add it to our "Stylus" add-on.

To add the dark EEVblog theme select the following CSS code text, and copy it with CTRL+C.  Then click on the "{S}" icon in the upper right of the tab and click the "Manage" button.  A new tab will open.  Click the "Write new style" button in the newly opened tab.  Give it a nice name, and in the "Code" window on the right side of the same tab, paste the CSS code copied from here.  Under your "Code" window there is a "+" sign.  Click on it.  A bar will open.  Instead of "URL" select "URLs on the domain", and on the next field of the same row type "www.eevblog.com".  Now go to the upper right of the tab and press the "Save" tab.  That's it.  Close the tab with the code you just saved.

From now on, all the new opened EEVblog pages, and all the EEVblog pages already opened in your browser will have a dark theme.

If you want to go back to the normal colors, click on the Stylus icon "{S}" in the upper right side of your browser, go to "Manage" again and uncheck the file you just saved.

If you are are reading an EEVblog page and want to toggle between the normal and the dark theme, just click once on {S} icon and from there check or uncheck the dark theme you just saved.

If you want, you can even tune the size of the default size of text upon your own wish, make to disappear the elements you don't like, and so on.  All the changes are done as you type, so if you keep another window open at EEVblog while changing the text, all the changes are live, making them very easy to tune.

Code: [Select]
h1 {font-size: 1.30em !important}
h2 {font-size: 1.20em !important}
h3 {font-size: 1.10em !important}
h4 {font-size: 1.00em !important}
h5 {font-size: 0.90em !important}
h6 {font-size: 0.80em !important}

xx-large {font-size: 1.3em !important}
x-large  {font-size: 1.2em !important}
large    {font-size: 1.1em !important}
medium   {font-size: 1.0em !important}
small    {font-size: 0.9em !important}
x-small  {font-size: 0.8em !important}
xx-small {font-size: 0.7em !important}

html, body, p, table, th, tr, td, div, a, form, frame, input, script, ul, ol, dl {
   /*font-family: Verdana !important; */
   /*font-size: 9pt !important;*/
}
pre, tt, code {
   /*font-family: Consolas !important; */
   /*font-size: 12pt !important;*/
}
blockquote, q {
   /*font-style: italic !important; */
   /*font-size: 1.0em !important;*/
}


/* EEVblog Forum */
.frame, .roundframe, .plainbox, .dropmenu a, .hslice td, .titlebg td,
.tborder>.description, .main_content>.description, #recent>.description,
 #header, #content_section, #footer_section, #main_container p {
   background: #222 !important;
   color: #fff !important;
}
 #upper_section, .cat_bar, .catbg, .table_grid th {
   background: #357 !important;
}
div.title_bar, h3.titlebg {
   background: #357 !important;
   color: #fff !important;
}
div.title_barIC, h4.titlebg {
   background: #555550 !important;
   color: #fff !important;
}
div.additional_row {
   background: none !important;
}
.inner, .signature, .custom_fields_above_signature {
   border-color: #aaa !important;
}
.upperframe, .upperframe span, .lowerframe, .lowerframe span {
   height: 1px !important;
   background: #aaa !important;
   border-left: 1px solid #aaa !important;
   border-right: 1px solid #aaa !important;
}
.table_grid td {
   border: 1px solid #222 !important;
}
.hslice td {
   border: 1px solid #444 !important;
}
.info, .post, .signature h5 {
   background: inherit !important;
   color: #fff !important;
}
.forumtitle a {
   font-size: 16pt !important;
   font-weight: normal !important;
   background: inherit !important;
   color: #fff !important;
   text-decoration: none !important;
}
.greeting {
   font-weight: normal !important;
}
.username h4 {
   font-size: 14pt !important;
   background: inherit !important;
   color: #fff !important;
}
.list_posts {
   border-color: #aaa !important;
}
.lastpost, .navPages, .keyinfo h5, .floatleft h5, .windowbg td,  .windowbg2 td, .windowbg h4,
.reset a, .nextlinks a, .innerframe a, .roundframe a, .navigate_section a, .pagelinks a, .smalltext a,
.windowbg a, .windowbg2 a, .stickybg a, .stickybg2 a, .lockedbg a, .lockedbg2 a {
   background: inherit !important;
   color: #fff !important;
   text-decoration: none !important;
}
.windowbg, .windowbg span.topslice, .windowbg span.botslice,
.windowbg span.topslice span, .windowbg span.botslice span {
   background: #444 !important;
   color: #fff !important;
}
.windowbg2, .windowbg2 span.topslice, .windowbg2 span.botslice,
.windowbg2 span.topslice span, .windowbg2 span.botslice span {
   background: #333 !important;
   color: #fff !important;
}
.stickybg, .stickybg2, .title_barIC {
   background: #4c4c4c !important;
   color: #fff !important;
}
.lockedbg, .lockedbg a, .lockedbg2, .lockedbg2 a,
.locked_sticky2, .locked_sticky, .locked_sticky a, .locked_sticky2 a {
   background: #534 !important;
   color: !important;
}
.stickybg a, .stickybg2 a, .lockedbg a, .lockedbg2 a {
   font-weight: normal !important;
}
.thanks {
   font-style: italic !important;
   font-size: x-small !important;
   color:18e !important;
}
.vob_protected, .vob_protected a:link, .vob_protected a:visited {
   color: !important;
}
.bbc_standard_quote {
   background: #555 !important;
}
.bbc_alternate_quote {
   background: #444 !important;
}
.bbc_standard_quote, .bbc_alternate_quote {
   /*font-size: 10pt !important;*/
   line-height: 1.2em !important;
   padding: 0.5em 1.0em !important;
   border-radius: 5px !important;
   border-color: #aaa !important;
   color: #fff !important;
}
.bbc_link:link, .bbc_link:visited {
   border-bottom: none !important;
   background: inherit !important;
   color: !important;
}
.bbc_code {
   /*font-family: Consolas !important; */
   /*font-size: 10pt !important;*/
   line-height: 1.2em !important;
   padding: 0.5em 1.0em !important;
   max-height: 24.0em !important;
   border: 1px solid #aaa !important;
   border-radius: 5px !important;
   background: inherit !important;
   color: #fff !important;
}
.codeheader, .quoteheader {
   font-weight: bold !important;
   font-style: italic !important;
   background: inherit !important;
   color: #fff !important;
}
.firstlevel span {
   border: 1px solid #222 !important;
   border-radius: 5px !important;
   padding: 0em 0.5em !important;
   background: #555 !important;
   color: #fff !important;
}
.firstlevel span:hover {
   background:70 !important;
   border-radius: 5px !important;
}
.dropmenu a:hover {
   color:70 !important;
}
 #upper_section input, textarea,
.generic_list input, .floatright input, .righttext input,
.content textarea, .content button, .content input, .content select,
.titlebg textarea, .titlebg button, .titlebg input, .titlebg select,
.plainbox textarea, .plainbox button, .plainbox input, .plainbox select,
.roundframe textarea, .roundframe button, .roundframe input, .roundframe select,
.description textarea, .description button, .description input, .description select {
   border: 1px solid #777770 !important;
   border-radius: 5px !important;
   background: #555550 !important;
   color: #fff !important;
}
.buttonlist a span, .buttonlist a.active span {
   background: none !important;
   color: #fff !important;
}
.buttonlist a {
   background: #555 !important;
   border-radius: 5px !important;
}
.buttonlist a:hover {
   background:70 !important;
   border-radius: 5px !important;
}
.buttonlist a.active:hover {
   background:70 !important;
   border-radius: 5px !important;
}
.forumtitle a:hover, .bbc_link:hover, .navPages:hover,
.reset a:hover, .nextlinks a:hover, .innerframe a:hover, .roundframe a:hover,
.navigate_section a:hover, .pagelinks a:hover, .smalltext a:hover,
.windowbg a:hover, .windowbg2 a:hover, .stickybg a:hover, .stickybg2 a:hover,
.lockedbg a:hover, .lockedbg2 a:hover {
   color:70 !important;
}
.arp_left {
   width: 45% !important;
}
.post img, .attachments img, .smiley {background:ee !important;}

Offline RoGeorge

  • Super Contributor
  • ***
  • Posts: 6704
  • Country: ro
Re: Forum dark theme
« Reply #2 on: June 13, 2019, 03:20:13 pm »
And then I continued to read the other topic and found out there is a much newer version maintained by MarkF at https://userstyles.org/styles/156638/eevblog-forum-dark-theme  ;D

Anyway, the installation instructions still stand, you got the idea.

P.S. The newest theme from https://userstyles.org/styles/156638/eevblog-forum-dark-theme changes the fonts type on my Ubuntu/Firefox, so I'll keep the version from this page.

« Last Edit: June 13, 2019, 03:44:18 pm by RoGeorge »
 

Offline Sal Ammoniac

  • Super Contributor
  • ***
  • Posts: 1764
  • Country: us
Re: Forum dark theme
« Reply #3 on: June 13, 2019, 03:44:08 pm »
I'm curious... why are dark themes so popular these days? Is it a Millennial thing? I see lots of younger guys at the office using dark themes for IDEs, editors, etc., but almost all of the older guys (like me) seem to stick with the lighter themes.
"That's not even wrong" -- Wolfgang Pauli
 

Offline dr.diesel

  • Super Contributor
  • ***
  • Posts: 2214
  • Country: us
  • Cramming the magic smoke back in...
Re: Forum dark theme
« Reply #4 on: June 13, 2019, 03:56:51 pm »
No millennial here and I MUCH prefer dark themes.

Offline RoGeorge

  • Super Contributor
  • ***
  • Posts: 6704
  • Country: ro
Re: Forum dark theme
« Reply #5 on: June 13, 2019, 04:53:13 pm »
why are dark themes so popular these days?

Because nowadays monitors are huge, and thus much brighter.  I use a 32 inch 4K monitor at a length of an arm in front of my eyes, and two other smaller monitors aside.  When it goes from black to white it lights up the whole room.  Adjusting brightness/contrast doesn't help much.

It becomes even worst after looking at it for a long time, like software developer are doing and so on.

Bright background flood lights to doesn't help.  I tried.  It's way worst.

The only thing that works for many hours continuous usage are:

1. Dark themes (dark grey backrounds, not pitch black, and light grey text, not bright white text).  It is not just a trend, I am doing this for the last few decades.  First thing I do after installing an OS, I change the background to solid black.

It's not just a trend, it's physically different.  To describe the feeling, switching from white to dark is physically relieving, on par on when you sit in a room with a big hissing noise, and suddenly somebody shut down the hissing receiver.  That's how it feels for me.

2. Night light (automatic color temperature lowering after the sunset until dawn).  That is pretty recent (at first I knew it as f.lux), and believe it or not, it really improves people's sleep over night.  It's not only eye strain, it also affects melanin melatonin levels (melanin melatonin release is synchronized by the warm color of light during sunset/sunrise time), and thus affects how good one sleeps.  There are a few research papers published about that.

I laughed at it at first, but then I used it anyway because I was a sucker for the warmer colors.  And I realized that it really works.  Now, if at night the monitor suddenly goes to cold light (it happens sometimes if I change the setting in the video driver), then it feels like static.  Scares away even the slightest sleepiness.

« Last Edit: October 11, 2020, 08:02:36 pm by RoGeorge »
 
The following users thanked this post: thm_w, I wanted a rude username

Online MarkFTopic starter

  • Super Contributor
  • ***
  • Posts: 2647
  • Country: us
Re: Forum dark theme
« Reply #6 on: June 13, 2019, 08:13:07 pm »
I switched to "Stylus" too because of the security issues. 
Thought I mentioned it in the other thread but maybe I forgot.

I actually have two styles.  The first part of the dark theme which has the majority of the font sizes.
This is a "default" style that I use for all web pages.  And the rest of the theme is a "eevblog" style.
You can see the break where the EEVBlog comment is in the theme.
I combine my two styles and post it to the "Stylish" web page.

I use a 15" laptop running Windows 10 so the font sizes are probably big for a large desktop monitor.
Also, I've been using Tahoma as the default font and Consolas as the monospace font for code blocks.
Neither of which are available on Linux as I remember.  There are a few places inside the "eevblog" section
that I'm forced to specify the font but I try to minimize doing it there. 
Linux users will need to pick something more suitable.  Or delete that section and use the system defaults.

Being in my 60s now, I'm finding more and more web sites where the font is too small for me to see.

I still have problems with the emoji's transparent background.  I like to keep it transparent but the omega (ohms)
symbol is black and doesn't show very well on the dark background.

Thanks for the install instructions.  I don't believe I ever installed the dark theme from the "Stylish" web page.
I edit the theme directly from within the "Stylus" plug-in.

I forgot I even created this thread.  So go to Stylish and get the dark theme. 
There are some new features in the last update.  Not just tweaks.
Feel free to change it up with your own preferences.
« Last Edit: June 13, 2019, 08:15:00 pm by MarkF »
 

Offline Mr. Scram

  • Super Contributor
  • ***
  • Posts: 9810
  • Country: 00
  • Display aficionado
Re: Forum dark theme
« Reply #7 on: June 13, 2019, 08:56:23 pm »
Restricting the amount of blue light seems to be beneficial to the sleep cycle, but the benefits of dark themes haven't  really been established. If anything the evidence suggests that most people have astigmatism and experience greater eyestrain when looking at light text on a dark background. It mostly seems to be a personal or style choice. Maybe older people feel it's more modern when compared to the monochrome screens they knew years ago, while younger people feel dark themes are more modern after having dealt with light UIs all their life.
 

Offline RoGeorge

  • Super Contributor
  • ***
  • Posts: 6704
  • Country: ro
Re: Forum dark theme
« Reply #8 on: June 13, 2019, 09:13:12 pm »
I knew about CSS, but never use it, and wasn't aware there is a ready made plugin that can apply to certain pages certain styles.  That's why I am so happy to learn there is 'Stylus' add-on, and an already usable dark theme.

So far your theme is very nice. 

Thanks for the technical details.  Now that I know the idea, I'll took that into account if I'll have time to modify it a little.  What I am missing most is the rounded corners from the normal theme.  The dark theme sometimes has sharp corners in places where the normal EEVblog has rounded corners, i.e. the cat_bar.

About the omega sign, it was introduced only recently, when the whole forum was made unicode compatible.  Maybe that's why omega character looks different.  I didn't met any omega, yet.  People don't really bother to use the unicode sign for omega.

Ω Ω

Omega appears correct to me, in the colors of normal text characters.  It would be interesting to see how other strange unicode characters looks like.  Many of them give the error "The message body was left empty." at preview.

Anyways, ⭐⭐⭐⭐⭐ for your work, thank you.

Online MarkFTopic starter

  • Super Contributor
  • ***
  • Posts: 2647
  • Country: us
Re: Forum dark theme
« Reply #9 on: June 14, 2019, 01:15:51 am »
I'm not sure which bar you are referring to "i.e. the cat_bar".
There is a "cat_bar" tag.  But, I just changed the background.
If you want to change its corner radius, add a border-radius definition:
Code: [Select]
#upper_section, .cat_bar, .catbg, .table_grid th {
   background: #357 !important;
   border-radius: 5px !important;
}
You might want to pull ".cat_bar" out and make it's own settings or increase the radius size.
I already apply a radius to quoted text and code blocks.
Just search for "border-radius" in the style.

Your unicode omega character looks okay to me. 
But the emoji character at the end of the emoji list in the edit window does not.   \$\Omega\$

How did you type the omega character?
« Last Edit: June 14, 2019, 01:17:42 am by MarkF »
 
The following users thanked this post: RoGeorge

Offline KaneTW

  • Frequent Contributor
  • **
  • Posts: 810
  • Country: de
Re: Forum dark theme
« Reply #10 on: June 14, 2019, 01:37:30 am »
Dark themes are just easier on the eyes for me. Light themes often feel eye-searingly bright.
 

Offline Sal Ammoniac

  • Super Contributor
  • ***
  • Posts: 1764
  • Country: us
Re: Forum dark theme
« Reply #11 on: June 14, 2019, 01:55:52 am »
ight themes often feel eye-searingly bright.

Perhaps, but there is a brightness control on most monitors...
"That's not even wrong" -- Wolfgang Pauli
 

Offline KaneTW

  • Frequent Contributor
  • **
  • Posts: 810
  • Country: de
Re: Forum dark theme
« Reply #12 on: June 14, 2019, 04:09:38 am »
Reducing brightness messes up color reproduction.
 

Offline RoGeorge

  • Super Contributor
  • ***
  • Posts: 6704
  • Country: ro
Re: Forum dark theme
« Reply #13 on: June 14, 2019, 06:25:22 am »
Your unicode omega character looks okay to me. 
But the emoji character at the end of the emoji list in the edit window does not.   \$\Omega\$

How did you type the omega character?

Your omega in the quoted text above, indeed appears in inverted colors in a dark theme.  For the unicode capital omega, usually I just google "unicode ohm", then copy paste the character from that web page into the EEVblog message. 
https://www.fileformat.info/info/unicode/char/2126/index.htm  Same page shows how to write an omega when writing code, but I just copy pasted the graphic symbol.

To type it from the keyboard, one need to remember the unicode code for capital omega, which is "2126".  Then,

    - in Windows, ALT+2126 (keep ALT key pressed while typing the digits 2 1 2 6 from the numerical keypad, then release the ALT key).  The digits must be typed from the numerical keypad, not from the first row, i.e. for "1" you press the key "1/End", and not the key "!/1".

    - in Linux, pres CTRL+SHIFT+u, release it, then 2126 (keypad or not, doesn't matter), then ENTER.

This forum also supports LaTeX, so apart from the Unicode ohm Ω and the emoticon ohm  \$\Omega\$, there is yet another way to write capital omega in LaTeX as "\Omega" \$ \Omega\$.  Note that the LaTeX won't be rendered when preview, but will appear correct when the message is posted.

Another tricky thing is that the spelling of a LaTeX ohm, which is "backslash dollar backslash Omega backslash dollar", is the same as the Emoticon ohm, and the emoticon seems to take precedence over LaTeX here, so put an extra space or something else in the LaTeX spelling to force the LaTeX over Emoticon.

For the black theme, LaTeX ohm appears fine, Emoticon ohm have a wrong white background.

Also it might work to write ohm as an embedded png rendered somewhere else, trying this for the first time: 
Yep, works, but this one appears too on a white background on the dark theme.

Same, but rendered by EEVblog:  \$\sum^{i=\infty}_{i=0}\omega\Omega_{i}\$

This last one appears correctly (dark background) on the dark theme, yet a singe capital omega in latex, rendered by EEVblog, will have white background because it will be interpreted as the emoticon ohm.

For EEVblog rendered LaTeX,  it doesn't show to preview, and needs a page refresh after posting it, in order to re-render any later edits.



To recap:
Ω - Unicode ohm
\$\Omega\$ - Emoticon ohm
\$\Omega \$ - LaTeX ohm (from EEVblog)
- LaTeX ohm (as a png from another site, codecogs)

Code: [Select]
- typed from the keyboard (Windows)
ALT+2126

- typed from the keyboard (Linux)
CTRL+SHIFT+u 2126 Enter

- as emoticon (seems to be the same as embedding LaTeX notation, IDK)
\$\Omega\$

- as LaTeX, but this is the same as Emoticon
\$\Omega\$

- as LaTeX, with an extra space added in order to distinguish it from the Emoticon, thus enforcing a LaTeX rendering, and not the Emoticon gif
\$ \Omega\$

- as a LaTeX PNG image rendered by a 3rd party
[img]https://latex.codecogs.com/png.latex?\sum^{i%3D\infty}_{i%3D0}\omega\Omega_{i}[/img]
[img]https://latex.codecogs.com/png.latex?\sum^{i=\infty}_{i=0}\omega\Omega_{i}[img]   <- don't use this one, it will mess the rest of the message, use "%3D" instead of "="

- same as above, but rendered by EEVblog
\$\sum^{i=\infty}_{i=0}\omega\Omega_{i}\$

« Last Edit: June 14, 2019, 07:50:24 am by RoGeorge »
 
The following users thanked this post: MarkF

Offline Mr. Scram

  • Super Contributor
  • ***
  • Posts: 9810
  • Country: 00
  • Display aficionado
Re: Forum dark theme
« Reply #14 on: June 14, 2019, 01:24:49 pm »
Reducing brightness messes up color reproduction.
That sounds like an issue with uniformity. If you need to increase brightness to suppress a lack of uniformity your monitor may have issues.
 

Offline mark03

  • Frequent Contributor
  • **
  • Posts: 731
  • Country: us
Re: Forum dark theme
« Reply #15 on: June 15, 2019, 02:05:15 am »
I'm curious... why are dark themes so popular these days? Is it a Millennial thing? I see lots of younger guys at the office using dark themes for IDEs, editors, etc., but almost all of the older guys (like me) seem to stick with the lighter themes.

Had to laugh at this.  I'm not *that* old but I still view light themes as sort of a hipster thing (or the same sort of people, before the term was invented).  After all, everything was dark-themed in the early days of computing; it wasn't until Windows and Mac that someone decided we needed dark text on a light background.  Presumably the goal was to mimic paper, but that seems silly:  the reason we evolved dark print on white paper is, I assume, because it was much easier to fabricate than light print on a dark substrate.  Dark, non-glossy surfaces are particularly difficult to create.

Now that we have arrived in the 21st century, someone should do a scientific study to figure out which one is better.  I prefer dark, but that could be down to nostalgia.
 

Offline AnasMalas

  • Regular Contributor
  • *
  • Posts: 69
  • Country: jo
Re: Forum dark theme
« Reply #16 on: October 11, 2020, 06:24:29 pm »
I just wanted to comment on how awesome this darkmode is! It should be stickied, or something idk. I even read all 42 pages of that siglent post in dr.diesel's signature without my eyes killing me, why did I do this? Because I put the pro in procrastination (if me replying this late is wrong I am sorry, but it did not come up in search and it really should have)... Anyway

And then I continued to read the other topic and found out there is a much newer version maintained by MarkF at https://userstyles.org/styles/156638/eevblog-forum-dark-theme  ;D

Anyway, the installation instructions still stand, you got the idea.

P.S. The newest theme from https://userstyles.org/styles/156638/eevblog-forum-dark-theme changes the fonts type on my Ubuntu/Firefox, so I'll keep the version from this page.

This method is really easy! I love it! I do wonder, how do I change the bold color back to #ffffff? I dont want it to be yellow

Reducing brightness messes up color reproduction.
That sounds like an issue with uniformity. If you need to increase brightness to suppress a lack of uniformity your monitor may have issues.

About this, I couldnt resist. Here:
 

Offline Cerebus

  • Super Contributor
  • ***
  • Posts: 10576
  • Country: gb
Re: Forum dark theme
« Reply #17 on: October 11, 2020, 07:01:47 pm »
2. Night light (automatic color temperature lowering after the sunset until dawn).  That is pretty recent (at first I knew it as f.lux), and believe it or not, it really improves people's sleep over night.  It's not only eye strain, it also affect melanin levels (melanin release is syncronized by the warm color of light during sunset/sunrise time), and thus affects how good one sleeps.  They are a few research papers published about this.

Melatonin, not melanin. Melanin is the pigment that colours your skin, hair and eyes. Melatonin is a hormone that's highly labile under short wavelength light.
Anybody got a syringe I can use to squeeze the magic smoke back into this?
 
The following users thanked this post: RoGeorge

Offline bson

  • Supporter
  • ****
  • Posts: 2441
  • Country: us
Re: Forum dark theme
« Reply #18 on: October 11, 2020, 07:41:57 pm »
On MacOS you can use the opt key:

Ω opt-z
√ opt-v
∑ opt-w
∂ opt-d
˚ opt-k
± opt-+
≠ opt-=
· opt-(
µ opt-m
-–— - opt-- opt-_
and a bunch more; it's all UTF-8 which the forum software seems to handle correctly since quite some time now.

It's pretty easy to create a custom layout that adds missing characters (most notably omega) if you care.

T=88˚C
Make sure 25µA ≤ Iq ≤ 35µA
3·4=12
US$100 = €84.67

« I have a friend who's an artist and has sometimes taken a view which I don't agree with very well. He'll hold up a flower and say “look how beautiful it is,” and I'll agree. Then he says “I as an artist can see how beautiful this is but you as a scientist take this all apart and it becomes a dull thing,” and I think that he's kind of nutty. First of all, the beauty that he sees is available to other people and to me too, I believe. Although I may not be quite as refined aesthetically as he is … I can appreciate the beauty of a flower. At the same time, I see much more about the flower than he sees. I could imagine the cells in there, the complicated actions inside, which also have a beauty. I mean it's not just beauty at this dimension, at one centimeter; there's also beauty at smaller dimensions, the inner structure, also the processes. The fact that the colors in the flower evolved in order to attract insects to pollinate it is interesting; it means that insects can see the color. It adds a question: does this aesthetic sense also exist in the lower forms? Why is it aesthetic? All kinds of interesting questions which the science knowledge only adds to the excitement, the mystery and the awe of a flower. It only adds. I don't understand how it subtracts. » - Richard Feynman
 

Online MarkFTopic starter

  • Super Contributor
  • ***
  • Posts: 2647
  • Country: us
Re: Forum dark theme
« Reply #19 on: October 11, 2020, 07:50:29 pm »
I just wanted to comment on how awesome this darkmode is! It should be stickied, or something idk. I even read all 42 pages of that siglent post in dr.diesel's signature without my eyes killing me, why did I do this? Because I put the pro in procrastination (if me replying this late is wrong I am sorry, but it did not come up in search and it really should have)... Anyway

And then I continued to read the other topic and found out there is a much newer version maintained by MarkF at https://userstyles.org/styles/156638/eevblog-forum-dark-theme  ;D

Anyway, the installation instructions still stand, you got the idea.

P.S. The newest theme from https://userstyles.org/styles/156638/eevblog-forum-dark-theme changes the fonts type on my Ubuntu/Firefox, so I'll keep the version from this page.

This method is really easy! I love it! I do wonder, how do I change the bold color back to #ffffff? I dont want it to be yellow

The Stylish web site has been terribly slow for some time now.
So, I have attached the latest version...

To change the fonts used:
The font used is defined in only two places for the majority of the text.
 - Line 18 for normal text
 - Line 21 for 'code' and mono spaced text
Just search for 'font-family' and replace the name with a font you like.
Or, you can just delete all the 'font-family' and 'font-size' items for your system defaults.
Code: [Select]
html, body, p, table, th, tr, td, div, a, form, frame, input, script, ul, ol, dl {
   font-family: Tahoma !important;
   font-size: 12pt !important;
}
pre, tt, code {
   font-family: Consolas !important;
   font-size: 12pt !important;
}

To change the bold color from yellow:
You can just delete lines 168-172.
However, the bold white color is barely visible.
You can also just change the color (#rrggbb format) and font-weight (normal or bold)
Code: [Select]
span[style*="text-shadow"], .post strong, .bbc_color, .bbc_color strong {
   font-weight: normal !important;
   color: #fe7 !important;
   text-shadow: 0px 0px #000 !important;
}


Edit:  Oh.  Stylish re-formats the code.  So the line numbers will be off.  Sorry.
« Last Edit: October 11, 2020, 08:01:00 pm by MarkF »
 

Offline newbrain

  • Super Contributor
  • ***
  • Posts: 1767
  • Country: se
Re: Forum dark theme
« Reply #20 on: October 11, 2020, 09:25:23 pm »
On MacOS you can use the opt key:
On Windows (apart from the Alt-tricks), you can create a custom keyboard layout with Microsoft Keyboard Layout Creator, including "dead" (compose) keys.

I did, to add a number of useful stuff to my Swedish keyboard.
The only (minor, to me) drawback is that the Emoji panel (Win-.) does not work: it pops up but you are not able to type to select one, though you can still use the mouse (or switch back to a regular layout with Win-Space)

The Emoji panel itself contains a large symbol section with most scientific and mathematical symbols.
Nandemo wa shiranai wa yo, shitteru koto dake.
 

Offline tooki

  • Super Contributor
  • ***
  • Posts: 12573
  • Country: ch
Re: Forum dark theme
« Reply #21 on: October 12, 2020, 01:53:36 pm »
On MacOS you can use the opt key:
On Windows (apart from the Alt-tricks), you can create a custom keyboard layout with Microsoft Keyboard Layout Creator, including "dead" (compose) keys.

I did, to add a number of useful stuff to my Swedish keyboard.
The only (minor, to me) drawback is that the Emoji panel (Win-.) does not work: it pops up but you are not able to type to select one, though you can still use the mouse (or switch back to a regular layout with Win-Space)

The Emoji panel itself contains a large symbol section with most scientific and mathematical symbols.
MKLC is great.

As a primarily Mac user who regularly has to write in both English and German, but who is entirely accustomed to the US keyboard layout, I used MKLC to make myself a bilingual layout for Windows at work. It's largely modeled on the Mac's layout, but with a bit of German in it to make it easy to type umlauted letters, and various dead keys and right-alt combinations to enter special characters. (This is an area where Windows historically has been absolutely maddening, requiring Alt codes to enter what I consider basic typographic glyphs. The Mac was way, way, way better thought out in this regard, right from the start back in '84. It's easy enough to enter umlauts on a Mac US layout, so I've never felt the need to build a custom layout for it.)
 

Offline eti

  • Super Contributor
  • ***
  • !
  • Posts: 1801
  • Country: gb
  • MOD: a.k.a Unlokia, glossywhite, iamwhoiam etc
Re: Forum dark theme
« Reply #22 on: October 16, 2020, 01:58:35 am »
The current obsession, internet-wide, with dark themes just doesn't make sense from a visual perspective. As with most current digital fads, it's all about PERCEIVED benefit - placebo - rather than hard facts based on research.

When one reads dark text on a light background, the predominant percentage of screen area emitting bright light, causes one's pupils to contract, therefore affording a deeper depth of field, and one struggles far less to focus on the text. I explained that poorly, suffice it to say that "dark mode" is just a fad UNLESS it's night time and you're sleepy, and the brightness of the screen is too painful to your eyes, in which case... TURN OFF AND GO TO SLEEP!!
 

Offline Ed.Kloonk

  • Super Contributor
  • ***
  • Posts: 4000
  • Country: au
  • Cat video aficionado
Re: Forum dark theme
« Reply #23 on: October 16, 2020, 02:09:26 am »
The current obsession, internet-wide, with dark themes just doesn't make sense from a visual perspective. As with most current digital fads, it's all about PERCEIVED benefit - placebo - rather than hard facts based on research.

When one reads dark text on a light background, the predominant percentage of screen area emitting bright light, causes one's pupils to contract, therefore affording a deeper depth of field, and one struggles far less to focus on the text. I explained that poorly, suffice it to say that "dark mode" is just a fad UNLESS it's night time and you're sleepy, and the brightness of the screen is too painful to your eyes, in which case... TURN OFF AND GO TO SLEEP!!

It's got less to do with focus and more to do with contrast.

iratus parum formica
 

Offline eti

  • Super Contributor
  • ***
  • !
  • Posts: 1801
  • Country: gb
  • MOD: a.k.a Unlokia, glossywhite, iamwhoiam etc
Re: Forum dark theme
« Reply #24 on: October 16, 2020, 02:11:07 am »
The current obsession, internet-wide, with dark themes just doesn't make sense from a visual perspective. As with most current digital fads, it's all about PERCEIVED benefit - placebo - rather than hard facts based on research.

When one reads dark text on a light background, the predominant percentage of screen area emitting bright light, causes one's pupils to contract, therefore affording a deeper depth of field, and one struggles far less to focus on the text. I explained that poorly, suffice it to say that "dark mode" is just a fad UNLESS it's night time and you're sleepy, and the brightness of the screen is too painful to your eyes, in which case... TURN OFF AND GO TO SLEEP!!

It's got less to do with focus and more to do with contrast.

I understand that, but it's the opposite of what the dark theme protagonists desire which actually seems to be the case - it's hugely in the mind, I believe.
 


Share me

Digg  Facebook  SlashDot  Delicious  Technorati  Twitter  Google  Yahoo
Smf