12-05-20 ~ Use Stylus to apply a theme to any website

One of my absolute favorite chrome extensions is one called Stylus. It’s an extension that allows you to apply themes to any website you want using CSS code

Styles can be a lot of different things, here is an example of a theme for Crunchyroll;

Before:

After:

This is a combination of 2 themes, (and a dark mode extension unrelated to stylus), one is a cherry blossom background, and one is a style that replaces the crunchyroll logo with “Hello :D”

Here’s another example with the trending page for today on Youtube:

Before:

After:

This is only one theme, which does multiple things, you can choose a background image, change the search bar from a bar to a line, change the color scheme, and some more things not even present in this screenshot.

Using the chrome extension button, you can turn any style for the current website on or off at any time, or clicking “manage” to go to the manage page, basically like a home screen for Stylus

In the manage page, you can create, edit, or delete styles from the stylus manage page, just by clicking the extension on the tab bar, and clicking “manage”.

In this page, you’re not gonna get very far without some css code. Don’t know how to write code for a style? That’s no problem, click “Get styles” at the bottom of the page, and it will take you to Stylish. A website that has thousands of styles from talented coders, for almost any website you can think of. 

There’s so many good ones there, you’d be surprised at how many styles there are for plenty of different websites. Even some that are smaller stuff, instead of entire themes, like the previously mentioned Custom Crunchyroll logo or Colored Youtube bar. 

Simply download them, (customize them first if available) and they’ll appear in your styles list on your manage page, and change the look of that page, you can edit the code however you want, you can also delete it if you so choose, or temporarily deactivate it.

The code I used for my cherry blossom background is actually a modified version of a code designed for use on Discord. I found it on the website Better Discord and changed the website to Crunchyroll (at the bottom of the code, select “Applies to: URLs on the domain:” and replace the url) and it worked just fine.

Here’s the other styles I used in this blog post:
Customizable Logo for Crunchyroll

Fade+ for Youtube

I hope you all find styles you like :)

here's the extension:

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne