raitaroh / youtube-deepdark

Videos should only be watched in the dark. May the dark be kinder on thine eyes. (YouTube dark theme)

YouTube-DeepDark

Videos should only be watched in the dark. May the dark be kinder on thine eyes. (YouTube dark theme)

About

These are dark themes for YouTube inspired by FT DeepDark.

Credit for some of the the color palettes in use. (@KDE, @horst3180, @linuxmint, Firefox, YouTube and Discord)

Code also taken from youtube-custom-colors-video-progress-bar for the video theming.

Installing

Using a browser extension:

• Stylus - get the addon for Firefox, Chrome and Opera.
• This is only available using Stylus (see the documentation).
• Also see the documentation for information about customizing the theme. 🎉

NOTE: This CAN work with Stylish in Google Chrome, BUT I don't support Stylish.

You can also install all my themes at once from here.

Material Version

Classic Version

This version is defunct. You can still use this theme with the old YouTube. Please follow some instructions from elsewhere. In short, you need to change a cookie value.

For screenshots, check out the images folder.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

MechaLynx 🐛 💻

Maxime RF 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

youtube-deepdark's Issues

theme does not affect the scrollbar

Good day.
i have a theme installed via Stylus (version 4.1.5) and recently noticed that whatever i change in the theme settings does not affect the scrollbar. and on the trends page it looks weird, like this.
how to fix it?
thanks.

White borders on video page

I'm getting this white borders on video pages, when not enabling the dark mode from youtube itself (with the dark mode they are gone):

Major performance issues when modifying DOM

I have an extension, Translate this Page which when double clicking text inserts a popup that allows you to translate the selected text.

After installing this theme with Stylus, I try doing the same and there is significant lag, like several seconds, before input is registered once the extension tries to create the popup.

How can I debug what causes this, as without that I really love the theme and would like to use it.

[BUG] Notification Number icon not matching color theme as it once did

Theme is set to orange dark, this number icon indicating number of notifications used to match the theme, now it is just showing as red.

text in search bar almost invisible (Firefox Stylus)

text in search bar almost invisible (Firefox Stylus)

Please help with the theme to be applied on some parts that are not covered by default

So I am using some extensions for youtube to improve the usage but as i installed your style ...I noticed that it doesn't cover all the parts

So here are the images below from what i mean

Video Description Color

I'm using the Purple Dark theme through YouTube Enhancer. At some point in the last few days, the description text color changed from white to purple. Up to that point only channel names and some other minor text elements were purple. I much preferred the white color for the video description.
This happens with other variants of DeepDark as well, the accent color (wrongfully?) affects the video description text.

No theme for Youtube Studio

Hey, while installing the theme I could see the regex does have 'studio' in it but not sure if this was ever meant to work there, if not I'll probably make it work there and create a pull request. Thanks for the great theme!

YT Shorts only - Thumbs up or down icons

Issue happens only when I select YouTube-DeepDark (by RaitaroH) or YouTube-DeepDark (custom) from Enhancer for YouTube, not YouTube's Official Dark Theme. And the trouble is only in a YouTube Shorts viewing section on my Desktop. I haven't tried on my mobile with Enhancer.
I am not able to see weather I have chosen Thumbs-Up 👍 or Thumbs-down👎. Neither the icon's circled background or the Icon itself changes color after a selection is made. This makes it impossible to see the selected Like or Dislike. Additionally, this issue does not apply to the 16:9 video viewing screen. The Thumbs-Up icon does change and reflects the selection made.
Thank you in advance for the look into it.

Hyperinks arent in another color than normal text

It would be good if they are either highlighted in another color or you can change both text colors seperately in the custom theme manager. Firefox extention "Enhancer for Youtube"

Rate video panel on the home page and the shortcut panel

Rate video panel on the home page

This is how it looks in the light theme

Shortcut panel (Shift+/):

Version 2.2.0 doesn't work with Tampermonkey

Earlier versions worked but 2.2.0 doesn't work at all. I use userscript from userstyles, Classic version.

YouTube new update: Ambient mode

Hi there, it seems we're getting more and more "material-ish" updates to YouTube,
and one of the recent changes seem to be dynamic backlight thingy

ShareX_firefox_20221101-104105.mp4

(ignore the fps, it was some recording setting issue)

Unfortunately, some sections currently have fixed backgrounds with the userstyle active:

Body scrollbar style

Hi! How about to make right scrollbar the same as others on the page?

