Hoist The Colors: Site Theme Contest

[Zephyrus]

Edit 9/5/2023:

Good morning! I deeply apologize for the wait on an official closing on the Hoist the Colors Contest. I was struck down by a summer cold and took about 4 days to recover. My glorious long weekend, ruined by NyQuil and Mucinex. :v

We're so happy to see that so many of you participated! Because there are so many entries, we are going to have to figure out a way to approach this as fairly as possible since we can't exactly have 50+ or 100+ poll options!

Keep an eye out on forums or discord for any new developments. We'll try to have something up and going within the next two weeks or so.

Time has flown by since we opened forums up this past January. For the most part, everything is going quite well. We are seeing the community grow slowly but surely!

Recent site updates have given me the perfect excuse to do something I have been wanting to do for ages: christen the forums with a new contest!

Life has gotten busier for me personally. This has led, regrettably, to me having little to no energy for running multiple contests this year as I envisioned. This contest may or may not be the only one I get off the ground in 2023 so I’ve tried to make the prizes as fabulous as possible!

Before we go any further, take a moment to read this recent announcement thread:

Custom Site Themes

You’re back? Great!

Your mission, should you choose to accept it, is to create a MangaDex site theme! We are looking for the best light and best dark themes you can imagine.

The contest will run from August 14 to midnight of September 1, Eastern Standard Time.

Submission Format:
At least 1 screenshot, but no more than 3, of various pages on MangaDex showing off your theme!

Give a short blurb describing your inspiration for the theme and feel free to say something like what your favorite anime/manga/manhua/manwha is. We always like to read about our fellow weebs and get to know them!

If you choose to submit both a light theme and a dark theme, please post them in the provided light and dark submission threads in the rules below. It will make it much easier to link to when creating the judgment thread.

Prizes:
Best Dark Theme: $25 Amazon gift card, theme adopted as one of the official MD themes, Win a translated chapter from a series or doujin of your choice, from the incomparable @AlexEliot , at their discretion

Best Light Theme: $25 Amazon gift card, theme adopted as one of the official MD themes, Win a translated chapter from a series or doujin of your choice, from the incomparable @AlexEliot , at their discretion

Second Place For Dark Theme: Steam Game valued at $20, provided by the awesome @Xnot

Second Place For Light Theme: Steam Game valued at $20, provided by the awesome @Xnot

Top three entries in both Dark and Light categories will be given the opportunity to choose a custom title on forums

Rules:
1. Submissions made after midnight of September 1, Eastern Standard Time will not be considered for entry.

2. All submissions must be made in the above format in the following threads:
Dark Theme submission thread
Light Theme submission thread

3. You may submit both a light and a dark theme. It is possible to win first place dark theme, first place light theme, or both.

4. Staff are welcome to submit entries if they so choose but they will not be considered for prizes. In the event that a staff member wins first place for dark theme, light theme, or both, the entrant with the second most amount of votes in that category will be awarded the prize for that category.

5. Custom titles will be subject to staff discretion. No name will be considered that breaks XenForo Terms of Service or MD's own rules.

Determining The Winners:
After all submissions are made within the entry period, staff will create two polls for light and dark themes, respectively, open to all with forum accounts who wish to vote. The results of the poll will always be public.

Good luck and have fun!

 

[Remocracy]

Light mode themes:

 

[Richman]

If you make one with green colors, I'll be very happy.

 

[Perm]

first

 

[T10_]

Create me a good, actual dark theme like in v3 pls

 

[enustaHukiM]

If you make one with green colors, I'll be very happy.

what about turquoise / cyan flushed moeji

 

[Jxer]

it would be nice to have the same page for forums(comments) and not new page everytime

 

[GipoScribantino]

I posted a theme but I just thought: should I also add the actual colors in the post or is it fine with just a description and some images?

 

[Zephyrus]

I posted a theme but I just thought: should I also add the actual colors in the post or is it fine with just a description and some images?

You can add the colors if you choose, but I avoided making that a submission requirement because I don't want people to be lazy and merely tweak someone's submission. There are plenty of other ways to do that, I suppose, but I wanted to avoid making it that much easier for the lazy entrants. :v

 

[GipoScribantino]

You can add the colors if you choose, but I avoided making that a submission requirement because I don't want people to be lazy and merely tweak someone's submission. There are plenty of other ways to do that, I suppose, but I wanted to avoid making it that much easier for the lazy entrants. :v

I see, thanks.
Then I will leave my submission as is because copying over the colors is a hassle, too much work.

 

[Atifus]

Create me a good, actual dark theme like in v3 pls

AMOLED Dark Theme plox

 

[Valle_reading_manga]

AMOLED Dark Theme plox

Can't submit multiple (dark) themes sadly

 

[Helel]

I just want a light theme for the forum.

 

[gabgab21]

interesting

 

[Dosky]

If you make one with green colors, I'll be very happy.

I honestly can't be bothered to participate properly, but I just wanted some green accents so I set Primary and Primary L1 to #579C8E over the default dark theme and I'm satisfied.

 

[CrazySlowScans]

In case anyone wants to know what each specific color does, I've looked through the site and identified some uses for each color. It started as just the strange obscure-seeming ones, but I checked through pretty much all of them. I checked against Firefox and Edge, didn't do Chrome and mobile because I was kinda lazy. So no one else has to go through that pain:

