YouTube toont nieuw ontwerp met Dark Mode voor desktopbrowsers

YouTube werkt aan een nieuwe lay-out voor desktopbrowsers en laat gebruikers die nu al uitproberen. Het ontwerp is versimpeld en maakt gebruik van de Polymer-library. Er is ook een Dark Modus, die het kijken van filmpjes in donkere omgevingen prettiger moet maken.

In een blog zegt YouTube dat een select aantal gebruikers een voorproefje krijgt van de nieuwe lay-out. De videosite wil daarmee feedback vergaren. Gebruikers kunnen het nieuwe ontwerp te zien krijgen door in hun browser naar youtube.com/new te navigeren.

YouTube zegt in het nieuwe ontwerp gebruik te maken van material design. Het nieuwe ontwerp moet eenvoudiger, consistenter en mooier ogen. Het ontwerp is gebouwd met de Polymer-library, dat het volgens YouTube mogelijk maakt om snel nieuwe functies toe te voegen.

De nachtmodus, ofwel het Dark Theme, is volgens YouTube de eerste nieuwe functie die met Polymer is toegevoegd. De donkere modus is bedoeld voor gebruik bij weinig omgevingslicht. Een dergelijke functie zat al verborgen in YouTube, maar is in het nieuwe ontwerp eenvoudig vanuit het menu te selecteren.

Wanneer alle gebruikers het nieuwe YouTube-ontwerp te zien krijgen is nog niet bekend. Productmanager Brian Marquardt benadrukt in zijn blog dat er nog gewerkt wordt en dat er nieuwe functies aan het ontwerp worden toegevoegd.

Reacties (104)

[MarvinJames]

Zal potjandorie eens tijd worden. Ik vind het een verademing die donkere sites. Zeker 's avonds of in de nacht is dat echt 100x prettiger voor je ogen. Dus Tweakers.net!

[SkyStreaker]

Zit al sinds flink lange tijd met extension e.d. te klooien omdat ik dat ook wil. Gewoon donker. Al dat heldere wit overal doet mij zeer aan het hoofd. Bravo Youtube, eindelijk!

[Anoniem: 914197]

Je kon al een tijd de nieuwe layout + dark mode gebruiken, door de add-on EditThisCookie te installeren, en de code van PREF te vervangen door f6=7 (of al=nl&f1=50000000&f6=407&f4=4000000&f5=20030 )

[nirvanaO]

Of zonder add-on: in Chrome/ Firefox druk op F12 toets, klik op console en kopieer en plak: document.cookie = 'PREF=f6=7'
druk vervolgens op enter en herlaad (F5) daarna YT.

[Cowabungaa]

Thanks! Wel even voor degene die het missen; je moet donkere modus nog wel activeren door op je profiel opties rechts bovenin te klikken.

[Reactie gewijzigd door Cowabungaa op 24 juli 2024 06:44]

[007Nightfire]

Ik kon dit dus nergens vinden bij de opties. Hartelijk dank! Vind het een verademing die dark modus.

[thomas1907]

Weet jij toevallig ook hoe ik het oude thema van YT terug kan krijgen? Kan er nergens over vinden en zit er aan vast sinds ik een reinstall heb gedaan :C
Staat ook geen "nooduitgang" poppetje rechts onderin

[Anoniem: 914197]

Je ziet rechtsonder een deurtje en een mannetje staan... Als je daar op drukt, ga je terug naar de oude pagina! Maar YouTube gaat het binnenkort toch overal toepassen

[thomas1907]

Die is er dus juist niet meer, helaas

[Boesta]

Gewoon op YT je foto/letter klikken en onderaan zie je die optie staan..

[thomas1907]

Oh wauw! Thanks totaal overheen gekeken

[nirvanaO]

Misschien een beetje laat maar voor mij zijn er 2 oplossingen. Je kunt het zelfde doen voor de cookie maar dan document.cookie = 'PREF=0'. Of in devtools (F12) naar application, op pijltje voor cookie klikken, dan rechter muisknop op de link die tevoorschijn komt en dan op clear klikken. De laatste optie zorgt er wel voor dat je opnieuw moet inloggen.

