dark mode FLM?

Having a problem or need a question answered? Request any form of help here, technical or non-technical.
Post Reply Show posts with ed2k links
bobybrown
Posts: 25
Likes:
Joined: Sat Mar 25, 2023 2:33 pm

Re: dark mode FLM?

Post by bobybrown »   0 likes

it would be great if it was able toggle/switch 🌙 💡 dark/light theme just like what modern forum have .. how i wish
Top
User avatar
pillowbaker
Posts: 3019
Likes:
Joined: Mon Mar 07, 2022 4:05 am

Re: dark mode FLM?

Post by pillowbaker »   0 likes

I'd be happy even without a toggle switch.

Nasuada, I'd be very interested in seeing what you can come up with. I honestly have no idea how to go about changing things in phpBB, but I am down to learn almost anything. If you would like some assistance, let me know! I love dark modes.

I am the exact opposite to Night in this regard. I need dark mode + monitor brightness down + night light filter up to 60 to 80 depending on the time of evening. Yeah, it sometimes interferes with actually watching movies on the monitor, but it's what's easiest for me.
Top
User avatar
Night457
Global Moderator
Posts: 8834
Likes:
Joined: Sat Dec 28, 2019 3:44 pm

Re: dark mode FLM?

Post by Night457 »   0 likes

I generally watch movies in the dark in the living room, so the usually dark appearance of movies is fine for me. I suppose that is the one exception to my "brightness" rule, which is really for reading. As long as the subtitles are bright enough then I am OK!
Top
Infinity

Re: dark mode FLM?

Post by Infinity »   2 likes

Hey guys,

I put together a little dark mode theme during my lunch break, all I did was adjust the colour values and clear a few things up but I hope it's acceptable. This was created in Firefox and wasn't tested in other browsers.

If there are any issues please let me know as I've very likely missed a few things somewhere on a page I didn't visit. I think I've covered the most common pages including PMs, User Control Panel, and Subforums.

I have attached a couple of screenshots below.
Screenshot 2023-10-05 at 12-08-39 FirstLoveMovies - Index page.png
Screenshot 2023-10-05 at 12-29-34 dark mode FLM - Page 2 - FirstLoveMovies.png
You will need to use a browser extension like Stylus (Firefox Chrome) which allows you to override the default styling of a website. Once you have it installed you can create a new style for FLM and paste in the contents of the spoiler below. (Click the extension so the little popup appears and click the first-loves text part that is underlined which will open up a new page.) After pasting the contents and saving it should look like the screenshots.
XdhZmWwk2L.png
If you are using Stylus for this, the end result should look something like this:
firefox_7MO8WZzAES.png
Changes:
Spoiler:

.bg2 {
background-color: #242424;
}

.bg1 {
background-color: #242424;
}

.content {
color: #d9d9d9;
}

html,
body {
color: #ccc;
background-color: #282828;
}

#wrap {
background-color: #333;
border-color: #404040;
}

h3 {
color: #bfcbdb;
}

.navbar {
background: #4d4d4d;
background-image: none;
border: 1px solid #666;
box-shadow: none;
}

.post {
background-image: none;
box-shadow: none;
border: 1px solid #4f4f4f;
}

.postprofile {
color: #cacaca;
border-color: #3e3e3e;
}

.postbody {
color: #b5b5b5;
}

.post:target .content {
color: #b5b5b5;
}

.post h3 a.first-unread,
.post:target h3 a {
color: #bfcbdb;
}

a {
color: #96bbee;
}

.postprofile strong {
color: #bdbdbd;
}

.button,
.buttons > .button.locked-icon {
border-color: #3c3c3c;
background-color: #1c1c1c;
background-image: none;
filter: none;
color: #7fa6db;
box-shadow: none;
}

.panel {
background-color: #242424;
color: #e1e1e1;
box-shadow: none;
background-image: none;
border: 1px solid #4f4f4f;
}

.content h2,
.panel h2 {
color: #e1e1e1;
border-bottom-color: #3e3e3e;
}

label,
label:hover,
label:focus {
color: #ccc;
}

dl.details dt {
color: #b5b5b5;
}

dl.details dd {
color: #a6bddd;
}

h2 {
color: #779fd5;
}

.copyright {
color: #ccc;
}

.postlink {
border-bottom-color: #6891c8;
color: #84b8fd;
}
.forabg {
background-image: none;
box-shadow: none;
background-color: #2b2b2b;
border: 1px solid #3c3c3c;
}

li.row {
border-top-color: #313131;
border-bottom-color: #646464;
}

.forum-statistics {
color: #9f9f9f;
}

.forum-statistics .value {
color: #e1e1e1;
}

ul.topiclist li {
color: #e6e6e6;
}

.forumbg {
background-image: none;
box-shadow: none;
background-color: #2b2b2b;
border: 1px solid #3c3c3c;
}

.pagination li a {
color: #4076dd;
background-color: #353535;
border-color: #4d4d4d;
}

element {
color: #d2d2d2;
}

.dropdown .dropdown-contents {
background: #393939;
border-color: #2e4d77;
}

.search-box .inputbox,
.search-box .inputbox:hover,
.search-box .inputbox:focus,
.search-box .button:hover {
border-color: #595959;
}

table.table1 tbody td {
border-top-color: #3c3c3c;
}

table.table1 td {
color: #e8e8e8;
}

.panel-container .panel {
background: #2d2d2d;
}

.bg3.panel {
box-shadow: none;
background-image: none;
border-top-color: #4f4f4f;
background-color: rgb(45, 45, 45);
}

.bg3.panel::before,
.bg3.panel::after {
background: none;
}

#navigation a {
color: #ddd;
background: #1a1a1a;
background-image: none;
filter: none;
box-shadow: none;
}

#navigation a:hover {
color: #ddd;
background: #333;
background-image: none;
filter: none;
box-shadow: none;
}

.panel-container .panel li.header dd,
.panel-container .panel li.header dt {
color: #ccc;
}

dd label {
color: #eaeaea;
}

.cp-mini {
background-color: #1e1e1e;
}

#cp-main .pm {
background-color: #242424;
}

.signature {
border-top-color: #464646;
}

blockquote {
background-color: #515151;
border-color: #757575;
}

#tabs .tab > a {
background: #515151;
color: #b3b3b3;
}

#tabs .activetab > a,
#tabs .activetab > a:hover {
background: #808080;
box-shadow: none;
filter: none;
border-color: #595959;
color: #282828;
}

.search-header {
border-color: #373737;
}

blockquote blockquote,
blockquote .codebox,
blockquote .attachbox {
background-color: #737373;
}

.alt2 {
background-color: #393939 !important;
border: #515151 !important;
}

.smallfont,
input {
color: #1e1e1e;
}

.smallfont,
b {
color: #eaeaea;
}

.section-posting .bg3.panel {
background-color: #242424;
}

.inputbox,
select,
.inputbox:focus,
select:focus,
.message-box textarea,
.inputbox:hover {
background-color: #313131;
border-color: #4f4f4f;
color: #f7f7f7 !important;
transition: none;
}

hr {
border-top-color: #4d4d4d;
}

table.zebra-list tr:nth-child(2n+1) td,
ul.zebra-list li:nth-child(2n+1) {
background-color: #4a4a4a;
}

table.zebra-list tr:nth-child(2n) td,
ul.zebra-list li:nth-child(2n) {
background-color: #4a4a4a;
}

.panel-container table.table1 thead th {
color: #b9b9b9;
border-bottom-color: #5b5b5b;
}

dl.thumbnail img {
border-color: #575757;
background-color: #282828;
}
Thanks a bunch! :)
You do not have the required permissions to view the files attached to this post.
Top
bobybrown
Posts: 25
Likes:
Joined: Sat Mar 25, 2023 2:33 pm

Re: dark mode FLM?

Post by bobybrown »   0 likes

nice another way of changing the theme of a webpage via web browser extension although it isn't automatic like the first Dark Reader

thanks for sharing.
Top
User avatar
goku33
Posts: 1358
Likes:
Joined: Sun Oct 16, 2022 12:11 pm
Location: The Machine

Re: dark mode FLM?

Post by goku33 »   0 likes

pillowbaker wrote: Wed Oct 04, 2023 6:41 pm …
You still use AdBlockPlus? Even Chrome got uBlockOrigin available! Much superior :) (but so is Firefox imho lol)
Top
User avatar
mimzy
Posts: 1709
Likes:
Joined: Fri Aug 12, 2011 7:00 am

Re: dark mode FLM?

Post by mimzy »   3 likes

bobybrown wrote: Thu Oct 05, 2023 2:46 pm nice another way of changing the theme of a webpage via web browser extension although it isn't automatic like the first Dark Reader
You can now select the above theme as your default theme in the User Control Panel. No browser extensions needed ;)

Night457 wrote: Wed Oct 04, 2023 8:06 pm The only one that looks really different is "prosilver", which is how FLM looked many years ago.
Minor correction: "prosilver" is just the default theme of phpBB 3.x. It was never the FLM default.
Top
User avatar
Night457
Global Moderator
Posts: 8834
Likes:
Joined: Sat Dec 28, 2019 3:44 pm

Re: dark mode FLM?

Post by Night457 »   1 likes

ALRIGHT MIMZY!!!! Great job! :icon_1dancingban

And I mismembered what you told me about the prosilver. :oops:
Top
User avatar
mimzy
Posts: 1709
Likes:
Joined: Fri Aug 12, 2011 7:00 am

Re: dark mode FLM?

Post by mimzy »   1 likes

Night457 wrote: Thu Oct 05, 2023 10:34 pm ALRIGHT MIMZY!!!! Great job! :icon_1dancingban
If there are bugs, blame Infinity, though :mrgreen:
Top
User avatar
ghost
Site Admin
Posts: 11361
Likes:
Joined: Sun Mar 07, 2004 1:00 am

Re: dark mode FLM?

Post by ghost »   1 likes

You can now select the above theme as your default theme in the User Control Panel. No browser extensions needed ;)
I have to get used to it, but I think I like it. :P

Thanks, mimzy. ;)

P.S.: The smilies look a bit strange. They have some kind of white borders.

The blue font in the header is too dark:
[Image]
Top
Post Reply

Return to “FAQ / Help / Newbie Guides”