luca.rares.andrei's blog

Dark mode plzzz
By luca.rares.andrei, history, 4 hours ago, In English

I usually get to solve some problems at evening to night, and I think it's pretty obvious what's happening. This white just burns me...

Any way to make it dark? All the "Dark Mode" extensions I try using are just reversing the colours on the page, which makes it look cursed, and applies the effect to every website. Also, the white is so bright, the black version (reversed/negative) is too dark, still hurting my eyes.

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

»
4 hours ago, hide # |
← Rev. 6  
Vote: I like it 0 Vote: I do not like it

hey so we will be using tampermonkey for dark mode,

install it then search www.codeforces.com in it, it will show you some scripts

you need to install 2 scripts, material codeforces, and codeforces dark logo

just install them,

then give the extension permission to edit the codeforces's files, and set the developer mode on

after that

you need to edit material codeforces's code, and make it look like

// ==UserScript==
// @name          Material Codeforces
// @namespace     http://userstyles.org
// @description	  Material design for codeforces.com.
// @author        inceon
// @homepage      https://userstyles.org/styles/131799
// @include       http://mirror.codeforces.com/*
// @include       https://mirror.codeforces.com/*
// @include       http://*.codeforces.com/*
// @include       https://*.codeforces.com/*
// @run-at        document-start
// @version       0.20160920204542
// ==/UserScript==
(function() {
    document.documentElement.style.filter = 'invert(1) hue-rotate(180deg)';
    document.querySelectorAll('img, video, iframe, picture').forEach(el => el.style.filter = 'invert(1) hue-rotate(180deg)');
    var css = [
	"*{",
	" 	padding-top: 0;   ",
	"}",
	"body{",
	"    padding-top: 2.5em;",
	"    background: #edeef0;",
	"    overflow-x: hidden;",
	"}",
	"",
	"/* Шапка сайта */",
	"",
	".roundbox.menu-box{",
	" 	background: #4C9B83;",
	"    border-bottom: 1px solid #2D8268;",
	"    position: absolute;",
	"    top: 0;",
	"    left: 0;",
	"    width: 100%;",
	"    z-index: 150;",
	"}",
	".menu-box {",
	" 	margin: 0;   ",
	"    padding-top: 0;",
	"}",
	".menu-list-container {",
	"    background: #4C9B83;",
	"}",
	".menu-list li{",
	"    height: 2.5em;",
	"    top: 0;",
	"    margin-right: 0;",
	"    padding: 0 1em;",
	"}",
	".menu-list li:hover,",
	".menu-list li.current{",
	"	border: none;",
	"    cursor: pointer;",
	"    background: #2D8268;",
	"}",
	".menu-list li a{",
	"    height: 2.5em;",
	" 	color: #fdfdfd;   ",
	"    line-height: inherit;",
	"}",
	".roundbox .roundbox-lt, .roundbox .roundbox-lb, .roundbox .roundbox-rt, .roundbox .roundbox-rb,",
	".lt, .lb, .rt, .rb{",
	" 	display: none;",
	"    background: none;   ",
	"}",
	".search {",
	" 	position: relative;",
	"    margin: 6px 1em 0 0;",
	"    padding: 2px 2px 2px 20px;",
	"    width: auto;",
	"    border-radius: 5px;",
	"    background-color: #2D8268;",
	"    border: 1px solid #2D8268;",
	"}",
	".search:focus {",
	"    background-color: #fff;",
	"}",
	"",
	".topic{",
	" 	background: #fff;",
	"    padding: 15px;",
	"    margin: 0 0 15px;",
	"    box-shadow: 0 0 0 1px #7BBBA8;",
	"    border-radius: 2px;",
	"}",
	"#pageContent > div:first-child{",
	" 	margin: 0 !important;  ",
	"    border-radius: 3px;",
	"}",
	"",
	".avatar img{",
	" 	border-radius: 5px;   ",
	"}",
	"",
	"/* Header */",
	"",
	"#header{",
	" 	margin-bottom: -23px;   ",
	"}",
	"",
	"/* Logo */",
	"",
	"#header > div:first-child a img{",
	"    display: block;",
	"    -moz-box-sizing: border-box;",
	"    box-sizing: border-box;",
	"    background: url(https://pp.vk.me/c604829/v604829517/1228/f1OJwrtSylk.jpg) no-repeat;",
	"    background-size: cover;",
	"    width: 280px; /* Width of new image */",
	"    height: 60px; /* Height of new image */",
	"    padding-left: 280px; /* Equal to width of new image */",
	"}",
	"",
	"/* Отображение условия */",
	"",
	".problemindexholder {",
	"    background: #fff;",
	" 	box-shadow: 0 1px 0 0 #d7d8db, 0 0 0 1px #e3e4e8;",
	"    border-radius: 2px;  ",
	"    padding: 10px 5px;",
	"}",
	"div.ttypography{",
	" 	margin: 0 !important;   ",
	"}",
	"",
	"/* Двигающаясь менюшка */",
	"",
	".second-level-menu-list{",
	" 	margin-left: 7px;   ",
	"}",
	"",
	".second-level-menu-list{",
	"    height: 27px;",
	" 	border-radius: 5px;",
	"}",
	"",
	".second-level-menu-list li{",
	" 	background: #4C9B83;  ",
	"}",
	".second-level-menu-list li a{",
	" 	color: #fdfdfd;   ",
	"    padding: 3px;",
	"}",
	".second-level-menu-list li.backLava,",
	".second-level-menu-list li.backLava .leftLava,",
	".second-level-menu-list li.backLava .bottomLava{",
	" 	background: #2D8268;",
	"}",
	"",
	"/* Список задач контеста */",
	"",
	".problems .accepted-problem td.id{",
	" 	border-left: 7px solid #d4edc9;",
	"}",
	"",
	".problems .rejected-problem td.id {",
	"    border-left: 7px solid #ffe3e3 !important;",
	"}",
	"",
	"/* Результаты */",
	"",
	".datatable{",
	" 	border-radius: 5px;   ",
	"    background: #7BBBA8 !important;",
	"}",
	"",
	".datatable > div:nth-child(5){",
	"    color: #06533C;",
	"    font-weight: bold;",
	"}",
	"",
	"/* Правая колонка */",
	"",
	".handleBox.ac_input{",
	"    border: none;",
	" 	border-bottom: 2px solid rgba(0,0,0,0.12); ",
	"    font-size: 16px;",
	"    font-family: \"Helvetica\",\"Arial\",sans-serif;",
	"    margin: 0;",
	"    padding: 4px 0;",
	"}",
	"",
	".handleBox.ac_input:focus{",
	"    outline: 0 !important;",
	"    transition: ease-in-out 0.4s;",
	"    border-bottom: 2px solid rgba(0,0,255,0.5); ",
	"}",
	"",
	".roundbox.sidebox{",
	"/*     padding: 1px; */",
	"    border: 1px solid #7BBBA8;",
	"    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);",
	"    border-radius: 2px;   ",
	"}",
	"",
	".roundbox .caption {",
	"    margin: 0;",
	"}",
	"",
	".roundbox .titled {",
	" 	background: #7BBBA8;   ",
	"    border: none;",
	"    padding: 0.2em 0 0.4em 0.5em;",
	"    color: #06533C;",
	"}",
	"",
	".personal-sidebar .nav-links li a{",
	" 	text-decoration: none;",
	"    color: #2D8268;",
	"    padding: 5px 0px;",
	"}",
	"",
	".personal-sidebar .nav-links li a:hover{",
	"    color: #002017;",
	"    text-decoration: underline;",
	"}	",
	"",
	"/* Переключатель языков, ссылка на профиль */",
	"",
	".lang-chooser div:nth-child(2) a{",
	"    padding: 5px;",
	"    color: #196E54;",
	"    text-decoration: none;",
	"}",
	"",
	".lang-chooser div:nth-child(2) a:hover{",
	"	text-decoration: underline;",
	"}",
	"    ",
	"/* Footer */",
	"#footer{",
	" 	border-top: 1px solid #AEC2D9; ",
	"    color: #7996B7;",
	"    padding-bottom: 20px;",
	"}",
	"#footer a{",
	"    color: #1E426A;",
	"    text-decoration: none;",
	"}",
	"#footer a:hover{",
	"    text-decoration: underline;",
	"}"
].join("\n");
if (typeof GM_addStyle != "undefined") {
	GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
	PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
	addStyle(css);
} else {
	var node = document.createElement("style");
	node.type = "text/css";
	node.appendChild(document.createTextNode(css));
	var heads = document.getElementsByTagName("head");
	if (heads.length > 0) {
		heads[0].appendChild(node);
	} else {
		// no head yet, stick it whereever
		document.documentElement.appendChild(node);
	}
}
})();