[SkyStreaker]

En hoe komt de onwetende gebruiker daarachter? Niet iedereen heeft tevens interesse in internetpagina's ombouwen/omzeilen

[lepel]

Als Tweaker word wel verwacht dat je op z'n minst een keer Googled, dan kom je er zo achter. Een Tweaker is juist dat, iemand die op welke manier dan ook iets tweakt naar zijn eigen zin, vaak via een "onofficiele" manier.

[SkyStreaker]

Eensch, maar meerdere wegen leiden naar rome Stylish e.d.

[Annihlator]

Ik gebruik al een jaar of vijf de "Dark skin for Youtube" plugin voor Google Chrome, heeft maar een losse dag tot zover niet goed gewerkt toen de layout bijna compleet omgegooid was; Aanrader!

[Barryke]

Of probeer https://gaming.youtube.com/watch?v=aFU0t4ELtbc eens, dat is anders maar ook een donker thema.

[Reactie gewijzigd door Barryke op 24 juli 2024 06:44]

[MossMan]

Zit al sinds flink lange tijd met extension e.d. te klooien omdat ik dat ook wil. Gewoon donker. Al dat heldere wit overal doet mij zeer aan het hoofd. Bravo Youtube, eindelijk!

Hmmm... maar Google is tegelijkertijd hoofdverantwoordelijk voor de huidige witwassen van alle UI en webpagina's - niet zozeer "bravo" in mijn ogen, dus.

[Gelunox]

Voor alle overige sites kan je, in ieder geval in chrome, gebruik maken van Dark Reader. Werkt niet voor alle sites goed, maar 9 vd 10 keer is het echt een verademing. Valt met een blacklist ook per site aan of uit te zetten.

[MarvinJames]

Hihi, blacklist van de Dark Reader

Goeie tip overigens. Ga ik eens bekijken.

[stuiterveer]

https://tweakers.net/my.tnet/karmastore/ en dan custom CSS kiezen. Meteen toen ik dat had het rood ingeruild voor zwart en grijs, een heerlijke verademing zo.

[Homer J.Simpson]

Hoe kun je dat doen?

[stuiterveer]

Zodra je custom CSS hebt gekozen zie je bij de layoutinstellingen van Tweakers (https://tweakers.net/instellingen/layout/) een sectie genaamd "Custom stylesheet en RSS trackers". Hier kun je "Persoonlijke stylesheetinstellingen gebruiken" aanvinken en dan je eigen CSS regels configureren.

[Homer J.Simpson]

Helaas ben ik geen webdesigner en heb k geen idee hoe ik dat moet doen. Ik had eigenlijk gehoopt dat Tweakers daar controls voor in place zou hebben maar het ziet er helaas naar uit dat ik de diepte in moet voordat zoiets ogenschijnlijk eenvoudigs gerealiseerd kan worden

[xoniq]

Ik gebruik dit:

/*
Rode menu donker maken
*/

#menubar {
background: #333;
border: none;
box-shadow: none;
}

/*
Donker balkje onder menu verbergen
*/

#menubottombar {
display: none;
}

.keywordSearch .keyword {
background: rgba(0,0,0,0.9);
}

#search input.text {
background: rgba(255,255,255,0.1);
}

/*
Licht grijze achtergrond verduisteren
*/

#searchbar,
body {
background: #444;
color: rgba(255,255,255,0.6);
}

a.fancyButton.grey.abo.abonnee,
#search #true{
display: none;
}

#contentArea {
background: rgba(255,255,255,0.15);
border: none;
}

a {
color: rgba(255,255,255,0.7);
}

.useVisitedState a:visited{
color: rgba(255,255,255,0.2);
}

a:hover, a.highlightlink, h1, h2, h1 a, h2 a {
color: #ffc7c7;
}

#categoryBar li a{
color: white;
}

.fpaItemsWrapper.greyTopBorderBlock,
.fpaItem {
border-color: #333;
}