body::-webkit-scrollbar-thumb {
        height:56px;
        background:hsla(0, 0%, 53.3%, .4);
}
body::-webkit-scrollbar {
        width:8px;
}

author message in live chat

@MaximeRF can you find a video where the youtuber actually posts something. It seems that message is white and looks bad, but I cannot find a stream where that happens.
Edit: I did manage to find a live vid but the message by the author seems fine.

Colour fix for 9anime theme

Is it possible to change the background-hover colour for the Notification section?

I absolutely love the 9anime theme - its just the only problem I have is that the purple colour is too dark when hovering over items in the Notification section (clicking the bell in the top right to display the menu and when moving your mouse over each item in that list - the lighter background with the dark purple text collides and makes the selected item hard to read)

I'm sure this is probably a simple fix, I just don't know what custom css to add (if any).
Please can you help me with this?

Channel name doesn't follow main color anymore

Hi there.

I use YouTube-DeepDark with Stylus on latest Firefox on Linux.
The only thing I changed was the main color by editing the CSS file through Stylus.

Today, I noticed the channel name has turned white instead of having the main color (example video from the screenshot):

This also happens in private windows.

Any help to revert this new behavior is appreciated.
Thanks in advance.

Join button is not colorized

The Join button under the video, next to the Subscribe button is never colorized. I've checked & unchecked the "Use blue join button" option, tried many different themes, but the Join button is never colorized. It remains the same color as other buttons. The Subscribe button next to it is colorized when the option for it is set.

New preview popups not styled

Now, on a main page if you hover over some video from a grid you get a popup with preview and some basic controls.

Currently this style does not affect this part.

Shorts broken

Logo is unthemed

Theme is broken mainly for the logo- I am assuming the labels for the css might have changed

Popup set as main background color

Set popups as second background color

Dracula Theme is missing

I am a fan of Dracula Theme. I use it pretty much everywhere. But this theme is not available for YouTube. If possible, please add this to YouTube-DeepDark theme set. Thank you.

Live video chat

Live video chat isn't styled.
I'll try to fix, I'm just letting this here to let you know and remind myself later on.

No hover over behavior for action buttons.

I guess this could be a stylistic choice, but I like YT default themes use of hover over on the action buttons under the video (thumbs up/down, share, etc.) None of the themes here seem to have any hover over behavior defined for the action buttons. I prefer the feedback that it offers. Not sure if it was an intentional omission?

Request: AdaptaNoktoBreath Colours

This will be the last one I'll be requesting (for now) since I only use three of the DD styles. Like the past two, I also wrote the preset for this one. Unfortunately, it's only for the Material version, since I'm unsure on how to get to the old format.

/*AdaptaNoktoBreath Colours*/
		--main-color: #1abc9c;
		--main-background: #222d32;
		--second-background: #263238;
		--hover-background: #2a353b;
		--main-text: #ffffff;
		--dimmer-text: #9b9b9b;

Checkbox in setting isn’t styled when YouTube's native dark theme is on

See the GIF below:

Copy text in share is Black on black in dark themes

Create playlist form

@RaitaroH These are the rulesets to fix the form that appears when we click the "Save" button to add the video we are watching to a playlist.

#create-playlist-form .input-content.paper-input-container label
{
	color: var(--main-text) !important;
}

#create-playlist-form input.style-scope.paper-input::placeholder
{
	color: var(--dimmer-text) !important;
}

#create-playlist-form .underline.is-highlighted.paper-input-container .focused-line.paper-input-container
{
    border-bottom-color: var(--main-text) !important;
}

#create-playlist-form #label.ytd-privacy-dropdown-item-renderer
{
	color: var(--main-text) !important;
}

#create-playlist-form ytd-privacy-dropdown-item-renderer.iron-selected
{
	background-color: var(--hover-background) !important;
}

Where's the "Purple-Dark" preset?

I am using the Enhancer for Youtube extension,and i am using the dark theme there made by you with the "Purple-Dark" preset. But in the .css files here and in stylus,i can't see it. Did it get removed?

Playlist alert, movie offer module, movie title

@RaitaroH Here are some issues and the rulesets to fix them, I let you decide where to insert them:

ytd-alert-with-button-renderer[type="INFO"]
{
	background-color: var(--hover-background) !important;
}
ytd-alert-with-button-renderer[type="INFO"] #text.ytd-alert-with-button-renderer
{
	color: var(--main-text) !important;
}

