• Member Since 9th Jun, 2011
  • offline last seen April 18th

knighty


I'm the creator and lead developer of Fimfiction

More Blog Posts520

Jun
10th
2021

Some Colour Theme Ideas · 4:47pm Jun 10th, 2021

I'm not entirely sure whether I want to do this yet but I'm thinking about adding more than just light/dark themes. One of the issues here is that extra options explicitly leads to more complexity in managing the site's design, and I don't want to run into a situation where it becomes a hassle to make them all look good. Currently these are all between around 5 and 10 variables changed for the whole look which is pretty good but still, it does concern me that it could lead to a situation where I'm restricted on other specific colours I might want to use because they clash with a particular scheme.

Solarized inspired

Not-facebook

Default Dark

Quite like how this one came out as a new default

Charcoal

Nav bar colours are probably pushing it admittedly.

Greyscale

Ultra Dark OLED mode

Pure blacks for energy saving on OLED screens

Report knighty · 1,673 views · #development
Comments ( 47 )

I actually think that's a great idea, after all, the users will choose their favorite and not just stick to one or two themes.

Pink and brown theme plz.

knighty
Site Owner

5533090
I think there will be a push in the coming years for more customizability on overall colour schemes. Google are really pushing this with the new Android version.

5533093
I see... though I'm more interested to know which other themes there'll be for the FIMFiction's users.

Yay, more dark themes!

First, thanks Knighty for asking about our opinion and making the effort to get feedback :twilightsmile:👍

More customable colour shemes would be great:twilightsmile: The best version would be if everyone can indeed select their own colours for the side. I think some browsers already allow that. If it would be possible, (I don't know I am not familiar with programming) why not split the individual parts of the the display? So everyone can set their top bar in, lets say red or blue, while the background can, seperatly fromt hat, set to grey, white or black if one like?`

If it is completly ccustomable, you don't have to worry about combinations that look good for everyone, since everyone can decide themselves what they like.

knighty
Site Owner

5533099
Having the site look my definition of "good" is important to me, so I don't want to let people just set any combination they want. Being unable to know fairly specifically what people are looking at makes it difficult to make design decisions.

Personally I like the Grayscale for dark mode. The Charcoal looks a little Halloween-y and the Ultra-Dark is just... too dark. But that's just me.

The Not-Facebook really amuses me, but sometimes I keep FB up as a side tab and it might get confusing. But if you do use that I wouldn't bitch about it. And the Solarized theme looks pretty cool, too.

Honestly, if Sollace updates the Advanced add-on, I'm probably gonna just use that anyway, so none of this would really apply to me. But if he doesn't that's my take on stuff. Good job all around!

Withouth the blueish tints, the yellowish whites of the first two make light-mode almost tolerable.

Default Dark and Greyscale are both pleasing.

I could see using Charcoal for Halloween season.

Ultra Dark OLED mode has me giddy. Maybe a Tron variant with even-more intense neon colors for non-text elements.
Or a Matrix version with old-school DOS green text!
i.ytimg.com/vi/SNXLQJa0EMA/maxresdefault.jpg

But with the option for text still being able to be white/grey/dark-grey for general story reading. Walls of neon green text could get abrasive on the ol' retinas.

knighty
Site Owner

5533109
Ultra dark is specifically just for OLEDs since it can be useful on a phone since it'll massively drop battery usage

5533112
Ahh, gotcha. Good call, then. Ignore me on that.

Hell, ignore me completely, your choice. :rainbowlaugh:

5533108
I understand the design decision part, that make sense. :eeyup:

For making the side only look what you fell looks good sounds a little bit selfish though:unsuresweetie: Having an official colourset for your side that is presented to the puplic is alright, don't get me wrong, but how I, at my PC , see the side should be what I like most in my small opinion:rainbowderp:

knighty
Site Owner

5533121
People are free to style things however they want with extensions like Stylish, etc. I have no problems with that, but when it's presented as site options it's different, and I can't just do something like say "Oh just stop using your custom extension" when suddenly a colour scheme causes problems

Cool, I like it

5533123
Ahh, I see where you are comming from. Yeah it would be unfair if people come to you if their coloursheme cause problems after an update. Or if some extensions cause unforseeable problems too. Mhh, that should indeed be prevented.
Though, and please forgive my lack of programming knowledge, if everything is customable in the options of Fimfiction, shouldn't that make the extensions unnecessary? And if one doesn't like the updates you make about a design, they just could change their option settings.
A different kind of thought would be if you let people decide what they like in the options, but also provide *pre-set-settings* with fix combinations you like? Those could be supported by you and made sure they work with the designs and updates while the 'free-colour' mode would only be a bonus?

5533108
Have presets and then have a "custom" option so people can take a theme they like and tweak it. Sure you only get 1 custom theme but I remember back when websites didn't even offer a dark mode.

I still use the default Light mode instead of the current Night mode option, but should you decide to go ahead and implement any or all of these new options, I just want to say that Charcoal looks personally appealing. :yay:

Even if you decide against implementing any new themes due to the complexity issues or any other reason, I'll still thank you for sharing some of your thoughts with us here. :twilightsmile:

I’m thinking Charcoal.

My rankings, best to worst:

1. Greyscale - this looks great. The dark gray is super easy on the eyes while all the important text elements stand out nicely, and the slightly-lighter gray of the story cards and sidebar make them easy to visually separate and makes the page structure very easy to follow.
2. Default Dark - this is almost as good as Greyscale, and I would say that the bluer shades make it look prettier - the only reason I rate it lower is because to my eye the story cards/sidebar are slightly closer in shade to the background, making them more difficult to distinguish.
3. Not-facebook - looks clean and modern, everything stands out nicely and is easy to read.
4. Charcoal - the bright nav bar feels a bit too intense, but otherwise this has the same good qualities as Greyscale and Default Dark.
5. Ultra Dark OLED mode - contrast feels a bit too intense compared to the others. Could be good as a high contrast accessibility mode, but then you'd expect the text to be brighter too.
6. Solarized inspired - the text and lines feel a bit weak and indistinct against the light brown background.

Design is looking great, it looks super clean and shiny :)