.bar {
background: rgba(0,0,0,0.2);
border: none;
color: rgba(255,255,255,0.6);
font-size: 13px;
}

form table td.label{
color: rgba(255,255,255,0.6);
}

[Homer J.Simpson]

Hmm, als ik dit invoer valt alle tekst weg...

[xoniq]

Het is een heel ruw dingetje. Heb intussen een hoop gewijzigd, incl. Tweakers 100% breed. Vind ik zelf prettiger, het scherm volledig benutten:

/*
Rode menu donker maken
*/

#menubar {
background: #333;
border: none;
box-shadow: none;
}

/*
Donker balkje onder menu verbergen
*/

#menubottombar {
display: none;
}

.keywordSearch .keyword {
background: rgba(0,0,0,0.9);
}

#search input.text {
background: rgba(255,255,255,0.1);
}

/*
Licht grijze achtergrond verduisteren
*/

body, #bottom div.hr, #entity, #heroBlock, #searchbar, .galleryHeadingContainer, .pageTabsContainer, .notificationsContainer {
background: #444;
color: rgba(255,255,255,0.6);
}

a.fancyButton.grey.abo.abonnee,
#search #true{
display: none;
}

#contentArea {
background: rgba(255,255,255,0.15);
border: none;
}

a {
color: #94c6e0;
}

.useVisitedState a:visited{
color: rgba(255,255,255,0.2);
}

a:hover, a.highlightlink, h1, h2, h1 a, h2 a {
color: #111;
}

#categoryBar li a{
color: white;
}

.fpaItemsWrapper.greyTopBorderBlock,
.fpaItem {
border-color: #333;
}

.bar {
background: rgba(0,0,0,0.2);
border: none;
color: rgba(255,255,255,0.6);
font-size: 13px;
}

form table td.label{
color: rgba(255,255,255,0.6);
}

.reactieBody.spotlight {
background: rgba(255,255,255,0.4);
color: #111;
}

.reactieBody.informative {
background: rgba(255,255,255,0.2);
}

.reactieContent blockquote {
color: #94c6e0;
}

.reactieBody {
background: rgba(0,0,0,0.25);
border: none;
}

.reactieHeader .userLink{
color: #94c6e0;
}

#search .keywordSearch{
border-width: 0 0 2px 0;
border-radius: 5px;
border-color: #8c8c8c;
}

#search input.submit {
background-color: #303030;
border: none;
}

p.author, p.author a {
color: #333;
}

p.author a.feedback {
color: #ff9696;
}

.downloadUpdateHistory ul li .date {
color: #aaa;
}

.downloadDetails {
background: #484848;
}

div.info, div.error, div.message, div.faq, form.insertMessage, form.form1, form.form2, #folders, #myprofilecontainer {
background: #444;
border: none;
box-shadow: none;
}

.messagecontent .message-quote-div {
border: none;
background: #222;
}

a.user {
color: #ccc;
}

.message .poster .thumb {
opacity: 0.4;
}

.resizewarning {
display: none;
}

img.rml.resized {
border: none;
}

div.message.ownpost {
background: #777;
}

.message .poster .usertitle {
color: #ffa6a6;
}

table.highlights td {
border-color: #444;
}

table.highlights {
border-color: transparent;
}

div#newsletter {
display: none;
}

#bottom{
display:none;
}

* {
box-sizing: border-box;
}

.mainColumn.frontpage {
width: 100%;
border: none;
}

.secondColumn.frontpage {
display: none;
}

#menu, #search, #contentArea, #ticker, #about, .articleColumn, div#commentColumn, #reacties, .messagecontent {
width: 100%;
}

[Reactie gewijzigd door xoniq op 24 juli 2024 06:44]

[Homer J.Simpson]

Wel cool dat het allemaal aangepast kan worden. Dank je voor de code, ik ga gelijk proberen wat het doet

[xoniq]

Ik deed dat voorheen al met een browser plugin om CSS aan te passen, voor sommige dingen als volledige breedte enz, heb het nu ook maar in m'n account gedaan, zodat het niet browser afhankelijk is.

