sigma_g's blog

By sigma_g, history, 19 months ago, In English

Hi all, I have made a dark theme for Codeforces. Solving problems on Codeforces at night becomes very tough due to the completely white theme. Even in the morning, staring at the white screen for long does not help people who develop eye strain quickly, like I do. Hence, I made this dark theme.

I was not content with simply using a color inverter for the website, as there are many subtle elements, especially the rating colors, which would lose their essence when inverted.

It will surely take your eyes some time to adapt to this new format of colors. However, I would really suggest you to use it for at least a day or two.

I have been using this daily for over two months now, so it's safe to assume it's very well battle-tested :) (except the problem setters page though, I am not really sure how that looks) I have added dark theme formatting for the source code viewer and submission editor as well!

Currently it's a userscript. Please find installation instructions on the GitHub repo. If enough people start using this, I might package this into a Chrome extension.

I would really welcome any constructive feedback that you have regarding it :)

Thank you!


Quick access installation link

 
 
 
 
  • Vote: I like it
  • +108
  • Vote: I do not like it

»
19 months ago, # |
  Vote: I like it +3 Vote: I do not like it

Its quite good and impressive. Do you have any suggestion for vscode theme that has similar color theme.

  • »
    »
    19 months ago, # ^ |
      Vote: I like it 0 Vote: I do not like it

    Hi, thanks for your feedback! You might want to look into Monokai, that's the code styling sheet I used for this userscript. (Press Ctrl-K Ctrl-T to open theme menu, and select the Monokai theme in VS Code.)

  • »
    »
    9 months ago, # ^ |
      Vote: I like it -8 Vote: I do not like it

    My personal favorite is Winter is Coming Theme. Do give it a try

»
19 months ago, # |
  Vote: I like it +58 Vote: I do not like it

If enough people start using this, I might package this into a Chrome extension.

Firefox users left the chat

  • »
    »
    19 months ago, # ^ |
    Rev. 2   Vote: I like it +8 Vote: I do not like it

    In fact Chrome extensions can be used in Firefox but not vice versa :D (edit: I mean when you use the Firefox API instead of Chrome API, for which Firefox has support too).

  • »
    »
    19 months ago, # ^ |
      Vote: I like it +18 Vote: I do not like it

    Hi, sorry I didn't mention Firefox. In this case though, it's not at all difficult to make an FF port, since I am not using any browser specific APIs until now. So stay tuned :)

»
19 months ago, # |
  Vote: I like it +2 Vote: I do not like it

great work...

»
19 months ago, # |
  Vote: I like it +2 Vote: I do not like it

This is lit. Great Work. Thank You

Now I'm writing the comments on a white background ( comment box's background is white ) and please make Codeforces logo dark too :)

  • »
    »
    19 months ago, # ^ |
      Vote: I like it 0 Vote: I do not like it

    Hi, thanks for the feedback. I just pushed an update that should make comment boxes dark too :)

    Also, I am a bit hesitant to change the CF logo, since I am not sure if it's even allowed in the first place. In fact, the CODE part of the logo is entirely black so that would require changing the colors entirely.

  • »
    »
    6 months ago, # ^ |
      Vote: I like it +60 Vote: I do not like it

    This is lit.

    I can't think of a better insult to this project.

»
19 months ago, # |
  Vote: I like it +6 Vote: I do not like it

For me the script doesn't work. I use Windows 10, test with the latest version of browsers Chrome, Firefox, Opera, Edge & with 4.8 version of Tampermonkey (latest too). Only facebook "likes" area in upper right corner became black, all other remained white. Could you help to fix it?

»
17 months ago, # |
  Vote: I like it -37 Vote: I do not like it

Der geya Kya bhosdi wale

»
17 months ago, # |
Rev. 3   Vote: I like it -37 Vote: I do not like it

Sale bherwe Teri maa chod dunga, Abe namard agar gaand me dem h to reply kar . Bhosdi wale Tere pichwade me goli Mar dunga.

»
17 months ago, # |
  Vote: I like it 0 Vote: I do not like it

I mean Dark Reader basically does the same thing.

  • »
    »
    4 months ago, # ^ |
      Vote: I like it 0 Vote: I do not like it

    I'm been using this for so long that I completely forgot codeforces was white

»
17 months ago, # |
  Vote: I like it 0 Vote: I do not like it

Good attention to detail right there.

»
17 months ago, # |
  Vote: I like it 0 Vote: I do not like it

good work . Thanks.

»
14 months ago, # |
  Vote: I like it 0 Vote: I do not like it

Codeforces should have a default dark theme.

»
11 months ago, # |
  Vote: I like it +9 Vote: I do not like it

if you want to change the logo to dark mode:

Install style as userscript

»
9 months ago, # |
  Vote: I like it 0 Vote: I do not like it

Thank you indeed

»
6 months ago, # |
  Vote: I like it +8 Vote: I do not like it

This is really amazing dude!! Thanks,i needed this :) Perfect Job!

»
6 months ago, # |
  Vote: I like it 0 Vote: I do not like it

I need to change the font color and size(problem page),could you please point me which line to edit

  • »
    »
    6 months ago, # ^ |
      Vote: I like it 0 Vote: I do not like it

    I'm not sure if I understood correctly, but mostly you can get the desired result by (1) inspecting the actual webpage to see which element selector (id, class) corresponds to the element you want to change (2) going to the userscript and finding that corresponding selector being used (3) adjusting the property values accordingly. If you cannot find these values then let me know via direct message.

