Stylish Theme for Sololearn

Question

If you use the Stylish addon w/ firefox or chrome web browsers.. I just made a quick dark theme for those who program at night.

https://userstyles.org/styles/136979/sololearn-darkness

Answer 1

I just use in the app Settings >> SETTINGS >> Night Mode >> On

Answer 2

Its a nice theme, but the texts are not quite visible (http://prnt.sc/dppa5y)
I recommend using a brighter color for the texts, pastel pink or orchid is quite nice.

Answer 3

thanks for explanatio n thats looking good and it's helpful
you probably use Mozilla Firefox there are similar cool tools in chrome too

Answer 4

it's nice, but can you please tell how are they made

Answer 5

If you want to make a stylish theme just click on the stylish addon icon in the toolbar. Then click 'write new style'. You will have three options, for this Url, the www.website.com, or website.com (domain). I always choose the last option which is for the domain and will apply the style across all the pages for the site.

After, it will open a new page which will allow you to add html and css code to override the default web page css rules. In order for changes to take you have to match the same rules as the web page. The way to find the rules is to right click anywhere you want to change something and select inspect(q). That will show you the html, css rules for the web page area you selected. You want to primarily look for background: or color: rules and change those to customize the background and text colors. Sometimes its tricky to find certain elements but keep trying, it gets easier the more you do it.

Also, best to start out by modifying someone else's styles. You can figure most things sooner from breaking and fixing an installed style.

Answer 6

Thanks for the feedback, I just started the theme and will update the dimmer text colors as soon as I can. If you want to change the colors yourself it's easy to do. Just follow the instructions in my second post to edit the style. Most of the text color fall under this rule...

.materialInput input, h1, h2, span, h1 a, h1, .recentArticles ul li a, .archives ul li a, .articleContent p, .courseItem a:hover .courseDescription div,
.courseItem a:hover .courseDescription h1, .codeBlock .tooltip, .noteBlock .tooltip {
color: #ddd!important;
}

Try changing the hex color to #ffd1dc!important, i think that's pastel pink.