[ChristopheS]

Jij bent een held! Ik zou je los trakteren op lunch voor dit!

[xoniq]

Graag gedaan. Het is iets wat ik zelf even snel heb gedaan in 10 minuten... Moet het nog finetunen, wat mooier maken.

[b2vjfvj75gjx7]

body *,
body #menubar,
body .scoreButton,
body p.author > span + a {
background-image: none !important;
background-color: #000 !important;
color: #999 !important;
border-color: #999 !important;
}

body #menu {
opacity: .75 !important;
}

body ::selection {
background-color: #999 !important;
color: #000 !important;
}

Dark-mode, hardcore style...

https://s21.postimg.org/ouvs3iy93/arghhhhhhhhhhhhhh.png

- edit - Zit al drie jaar in de Windows 10 Mobile app van Tweakers...

[Reactie gewijzigd door b2vjfvj75gjx7 op 24 juli 2024 06:44]

[MrHankey]

Css code is zon beetje les 1 in programmeren. Sowieso goed om dat iig eens te proberen?

https://youtu.be/VAOxQF9qkQ0 in 9 minuten heb je het.

[Homer J.Simpson]

Niet iedereen is een programmeur.. In mijn geval heb ik ooit wel geprogrammeerd maar er een hartgrondige hekel aan.

[Tigo2000]

Kijk eens naar https://justgetflux.com/. Daarnaast zou ik graag alles met Dark Mode zien, inclusief Tweakers +1

[vali]

Op Android en W10M maakt ik gebruik van UC browser. Daar kan je de browser op dark mode zetten en dan worden websites (ook tweakers.net) donker weergegeven. Werkt ideaal

[mikesmit]

Waarom denk je dat Windows 10 zo een verademing is... alles kan in dark mode, inclusief edge

[Morress]

Youporn is toch al donk...wait,what

[HubD1]

Totdat je de video op fullscreen zet...

[Goldstrike91]

Gewoon F.lux installeren is sowieso beter voor je ogen mocht je andere websites tegenkomen met een zwarte achtergrond. Bij Mac en iOS kan je Night Shift gebruiken als alternatief. Aanrader! Ik heb hem zelf automatisch ingesteld en daardoor merk je vaak niet eens het verschil. Succes!

[fender89]

Op Tweakers.net kan dit , hetzij in mindere mate, al sinds het begin van de nieuwe website layout.

Inloggen: Profiel > Instellingen >Layout > achtergrond. Hier vind je een slider van 'licht' naar 'donker'

Oke, Niet echt "dark modus" , maar je kunt op z'n minst de felle witte achtergrond naar licht grijs veranderen (Wat ik zelf ook prettiger vind overigens)

[NonTweaker]

Heb daarstraks ens even gekeken op "https://www.youtube.com/new " maar er stond toen al : This preview is closed... for now..

En zoals sommigen hier al vermelden, ik maak gebruik van een extensie / plug-in voor :

Firefox : Greasemonkey

Chrome( ium) : Tampermonkey

Waar je bij Userstyles.org terecht kunt voor veel scripts om je looks van o.a. YouTube naar smaak aan te passen...

Ik gebruik op dit moment :Youtube Black & Red (-DestructiveBurn-) CSS3, by DestructiveBurn
Die vind je hier : https://userstyles.org/styles/browse?search_terms=youtube
Deze is ook nog een beetje animated..

Voor een snelle "darkmode "voor andere websites.. die ik niet elke dag lees, gebruik ik darkreader behalve de extra opties is de simpele aan/uit mogelijkheid wel handig..

Wil je 't allemaal nog wat fraaier voor websites met video.. dan kun je turnofthelights proberen , heel veel opties en funkties o.a. een ambilight funktie zoals bij Phillips tv 's

[Ruvetuve]

Ik heb de nieuwe theme wel maar zie nergens de dark modus. Lijkt me goede toevoeging voor in de avond!

[dakathefox]

