Dark mode

[Ilethas]

Hello!

I use this app very often, so I made an amateur dark mode to enhance the late-at-night browsing experience for myself. I thought I'd share it with you. Maybe you'll find it useful. Cheers! 😀

https://userstyles.world/style/13657/youtube-comment-viewer-dark

[sameerdash2]

Hey, this is pretty cool!

I tried it out myself and it looks great. I saw you left the Statistics section untouched, understandable since the graph's colors have to be set using javascript. But the table of statistics below the graph could still work:

Currently it's unreadable with the original dark text colors, but I got it to work by adding a CSS rule for table:

.table {
    color: inherit;
}

I do have a couple questions/curiosities-

• How do people usually install a stylesheet from Userstyles.world? The "install" button just directs me to the CSS file, so I manually pasted the styles into devtools. Perhaps there's a browser extension or something?
• in what environment does the first line @-moz-document domain("commentviewer.com") { work? I'm guessing it's telling the browser to restrict those styles to commentviewer.com, but it doesn't seem to work for me -- I had to remove that outside block. Research leads me to see that it's only supported in Firefox in certain modes, but I couldn't get it to work there either.

This is a pretty neat way to add dark mode. I wouldn't have thought it possible by just adding CSS overrides. If you're okay with it, I might add this to the site itself with some sort of "dark mode" toggle when I have time. Thanks for making it!

[Ilethas]

I'm happy you like it! :D I added your fix so that the table text is visible again. Yeah, the statistics section is the part I left mostly untouched. I think the graph and the text is all inside a canvas tag? Couldn't come up with how to modify it with css only. ^^

How do people usually install a stylesheet from Userstyles.world?

I use Stylus extension (for Chrome and Firefox) to insert additional css into websites. It's an open source fork of Stylish, which afaik did some shady stuff in the past or some such. With the extension installed, the install button on the userstyles website should add the style to Stylus and update the website with the new appearance. I think the extension is not necessary for this stuff, and you can do the same by creating a userContent.css file, but I'm lazy and wanted an extension that does everything for me.

in what environment does the first line @-moz-document domain("commentviewer.com") { work?

I think it's Stylus-specific (source). Userstyles.org wouldn't let me publish the style without this declaration. Unfortunately, I'm not very pro with how this extension works, and by the looks of it, it seems to be quite a complex tool!

If you're okay with it, I might add this to the site itself

Sure! That would also mean I contributed to your awesome app in a way! 😄

On an unrelated note; have you thought about making it possible to read comments from YouTube posts (e.g. https://www.youtube.com/post/UgkxF_UYjmR_zKPzZvh_7_VI5J6hVIFrNw1Q) in the future? I know it might be much work and you're probably busy with things; still, I guess it wouldn't hurt to ask!

[Ilethas]

I tinkered around a bit more and managed to change the statistics area to fit dark mode a bit more:

I added these variables to :root:

--graph-color: hsl(188, 65%, 65%);
--graph-selection-color: hsla(0, 0%, 100%, .1);

and these css rules:

canvas {
    margin-top: 5px;
    background-color: var(--dark-5)
}

div.u-cursor-pt {
    background: var(--graph-color) !important;
    border-color: var(--graph-color) !important;
}

div.u-select {
    background: var(--graph-selection-color);
}

Then, I made a horrible hack to replace colors drawn by the canvas with a JS script added via Violentmonkey extension:

JS code

```javascript void function () { "use strict"; void function (descriptor) { const gridColor = "hsl(200, 10%, 25%)"; const graphColor = getCssProperty("--graph-color"); Object.defineProperty(CanvasRenderingContext2D.prototype, "strokeStyle", { configurable: true, enumerable: true, get: descriptor.get, set: function (newStrokeStyle) { if (newStrokeStyle === "rgba(0,0,0,0.1)") newStrokeStyle = gridColor; if (newStrokeStyle === "blue") newStrokeStyle = graphColor; descriptor.set.call(this, newStrokeStyle); } }); }(Object.getOwnPropertyDescriptor(CanvasRenderingContext2D.prototype, "strokeStyle")); void function (descriptor) { const textColor = getCssProperty("--text-color"); Object.defineProperty(CanvasRenderingContext2D.prototype, "fillStyle", { configurable: true, enumerable: true, get: descriptor.get, set: function (newFillStyle) { if (newFillStyle === "#000") newFillStyle = textColor; descriptor.set.call(this, newFillStyle); } }); }(Object.getOwnPropertyDescriptor(CanvasRenderingContext2D.prototype, "fillStyle")); function getCssProperty(propertyName) { return window.getComputedStyle(document.body).getPropertyValue(propertyName); } }(); ```

[sameerdash2]

Sorry for the delay, been traveling.

That makes sense how Stylus reads & applies the @-moz-document rules, seems like the perfect job for an extension to do.

On an unrelated note; have you thought about making it possible to read comments from YouTube posts (e.g. https://www.youtube.com/post/UgkxF_UYjmR_zKPzZvh_7_VI5J6hVIFrNw1Q) in the future?

I sure wish it was possible! Youtube has simply not added Community posts to the API, and I don't think they plan to anytime soon. After 2015 they've generally slowed down on keeping the API up to date with YouTube features. I would like to show indicators for pinned & hearted comments (which have existed since 2016), but there is no mention of those anywhere in the API docs. Not to mention those new "Thanks" comments which include a donation, and the channel member status of commenters. Unless those are suddenly added to the API, we'll have to live without em (I have 0 interest in writing a webscraper).

I tinkered around a bit more and managed to change the statistics area to fit dark mode a bit more:

Impressive that you managed this without modifying the site's JS. I'll trust it works (too lazy to install violentmonkey) but it'd probably be more reliable to modify the site's graph.js to have it read from CSS and use those colors. Will try it sometime this week. Thanks to your script we already have an idea of what values need to change 👍

[sameerdash2]

Dark mode has been added via a button in the footer. Thanks for your work!

[Ilethas]

Hope you had a great time traveling! :D Thank you for adding the dark mode, it looks awesome! It would be cool if the app remembered the mode (light or dark), maybe with local storage or sth, but it's just a minor thing.

Youtube has simply not added Community posts to the API, and I don't think they plan to anytime soon

Ooh, that's a pity. Maybe google doesn't really want other apps to compete? I think reddit lately sort of killed third party mobile apps that had better user experience, IIRC. Yeah, webscraper would probably be a mountain of work, especially for a complex app like youtube! Anyway, I love the comment viewer as it is now!

Thanks again for making this app, it is wonderful! (Kinda late, but happy Christmas! ^^)

[sameerdash2]

App now saves the dark mode setting. I thought it wouldn't work well because the page would flash the light mode before switching to dark, but I found a way :D Merry Christmas.

[Ilethas]

It's perfect; I love it! Thank you! 😁