css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. This is a no-sense css architecture. You don't need the data-type attribute since you can change css custom properties right in within the browser. Define what's primary, secondary, etc.. and set it to use his relative custom property var(--primary-color).

  2. @equinusocio Hi Mattía! Thanks for your comment. Obviously it is not essential to use the data-type attribute. There are lots of ways to create a customizable theme and I tried this option just for fun. This playground was made to try out ideas and this was my purpose. Of course, if you want you can try your own way too!

  3. I use custom themes at work and there is better ways to do that. :) 👍🏻 This work is nice but i'm worried about the lesson that it can give to others :)

  4. @equinusocio Ok, thanks again! I will continue experimenting with new possibilities and I will also put your recommendations into practice. Have a nice weekend!

  5. Amazing concept, you works really good

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.