#header.ytd-movie-offer-module-renderer
{
	background-color: var(--second-background) !important;
}
ytd-button-renderer.ytd-movie-offer-module-renderer.style-primary[is-paper-button] {
	background-color: var(--main-color) !important;
}
#wide-clickable-area.ytd-movie-offer-module-renderer {
	background-color: var(--hover-background) !important;
}
#info.ytd-movie-offer-module-renderer {
	color: var(--main-text) !important;
}
h3.ytd-compact-movie-renderer {
	color: var(--main-text) !important;
}

Search icon is too dark

Can barely see the 🔍 icon

I would suggest to make it white

channel name not readable

this fixed it
#channel-name {color: #fff !important;}

Dropdown list - dark purple not readable

i suggest this solution:

.sbpqs_a {color: #e2de20 !important;}

so that we obtain :

Color name text for Mod, Member and Non-Member

How to disable this? Its so hard to distinguish mod and member when watching livestream on youtube.
I'm use this theme from Enchancer for Youtube

White selected entry in comment sorting menu

Mobile support

Hi. On my phone most colours aren't affected. Could you implement smaller screen sizes?

Shorts breaks themes

Shorts opened in a new tab or directly wont have theme applied and will carry over you you click youtube logo after it.

Reloading fixes it

Checkboxes, material settings page, buttons

Okay @RaitaroH . No idea why they serve so many interfaces...
Someone has reported that when we click the "Not interested" link and then the "TELL US WHY" link it's not possible to see if checkboxes are checked:


But I don't have this issue...
And someone else has reported that the sidebar in settings page is not themed but again I don't have this issue. Maybe you will be able to see what's wrong.

Originally posted by @MaximeRF in #30 (comment)

Subscribe button no longer correct color

As of today, I've noticed the Subscribe button stays the usual Youtube red color, no matter what theme I use. (Tested on all DeepDark variants, screenshot shows Vertex Dark)

On subscribed channels, it still turns the correct color for the theme (dark grey, in this case).

color of `paper-list-box` is still white

here is where the item is and the code correspoding to it:

Support to install style as a userscript

There was this option in userstyles.org for the classic version of this theme to install as a userscript. It would be nice to have it for the new version directly from github.

Remove youtube vars

I have concluded that removing the youtube vars makes the theme perform better. So their removal is due.

Unfortunately doing so breaks the theme (like a lot). The branch I made for this could be used so it doesn't interfere with the main stuff.

@mechalynx

Polymer placeholders

Yeah, maybe leave an issue here before we forget. @mechalynx

[bug] Chrome scrollbar-width issue

Hello, recently I upgraded Chrome version to latest and Chrome added support for scrollbar-width

Previously this setting only affected Firefox, but now it also affect Chrome, however, there is issue with it. All styles that applying to Firefox scrollbar have -moz- prefixes and when Chrome used scrollbar-width: thin it remove all Chrome-related scrollbar styles (like ::-webkit-scrollbar), so they not working anymore. This break YouTube custom scrollbars.

I used this style within Enhancer for YouTube addon.

If I remove addon styles you will see scrollbar like that:

However if I apply them again it will make them looks like classic Windows scrollbars, except being thin:

The issue come from this line:

Within your styles it probably this line:
https://github.com/RaitaroH/YouTube-DeepDark/blob/master/YouTubeDeepDarkMaterial.user.css#L362C3-L362C36

Video added to playlist text color and like color in Shorts

I use this theme directly from Enhancer for YouTube, so I'm not sure if these issues are already fixed.

Anyway, I'll let you know of the problems.

1. When I add a video to a custom playlist, the text shown is in black, despite the background already being black. Can you make the text white/gray?
   
   The text is in Brazilian Portuguese, but I think that language doesn't matter.

2. The like button in the Shorts section doesn't get colored the same way as a like in a normal video.

When hovering over it in the Shorts section, it works flawlessly:

I think that this problem (number two) is a problem with the extension itself. So I will mention @MaximeRF as well.

That's all. Thank you for your attention.

Like and Dislike Buttons for YouTube Shorts View

Using YouTube-DeepDark (by RaitaroH) Enhancer: YouTube Shorts view only - Whenever the like and dislike button is pressed, they do not change to highlight. The function is successful but can easily depress because you cannot see the validation due to not seeing the color change.

Top left logo seems messed up.

As of today, the top left Youtube logo seems messed up. The color of the Red Play won't change with the theme and the letter color is wrong.