De andere antwoorden zijn niet helemaal compleet. Je moet eerst de nieuwe interface activeren en dat doe je hier: www.youtube.com/new. Vervolgens kun je overschakelen naar de nieuwe interface door inderdaad op je profielfoto te klikken en daar de dark interface te activeren.

[Ruvetuve]

thanks voor jullie reacties, ik ben eerst naar /new gegaan en geklikt op Nu gebruiken. Zie echter nog niet de donkere modus onder mijn foto.. wellicht even afwachten nog.

[TheNephilim]

Het werkt hier inderdaad ook niet. Geen nieuw ontwerp en geen mogelijkheid om Dark aan te zetten.

[Anonymoussaurus]

Klik op je accountfoto rechtsboven en daar zie je "donkere modus" staan.

[xDiglett]

Je moet rechtsboven op je profielfoto klikken, en dan donkere modus klikken.

[itsyaboy]

Dark mode voor alles is eigenlijk ook het beste. Minder energieconsumptie (toch?) en veel prettiger voor de ogen. Misschien zelfs een gezondheidswinst t.a.v. slaapproblemen?

[Bokitoman]

Zelfde energieconsumptie, een pixel aan is een pixel aan.

[WeiserMaster]

Bij OLED niet.
Zwarte pixel = pixel "uit".

[Reactie gewijzigd door WeiserMaster op 24 juli 2024 06:44]

[iceheart]

Hoeveel PC's hebben een OLED monitor? Op een enkeling met die schier onbetaalbare dell niemand toch? En als je YouTube wil kijken op de TV waar je toevallig een PC aan wil hebben hangen zul je dat doorgaans via de app van de TV doen.

[Xipotec]

Is dat echt zo? er komt toch echt minder licht van het scherm. Of staat dezelfde lamp nogsteeds aan maar wordt hij daarna gedimd ofzo ergens door?

[Naud1234]

De achtergrondverlichting van een LCD of LED monitor staat altijd volledig aan, wat voor kleur het scherm ook heeft.

Een pixel heeft 3 subpixels en elke subpixel kan open of (gedeeltelijk) dicht staan. Als je een zwarte pixel wilt weergeven zijn alle 3 de subpixels volledig dicht, maar de achtergrondverlichting blijft even fel branden, dus het kost evenveel stroom. Het kost eigenlijk een heel klein beetje extra stroom om een zwarte pixel weer te geven omdat het een heel klein beetje stroom kost om de pixel te sluiten, maar dat verschil is minimaal. Licht kost veel meer stroom. Er schijnt trouwens nog steeds een klein beetje licht door een zwarte pixel heen omdat hij niet 100% kan sluiten, dus zwart ziet er donkergrijs uit. Het valt vooral op als je een groot vlak zwart hebt en zwart de rand van het scherm raakt en je het kan vergelijken met de zwarte rand (meeste randen zijn zwart) van je scherm of als het licht in je kamer uitstaat en je het kan vergelijken met de duisternis.

De subpixels van OLED schermen zijn losse LED's (en LG tv's hebben nog een 4e witte subpixel), die hun eigen helderheid kunnen instellen. Als je een zwarte pixel wilt weergeven, staan alle subpixels uit, dus is de pixel volledig uit en dus volledig zwart en het contrast is oneindig.

[ToFast]

Voor (am)oled en plasma geldt dat veel zwart minder energieverbruik betekent. Voor LCD is dit niet het geval, daarbij kost het nagenoeg hetzelfde aan energie om een zwart of wit beeld weer te geven.

