Creating a User Style For The New DeviantArt

May 29, 2020

The cool thing about DeviantArt's new design is that it's super easy to make user style skins for. Our code uses CSS variables, so you can pretty much skin the entire site in just a few dozen lines of CSS. (If you're not familiar with CSS variables -- it's super simple.) It'll take some tweaking to make it look perfect on all pages, but it's super simple to make a skin that works across most of the site. You can use a browser extension like Stylish. For example, this code will replace the background color and top nav across the whole site on the DARK theme: :root { --D1:#202035; } Background color and top nav on the LIGHT theme: :root { --L1:#d0cde4; } The other cool thing is that there are variables for the light, dark, and green theme. So you could create a skin that has three variants, that will automatically switch when you use DeviantArt's theme toggle. I just threw together a purple skin in <20 lines of CSS and 90% of the site is customized. It took less than half