I like charcoal, but I used to use ths Luna themed one. Man, I miss pony themed display options.

The ones that I really like, in order:
1: Charcoal
2: Grayscale
3: Default Dark

But I honestly like Charcoal THE best out of all of them.

Great idea

I say go for it if you’re able to do so

These all look good.

In the dark modes (except the OLED), I think it would be better for primary buttons like "Begin Reading" to have solid colour. The outline tends to get lost in the other lines.

A colour mode I'd like to see is "late night" mode designed to avoid blue light that can interfere with sleep patterns. This mode would rremoveblue from the interface, tint light colours amber while keeping backgrounds dark.

My favourites would probably be Solarized Inspired and Charcoal (sans the "PornHub" orange, lol).

knighty
Site Owner

5533233
I actually changed those a bit after I took the screenshots annoyingly.

cdn.discordapp.com/attachments/807606693965332493/852633675979948042/unknown.png

Charcoal looks pretty neat

Digging the greyscale and ultra dark themes, that'll definitely be good for mobile devices.

ooh, charcoal looks really good.

Here's a quick mockup of what I mean with the "late night" mode:

shrink-laureate.com/fimfiction/fimfiction-late-night.jpg

This is based on evidence that exposure to blue light at night can affect your sleep cycle.

Several mobile OSs have added timed "night light" modes that adjust the screen colours at night, but the way they've chosen to do it is less than optimal.

All of them look pretty dope.

Hello Knighty, if you decide to go ahead with adding more themes to the site. Could I ask for a huge favor on behalf of the userscript/custom theme writers* that you define all the colors and accents used as CSS variables?
*"There are dozens of us!"

This way for styling scripts that adds custom elements, instead of hardcoding and worrying about the colors for each theme, it'll allow us to just do color: var(--main-bg-color) if we want the element to match a certain accent.

It'll also make it easier to develop custom themes, as in most cases, all it had to do is overwrite the variable definition and it'll apply to all elements that uses it.

I know what I'm asking for probably represents a non-trivial amount of work on your end, but I figure it's worth a shot raising the possibility for you to consider.

knighty
Site Owner

5533567
While this sounds like a no brainer on paper, the issue with css variables for colours is that you can't do colour maths with them and I do that a lot in our scss codebase. Pushing all the places I do maths into the body/root tag and using it elsewhere will be a huge nightmare. I have considered it though, I just don't know how best to handle it right now

5533590
I see. Thanks for the reply.

My largest concern is how colored text will appear on stories. I don't want text that is practically transparent (very close to white) to be super-visible in a dark theme, as that serves the opposite of its intended purpose.

It's a brilliant idea! My favourites are greyscale, charcoal and the ultra-dark mode.

I think you need to add more staff and/or outline contingencies for any possible mishaps rather than this.

Charcoal really sets a your going or already in hell mood and I think it’s because of the story shown

The ultra dark mode should have a converse for the... less sane among us.

If you do this I will be using the ultra dark theme because it looks amazing. The dark gray meshes in with the black perfectly.

Hi! I really like the Ultra dark mode idea. Though they are all very awesome from what I can see. I hope you have a fantastic day. 😁

Login or register to comment