after that your codeforces will look amazing!, like the best dark mode you can achieve rn, also with a luxury kinda flavour , but your image's will have got its color inverted after that, so just screenshot your pfp and then set the already color inverted pfp as your original pfp, so it will look normal in your extension

cons:your pfp will look weird to others, and any kind of image will be inverted by colour.

here, have a look

https://ibb.co/bRJsFj3t https://ibb.co/CK19BGSK https://ibb.co/bj95XZ5R https://ibb.co/35h60Nj4 https://ibb.co/KcvG6dTL https://ibb.co/hRgPrwjX https://ibb.co/SXMjW5ct https://ibb.co/LzksVnc8

but beware, sometime, you can see 2 elements glitching over each other, and the only solution is to Ctrl+R whenever 2 element glitch over each other

→ Reply
  • »
    »
    3 hours ago, hide # ^ |
    ← Rev. 2  
    Vote: I like it 0 Vote: I do not like it

    at least, spoiler the code, it's taking up too much space

    and also, why lying of you not gonna sign in to your accounts every again? Signed in to X-detector 25 hours ago

    → Reply
»
3 hours ago, hide # |
 
Vote: I like it 0 Vote: I do not like it

actually, it can be done it settings, but dark mode doesn't look really good, that's why I only like it when the website has it's own, like lichess.org for example, have a good dark mode, but you can make silver-like mode is perfect, how to get it:

  1. go to settings

  2. scroll down, and find "manage colors", there is on firefox, but should be on chrome too, but not sure

  3. click on that, and then you can select the colors

then it is whatever you choose, and perfect for reading problems, I use it for some time now, and I think silver-like mode is best

→ Reply