»
5 months ago, # |
  Vote: I like it 0 Vote: I do not like it

Thanks a lot for your help.You saved my EYES

»
4 months ago, # |
Rev. 2   Vote: I like it +5 Vote: I do not like it

sigma_g Kudos to your efforts. It's a great tool and enriches the experience of using codeforces.

»
4 months ago, # |
  Vote: I like it 0 Vote: I do not like it

In "status" page my submissions are not highlighted which used to be without the dark theme. If you could fix this it would be nicer. PS — Great job

  • »
    »
    4 months ago, # ^ |
      Vote: I like it 0 Vote: I do not like it

    Hi, thanks for reporting the bug, I have created a new issue for this. Please see here. I will fix it and push out an update soon.

»
4 months ago, # |
Rev. 2   Vote: I like it 0 Vote: I do not like it

Great work! May I know how to disable it if I change my mind sometime?

Edit: It's right there in the tampermonkey extension.

img

»
6 weeks ago, # |
  Vote: I like it +8 Vote: I do not like it

Thanks for this! Appreciate all the work you've put into it.

»
5 weeks ago, # |
  Vote: I like it +10 Vote: I do not like it

Okay one question. I tried to install tapermonkey in the process and I shows me that it can read and "change" all the data on websites I visit. Does not it compromises my security just for a black theme ?

  • »
    »
    5 weeks ago, # ^ |
      Vote: I like it +8 Vote: I do not like it

    TamperMonkey just basically acts as you to run scripts: but it's a lot more powerful than chrome's built in console.

    Because it needs to edit the webpage, it needs your permission. Of course, if you somehow download a virusy userscript, then of course, tampermonkey then becomes a much larger liability.

    • »
      »
      »
      4 weeks ago, # ^ |
        Vote: I like it 0 Vote: I do not like it

      Pasting some suspicious script to TamperMonkey and telling it to run it (which I believe you will never do) is one issue, but the other is: what if TamperMonkey itself gets compromised to run some script you didn't tell it to do. You can (at least in Chrome) limit permission of any extension to particular domains. Just click in top right corner: extensions and when list of all extensions you have pops up click "more actions", go to "This can read and change site data" and limit its permission e.g. only to codeforces.

      • »
        »
        »
        »
        4 weeks ago, # ^ |
          Vote: I like it +18 Vote: I do not like it

        And speaking of security of this script. sigma_g why does the script has following two lines:

        // @match https://calendar.google.com/calendar/embed* // @match https://www.facebook.com/v2.8/plugins/like.php*

        which, unless anyone installing it spots it and removes them, mean: TamperMonkey will run the script on on those domains as well. Moreover after I removed them, the dark theme on codeforces.com still works fine.

        • »
          »
          »
          »
          »
          4 weeks ago, # ^ |
          Rev. 2   Vote: I like it 0 Vote: I do not like it

          Hi, the first match URL is for the embedded Google calendar on the Codeforces Calendar page (hence the /embed) and the second is for the Facebook Like plugin that is present on the home page of Codeforces (for logged in users) (hence the /plugins/like.php).

          I'd like to clarify that these match directives won't let the userscript run on the entire domain, but only on the very specific path that has been mentioned. You can of course remove those two match directives and the extension will still work fine for the remaining pages. I wanted to support all the different components on Codeforces, hence I had added them in.

          If you're still unsure, you can check out the entire code on GitHub, in particular, the small JavaScript file with its very clear and descriptive code, to ensure it does nothing suspicious. If you're worried that my account may start pushing evil scripts in the future, you can also disable automatic updates for the userscript (enabled by default) from inside Tampermonkey.

          I completely agree with your concern for security, and I hope the above has helped clear any confusion there might have been. I try to be as transparent as possible in these regards, and would welcome additional comments/questions. Thanks!

»
4 weeks ago, # |
  Vote: I like it 0 Vote: I do not like it

U Can Use this Chrome Extension on Any Site
High Contrast + Dark Theme !! Enjoy

»
2 weeks ago, # |
  Vote: I like it +8 Vote: I do not like it

There is one feature, that doesn't work at all with your plugin. It is highlighting last submission you've viewed in hacking mode red and all other you've viewed green. I added following code at the end of your script and it fixed it.

Sadly it's quite an ugly solution given it fetches all submission elements every second, but I couldn't come up with anything better, especially as it can be tested only during div1/div2 round.

function fix_colors() {
    var acceptedsubmissions = document.querySelectorAll('[acceptedsubmissionid]')
    var len = acceptedsubmissions.length
    for (var i = 0; i < len; ++i) {
        var elem = acceptedsubmissions[i];
        if (elem.style.backgroundColor == 'rgb(212, 237, 201)') {
            elem.style.setProperty('background-color', 'rgb(53, 92, 36)', 'important')
        }
        else if (elem.style.backgroundColor == 'rgb(255, 227, 227)') {
            elem.style.setProperty('background-color', 'rgb(89, 43, 43)', 'important')
        }
    }
}
window.setInterval(fix_colors, 1000)

  • »
    »
    2 weeks ago, # ^ |
      Vote: I like it +10 Vote: I do not like it

    You can probably make it a lot less expensive by replacing document with the lowest common DOM container of all the [acceptedsubmissionid] nodes (so lcdc.querySelectorAll instead of document.querySelectorAll).

    I'll not merge this into the main repo since, as you said, it's a per second computation, and it doesn't seem to be super relevant to most people. And anyone who wants to add it can add from your comment.

    In any case, thanks again!