/314/ - Site Discussion
Discuss 314chan, it's policies etc. textboard for now,

Posting mode: Reply

If you're having issues with the cache, use 314chan.co

If you have suggestions for improving 314chan, visit the new 314chan discord, Join our Matrix instance, or post on /314/

314chan site bounty system thread

Wanna make money for making features for 314chan?

enlist in team314chan's feature bounty program!

Current list:

  1. $20 USD - Fix thread updating; if thread's json file is updated, create new post view, and fill contents.
  2. $5 USD - Ensure "Nighty Time" (Night mode) CSS loads first if Option is enabled, so it doesn't flash a bright color, then set the correct CSS
  3. thanks anon for the fix. 'preciate ya!
  4. $10 USD Create a new unique CSS style for 314chan's imageboard pages, and front page. First place will get $10 USD, all others will get $3.
For 2, its probably because the theme loading is inside an event like document.ready or document.on('domContentLoaded'). If night time mode just loads a second css file, you should add it in the head without waiting for domcontent loaded, so it adds the css file after the "base" css file immediately (i.e. before the body loads). No need to pay. Should be a pretty simple fix, unless I am mistaken :)
UPDATE: so after trying to implement this on my own site, I can confirm: impossible without an ugly hack
since dynamically adding a link tag or changing the href of an existing one will load the new cs file asynchronously, no matter what you do it will always be prone to flashing.

The best you can do is a synchronous ajax request to download the css, then setting it in a style attribute. That's the only way I can think that will actually block until the dark theme css is inserted. I seriously don't recommend that.
Unlucky, so the dom paints before JavaScript loads? That's a little crazy.
This works but the ajax will cause slightly slower page load.
There is a better way.

Since the link is inserted dynamically, the browser does not wait for its href or src tag to fully load before painting DOM.

But you can employ strategy similar to >>23
You add a link tag dynically when they enable darkmode, and store the css text itself in localstorage. then on subsequent pageviews, insert it as an inline style tag with the css from localstorage. And then insert a link element into the head dynamically AFTER that and update the css in localstorage each time to prevent caching issues. As long as you keep localstorage under 10MB (css is mich smaller than that) its not a bad solution imo
Solution: https://pastebin.com/QYnbsawh
Its a modified part of https://www.314chan.org/js/common.js
Look for the line "if (localStorage.getItem('o_night_css') == 1) {" and remove that if statement, then put the code in the pastebin right after the first if statement in that whole script "if (localStorage.getItem("firsttime") != 1)" so it comes before "$(document).ready(function () {"
>>24 >>26
Hey, I noticed you changed the javascript and it works great now :) No more flash of light theme, goes straight to dark.
read the FAQ/Post Formatting before posting

Delete post [File Only] Password

- Haruko + mitsuba -

  In memory of 314chan's co-founder, goo.