Youtube New Experimental Template 2017 changes and Dark Mode

  • Demo Image
  • Demo Image
  • Demo Image
  • Demo Image

Most of you know by now Youtube has dragged out an experimental template.  This new template has some up and downs.
I might be the right person to explain some details more than others and some things it has like Dark Mode and why Dark Mode sucks and you should use my version instead.

Before I get to the Dark Mode  I want to let you see what I had to go through in order to figure out  Youtube got a new experimental template. So here's the story.


The Story

I'm a user of a website called: Userstyles.org I did a couple of pages about this site and what it has to offer.
The page is here: http://www.destructiveburn.com/userstyles/ 
Style your favorite websites with themes & skins created by the Stylish community.


The reason I'm bringing this site up is me and others in the community build custom CSS themes for websites like Youtube, Facebook, Google and much much more.
On August 29th I got a message from one of the users who use one of my themes called: Youtube Black & Red (-DestructiveBurn-) CSS3

He wrote: Hi there, I don't know what YouTube did but it's not working anymore, hope you will find a fix because I love this style a lot!, Thank you.

As a CSS style creator, I need to make sure my styles work and if I need to update anything it helps getting messages like this.  So I checked the style and seemed to be fine on my side.
So I replied back:

Seems to work fine. I checked it out. The only thing that's different is the Logo, but it never affected this theme. It did on my other one though which I just updated.
https://userstyles.org/styles/140505/youtube-dark-black-destructiveburn

If you have any issues you can also follow my help tutorial on my website to show you how to manually install the styles if this site still has issues with installing the code correctly.
http://www.destructiveburn.com/userstyles-help/

So about a half hour after I got another message on my theme saying this: Youtube black and red is not working properly please fixed it.
Ok now, something is wrong. 

So now I'm checking my code and making sure everything is fine.  So I type in Youtube.com and hit enter.  I find out my theme is definitely not working.  It looks like this.

yt theme 1

Now I know my code is supposed to look like this.
Black & Red.   Not with white around it.

yt theme 1

Now I know something is wrong and I'm trying to figure out if it's stylus editor, browser or what Youtube did.

So before I start I wanted to see if anyone else was having issues.  So I looked at the Style Reviews on Userstyles.org and the site had heavy traffic and piles of messages from other people commenting on other users styles saying Youtube background is broken or themes not working and I'm even getting these message and now I know something is up with Youtube.

Now I wanted to know why one of the browsers is showing Youtube Red theme while another is showing white.  I figured out only some pages on Youtube are affected.  Pages are including Main Page, Video Page, Channel Page.  All the rest are still showing the old code.  Now for me when I go to Youtube I go directly to the Creator Studio.  That page is not affected and apparently, when you click the Youtube icon it will send you to the Youtube Main page but shows the old template and not the new one.

Now everything is clear to me.  Now I see why I was still able to see the theme while others were not.  Normal users just click Youtube.com and go to the Youtube Main Page.  That loads the new template theme.  If you do go from the creator studio to the main page and hit enter on the existing https://www.youtube.com/ URL in the address bar it then will start to load the new template.

So now I needed to figure out the best the quickest way to update my themes without compromising the already existing code I created. Adding styles to youtube.com turns those styles global across YouTube.
Example: style background to green on youtube.com it will show it on every page like youtube.com/watch but if you style the background green on just youtube.com/watch it only effects that page.

So this means that if any of the elements I style on the new template using just the URL youtube.com can change the already styled code I did on other pages that use those elements like the same Class or ID

So now I have a plan.   Style my other theme Youtube Dark Black (-DestructiveBurn-) first, and inject the same new code into the other theme that I created that people were commenting on Youtube Black & Red (-DestructiveBurn-) CSS3
The reason I did the dark theme first is my code is newer and more advanced than the 2-year-old outdated code from the red theme.  Besides, it makes it easier just to change the colors after.

Now I updated both themes and they are ready for use.  It took around 9 hours to update both.

Youtube Dark Black (-DestructiveBurn-)

yt black 1

Youtube Black & Red (-DestructiveBurn-) CSS3

yt red 1

So now you're probably thinking cool story bro but why not just use the new Dark Mode theme Youtube created?
Well now will get into the dark mode talk.


Dark Mode

  • Demo Image
  • Demo Image
  • Demo Image
  • Demo Image

So now you're probably thinking cool story bro but why not just use the new Dark Mode theme Youtube created?
Well now will get into the dark mode talk.

What is Dark Mode?

Dark theme turns the light surfaces of the page dark, creating an experience ideal for night.
Your Dark Theme setting will apply to this browser only.

The Reason

You will find that people love custom themes more.
So you probably want to know why I say Dark Mode sucks.

Youtube's new template at this current date is only styled on Main Page, Video Page, Channel Page. So if you enable Dark Mode and you go into creator studio dashboard it will be white again because those pages are not set to the new template yet.   This is where my themes come in.  All pages are styled and if I do miss something it will get updated fast and people usually let me know about a problem so that helps a lot.

As for coding the site, I feel they need to add more class and IDs to the CSS to properly style some elements.  I do love how they are finally shying away from images like the icons.  Those are now coded instead of .png.  SVG to be more precise.  That means it's easy changing colours with fill:#fff;  fff is white btw :

How To Restore Old Youtube

  1. Click your icon at the top
  2. In the menu click on Restore Old Youtube

That's all you need to do.  


So what do you think about the new layout?   Do you like it or hate it?   Do you like the Dark Mode or my themes better?  BTW most Youtube themes on Userstyles are incomplete as the date of this post.

Spread the word. Share this post!

Leave Comment

Your email address will not be published. Required fields are marked *