| General > General Technical Chat |
| Forum dark theme |
| (1/8) > >> |
| MarkF:
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. |
| RoGeorge:
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: ---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;} --- End code --- |
| RoGeorge:
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. |
| Sal Ammoniac:
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. |
| dr.diesel:
No millennial here and I MUCH prefer dark themes. |
| Navigation |
| Message Index |
| Next page |