• text color: this text goes on for miles (everywhere minus links)
• main background: can you guess what this one is...?
• translucency
  • l1: used on background on title pages towards the top (most visible right under the title and pic, makes a nice gradient)
  • each seems to be more transparent than the previous one (all the way up to fully transparent)
  • couldn't find any obvious uses of l2 through l4
• accent: used for menus, boxes, and the search bar as the background color
• accent l1-l5: used stuff drawn on top of accent boxes mostly
  • l1 is used for the background of the image loading buttons and between different scanlations of the same chapter and some accent button hovers?!?!
  • l2 is used for the background of the horizontal progress bar during reading (after it's already been loaded) and the Ctrl + K hint on the search bar
  • l3 is used for the progress bar during loading (I think?)
  • didn't see any obvious uses for l4 or l5
  • hover is for when mouse is on top of the button (usually lighter than base in dark mode)
  • active is when the button is being clicked (usually darker than base in dark mode)
• mid-tone: didn't find an obvious use in the pages I scrolled, probably should be similar to the text color though
• scrollbar colors: for the vertical scrollbar (does notaffect the horizontal progress bars)
  • doesn't work in Firefox (imagine my surprise when I tried it in Edge and actually saw a change...), but does in Edge and (presumably) Chrome
• button accent: main button color and is also used in some borderless buttons on hover (notably on the left sidebar on the home page)
• button accent (alt.): didn't find an obvious use but it should be another button color probably
• primary: this is the main color used in anything that needs to stand out (the Mangadex orange by default)
  • used in important buttons, page dividers, links (both in site and cross site), for button hover for cross-site pages (on series pages)
• primary l1: used for very few primary color buttons on hover (most notably, for the current page on the navigation sidebar)
• primary l2: couldn't find any obvious uses for it (theoretically should be the button click color for primary color buttons but...)
• status colors: for publication statuses per series (green for ongoing, blue for completed, etc)
  • blue status is also used on the side of chapters that you've already read
  • you could change these to whatever you want, but conventions are nice
• indication blue: 404 no obvious uses found
• danger: for "dangerous" buttons, can either be a bordered button for risky actions (like deleting your account) or a borderless button for meh ones (like deleting a chapter you uploaded)
• danger l1 and l2: didn't find anything for these ones either

Anyway, I hope this helps someone while they're designing their themes.

 

[Ivegotnolife]

Is the copy theme url option for creating Theme preview links?

 

[Mariusch]

I'm currently working at green oled (black) theme. Sadly, for me, there aren't enough options (like adding borders and setting their color) so I can't do something more advanced.

 

[TGN]

Wow, a site contest! I can't wait to not participate at all!

 

[Shad0wdrift]

In case anyone wants to know what each specific color does, I've looked through the site and identified some uses for each color. It started as just the strange obscure-seeming ones, but I checked through pretty much all of them. I checked against Firefox and Edge, didn't do Chrome and mobile because I was kinda lazy. So no one else has to go through that pain:

• text color: this text goes on for miles (everywhere minus links)
• main background: can you guess what this one is...?
• translucency
  • l1: used on background on title pages towards the top (most visible right under the title and pic, makes a nice gradient)
  • each seems to be more transparent than the previous one (all the way up to fully transparent)
  • couldn't find any obvious uses of l2 through l4
• accent: used for menus, boxes, and the search bar as the background color
• accent l1-l5: used stuff drawn on top of accent boxes mostly
  • l1 is used for the background of the image loading buttons and between different scanlations of the same chapter and some accent button hovers?!?!
  • l2 is used for the background of the horizontal progress bar during reading (after it's already been loaded) and the Ctrl + K hint on the search bar
  • l3 is used for the progress bar during loading (I think?)
  • didn't see any obvious uses for l4 or l5
  • hover is for when mouse is on top of the button (usually lighter than base in dark mode)
  • active is when the button is being clicked (usually darker than base in dark mode)
• mid-tone: didn't find an obvious use in the pages I scrolled, probably should be similar to the text color though
• scrollbar colors: for the vertical scrollbar (does notaffect the horizontal progress bars)
  • doesn't work in Firefox (imagine my surprise when I tried it in Edge and actually saw a change...), but does in Edge and (presumably) Chrome
• button accent: main button color and is also used in some borderless buttons on hover (notably on the left sidebar on the home page)
• button accent (alt.): didn't find an obvious use but it should be another button color probably
• primary: this is the main color used in anything that needs to stand out (the Mangadex orange by default)
  • used in important buttons, page dividers, links (both in site and cross site), for button hover for cross-site pages (on series pages)
• primary l1: used for very few primary color buttons on hover (most notably, for the current page on the navigation sidebar)
• primary l2: couldn't find any obvious uses for it (theoretically should be the button click color for primary color buttons but...)
• status colors: for publication statuses per series (green for ongoing, blue for completed, etc)
  • blue status is also used on the side of chapters that you've already read
  • you could change these to whatever you want, but conventions are nice
• indication blue: 404 no obvious uses found
• danger: for "dangerous" buttons, can either be a bordered button for risky actions (like deleting your account) or a borderless button for meh ones (like deleting a chapter you uploaded)
• danger l1 and l2: didn't find anything for these ones either

Anyway, I hope this helps someone while they're designing their themes.

Piggy-backing off of this just to mention that Indication Blue is for the End markers on completed chapters!