Het merendeel van de schermen(monitoren, tv's en telefoonschermpjes) zijn nog LCD (ips, va panelen met een backlight, dan wel of niet een Led-backlight).

[Dreamvoid]

Als ze backlight dimming ondersteunen dan helpt het wel natuurlijk.

[Rebels]

crt ook minder verbruik

[Moi_in_actie]

Heb dit al geruime tijd middels een extension in Chrome, maar mooi om te zien dat Youtube dit nu ook standaard aanbiedt. Vooral 's avonds is een zwarte achtergrond veel rustiger voor de ogen. Heb het eveneens bij de Tweakers website gedaan via een custom CSS.

[WeiserMaster]

Heb je de CSS toevallig ergens al als copy-paste klaarstaan?

[Slashdotter]

Welke extensie is dat?

[NeFoRcE]

Deze draai ik:

https://chrome.google.com...dkjnoafhfelkjpchpaepjknad

[batjes]

Ik snap sowieso eigenlijk al niet waarom elke website zo graag loopt te pronken met een zo licht mogelijk thema (kuch kuch, hallo Tweakers). In plaats van licht op donker. Het kijkt gewoon veel rustiger, en op redelijk wat smartphones gaat met veel zwart de accu gewoon een stuk langer mee.

Nu kom ik nog maar weinig op Youtube, maar ik maakte in het verleden daar gebruik van een night mode thema van de Firefox addon Stylish.

Tweakers ook lang op de mobiel in reading view bekeken tot een medetweaker me hielp met een custom CSS. Ik vind zelf een -lichte- grijswaarde voor de text op een pikzwarte #000 achtergrond het fijnste. Alhoewel #FFF text wat makkelijker leest op een (lees: mijn) mobiel

[Rinzwind]

Witte tekst op zwarte achtergrond is voor mij juist erg onrustig. Geeft spookbeelden (denk "inbrandeffect") op netvlies. Gewoon helderheid snachts maximaal terugdraaien doet ook al wonderen... en dat bespaard echt batterij

[Reactie gewijzigd door Rinzwind op 24 juli 2024 06:44]

[batjes]

Dat heb ik op een normaal beeldscherm ook, vandaar dat ik liever een grijstint heb, dat clashed wat minder met elkaar. Maar op mijn smartphone(s) vind ik wit op zwart toch wat fijner.

[SuperVeloce]

Heb ik al heel lang via een Chrome extensie "Magic Actions for Youtube". Vind het mooier/fijner dan witte achtergrond.

[comitatus]

Ik gebruik exact dezelfde extensie werkt voor mijn ook het best. Toch moet ik bekennen dat ik lang niet altijd gebruik maak van deze functie. De witte heeft sterk mijn voorkeur.

[Pataar]

Het is eventjes wennen, maar ik vind het er in ieder geval mooi uitzien. YouTube zoals het er nu uitziet bestaat al eventjes en ik vind dit een mooie vooruitgang. Het schonere design sluit natuurlijk ook beter aan bij de nieuwere Android designs.

De nacht modus zie ik mijzelf nog niet snel gebruiken, ik vind de witte letters er erg lelijk en onoverzichtelijk uitzien.

[Cogency]

Op fora en dat soort sites vind ik het ook vervelend (al moet ik zeggen dat het een stuk beter is tegenwoordig met de hogere resoluties). Maar op een site bij youtube het lezen van tekst bijna niet van toepassing is heb ik er niet zo'n moeite mee.

[pineapple23]

Gaaf, waar ik een Dark Theme kan in stellen doe ik dat. Op mijn Android kijk ik ook altijd of ik iets donker kan instellen.

[Capa]

De 'Donkere modus' optie kan je vinden onder je profielmenu, door rechts bovenin op je foto (of de letter bij gebrek aan een foto) te klikken.
Bij mij duurde het wel even voordat dit menu aangepast was na activeren van het nieuwe thema.

[Cogency]

Nu nog theather mode dat mee scaled en ik ben happy. (Zie edit 2 ! )
Ik heb op mijn Ultrawide vaak een youtube tab links open staan als ik aan de rechterkant van mijn scherm aan het rommelen ben, maar de speler blijft hetzelfde formaat jammergenoeg.
En zo'n dark mode is dan ook wel fijn ipv dat witte in me face.

edit Net naar youtube/new gegaan en dark mode geprobeerd, echt heel stuk fijner voor mijn ogen.

Edit2: en Theather mode is ook aangepast en nu ook echt een theather mode browser word gevuld nu. YAY!

[Reactie gewijzigd door Cogency op 24 juli 2024 06:44]