There are a few browser extensions out there that let you alter the style of pages you visit. If you have some CSS tricks you use, you can post them here. Here's one a lot of people might like.
Do you know if this will remain on the page when others view it? Or is it just for personal use/preference? I imagine the dark mode is only applied while logged in, but I would really love to increase the customization of my character's current page, not just for myself, but for my friends' viewing as well.
I would await confirmation from the OP, but making an assumption based on the logic of how this works -
It should apply for anyone using the same web browser on the same computer as you, regardless of who is logged in. If however your friends are all using their own computers, they would also need to install the extension plugin into their browser, and add those code exceptions for the specific pages themselves. The same thing applies for any of those friends who are just viewing your character profile - the changes YOU make for yourself on your browser will not be visible to someone else in their browser.
Do you know if this will remain on the page when others view it? Or is it just for personal use/preference? I imagine the dark mode is only applied while logged in, but I would really love to increase the customization of my character's current page, not just for myself, but for my friends' viewing as well.
If you edit your Browser's CSS, it will apply on your browser (on the computer you do the customization on) regardless if you are logged in or not. As blueboo42 said, those customization will be visible only for you, and on the browser you did them on.
I will come back to this topic when I have more time - the Darkmode CSS has changed a bit and I will post a Firefox guide - you do not need a plugin currently but it still is a bit tech savvy to do...
And so, after a bit of playing around in Firefox and Chrome, I updated the CSS a bit to fix and tweaks some stuff (profile banner picture for DnD Beyond Staff - namely Stormknight BadEye and OboeLauren who all have some profile banners, TinyMCE text colour on Firefox - can't change it on chrome).
On Chrome, you will still need an extension (see the OP's suggestion - works fine) to enable CSS customization on your browser's end.
On Firefox, there is a file you can add to your Firefox Profile:
SuperUser forum's Answer
Open Firefox and press to show the top menu, then click on Help → Troubleshooting Information
Click the Open Folder button beside the Profile Folder entry
Create a folder named chrome in the directory that opens
As for the code, I have two version of it, a Chrome one and a Firefox one. The only difference is that the Firefox one wraps everything in url-prefix query, to make sure they only applies on the forums.
Firefox CSS Wrapping Code For bievety's sake, I only added the extra thing you need on Firefox here. Look at the Chrome Code and merge the two together, pasting it once between the { } - you can remove the /* COMMENTS */.
That being sorted out of the way via some client-side customization, adding an actual integrated darkmode to the forums would be a nice addition! :P
Changelog
v1.0 - Initial adaptation of the OP version.
v1.1 - Minor changes Changed "source-quote .quote-source" to have a its dark background - added !important to it. Changed the "Tools" button to have its white text - added !important to it. Changed the heading and li styling in Firefox' TinyMCE.
I use Dark Reader to make all websites easier to read but also Stylus to change the CSS of the character sheet to hide the social media icons, give the character name a cool font, and left-justify the sheet itself on my larger monitor. My CSS skills aren't the best (it's been years since I've really used them) but it works for me:
I've been keeping this updated for quite sometime (long before underdark mode). It features quite a few customization options for the user. It includes most of the website, full character sheet customization including dice. An example of such in my profile picture here. More examples in the link.
I've been keeping this updated for quite sometime (long before underdark mode). It features quite a few customization options for the user. It includes most of the website, full character sheet customization including dice. An example of such in my profile picture here. More example in the link.
Personally, I like the underdark mode (I just recently got into DnD... and Beyond) so I haven't felt the need to edit the char sheet. As for the rest of the website, I can see how widening the dark mode to the rest of it could be useful!
Regarding Stylus, I haven't heard of it... I noticed the stylesheet contains variables - VERY useful. Is that a functionality coming from Stylus? I will certainly give it a try. I also have a github account, so I might help you out there as well if I find a nice tweak.
I will admit I like the style of the darkmode of the forum/this thread (the dark blueish hue) so maybe the base CSS will need some finetuning for my taste but I will see how it goes.
I understand that this is still "client-side" edition of the CSS... But who knows if the staff might not someday implement it on their end! I know I wouldn't mind, and seeing you posted the code under GPL 3 license, I guess you wouldn't either! :D
Personally, I like the underdark mode (I just recently got into DnD... and Beyond) so I haven't felt the need to edit the char sheet. As for the rest of the website, I can see how widening the dark mode to the rest of it could be useful!
Regarding Stylus, I haven't heard of it... I noticed the stylesheet contains variables - VERY useful. Is that a functionality coming from Stylus? I will certainly give it a try. I also have a github account, so I might help you out there as well if I find a nice tweak.
I will admit I like the style of the darkmode of the forum/this thread (the dark blueish hue) so maybe the base CSS will need some finetuning for my taste but I will see how it goes.
I understand that this is still "client-side" edition of the CSS... But who knows if the staff might not someday implement it on their end! I know I wouldn't mind, and seeing you posted the code under GPL 3 license, I guess you wouldn't either! :D
I really like the extension myself especially for something like this where I might have a different style for each character. I don't have to edit a full sheet just which pages they apply to and then select the colors/settings by clicking the extension.
The underdark mode for characters is near identical if you set the dropdown to use Dndbeyond's background rather than a flat color or custom background. I wouldn't be surprised if someone saw this style sheet and used it as an example to test different options and see what they wanted it's so similar. Otherwise they essentially had the same ideas which is great either way were on the same wave length.
See spoiler
From their release video:
vs my tweet during their DDBStyle contest before underdark mode. I'd also had this available on the dndbeyond forums quite some time before this contest.
I mostly DM so the dark mode for the rest of the site has been a near requirement for my eyes to not burn when switching between screens/tabs. Most of my stuff is in dark mode and the constant swap and refocusing my eyes is rough. Hence why I started this a couple years back.
There are a few changes and bug fixes that dndbeyond hasn't gotten around to in this as well. You may or may not notice them as they're minor or in obscure places. With the exception of the my dice page which has obvious changes to the layout. Others like the scrollable conditions/defenses on the character sheet and a warning when you go to publish homebrew were things I saw on the forums as requests to Dndbeyond and thought they were great ideas that I, my group or others would get use of and implemented.
I would definitely appreciate any suggestions/help you might have. Note that this is very much not done in the "proper" way. I do it the very lazy but works way most of the time so you'll see odd formatting/ordering and use of !important where it isn't needed.
You'll also see that being unable to properly target the iFrames contents on this site (at least last I checked I couldn't figure it out) I elect to allow the user to choose to invert them or not (default inveted) so things like this forums reply box and homebrew tools are just inverted instead of having proper css changes. Those savvy enough can also apply custom filters to the iFrames to match their preferred color scheme.
Your right about the license and that's exactly why I posted it the way I did. 😉
Yeah, darkmode is a very nice feature to offer and having it really helps the eyes!
I can see you started that a while ago. You don't get nearly 2k lines of CSS without having spent quite some time playing around with it!
Having played with the forums only, I haven't noticed much of the little bugs. iFrames are a pain, because of the potential "external" content rules, but I noticed that Firefox didn't have the same issues when changing the background (whereas Chrome doesn't allow it). Having a "inversion" rule is a good work around I guess.
Not a fan of adding a custom profile background pictures in the sheet though. :P If the sheet gets more visibility, one might wanna keep it as close to the original content and design of the DND Beyond staff and keep it a feature to staff. Just my opinion though, and I would totally be for having a Companion Sheet to supplement that baseline Darkmode.
I dunno if I'll have time to play around with Stylus and your CSS today (which is a new plugin for me and about 2k lines of figuring what you did, why and if I like that XD ) but I'll get back to it for sure!
Yeah, darkmode is a very nice feature to offer and having it really helps the eyes!
I can see you started that a while ago. You don't get nearly 2k lines of CSS without having spent quite some time playing around with it!
Having played with the forums only, I haven't noticed much of the little bugs. iFrames are a pain, because of the potential "external" content rules, but I noticed that Firefox didn't have the same issues when changing the background (whereas Chrome doesn't allow it). Having a "inversion" rule is a good work around I guess.
Not a fan of adding a custom profile background pictures in the sheet though. :P If the sheet gets more visibility, one might wanna keep it as close to the original content and design of the DND Beyond staff and keep it a feature to staff. Just my opinion though, and I would totally be for having a Companion Sheet to supplement that baseline Darkmode.
I dunno if I'll have time to play around with Stylus and your CSS today (which is a new plugin for me and about 2k lines of figuring what you did, why and if I like that XD ) but I'll get back to it for sure!
That's fair about the custom profile background on the forums - other than the one I was playing with for myself it's all the original staff ones I added back since they were overridden by other styles. I've removed my own profile customization from the uploaded sheet and created a private side sheet. I can see how it might cause confusion. Thanks for the input!
That's fair about the custom profile background on the forums - other than the one I was playing with for myself it's all the original staff ones I added back since they were overridden by other styles. I've removed my own profile customization from the uploaded sheet and created a private side sheet. I can see how it might cause confusion. Thanks for the input!
In all honesty, having a guide (though one might already exist - haven't looked) to actually add an additional CSS to customize one's own profile and banner might be a cool idea! Bonus points if it works for both light and dark theme of the website!
Just publish the code you removed from the git into a nicely formatted post/tutorial on its own thread! :D I'll make sure to pass by and give it some love!
There are a few browser extensions out there that let you alter the style of pages you visit. If you have some CSS tricks you use, you can post them here. Here's one a lot of people might like.
I use this extension:
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
If you want to use a custom background, use the following script:
Here's mine:
Feature Requests || Homebrew FAQ || Pricing FAQ || Hardcovers FAQ || Snippet Codes || Tooltips
DDB Guides & FAQs, Class Guides, Character Builds, Game Guides, Useful Websites, and WOTC Resources
Night mode for the forums:
I've set it up so that it only functions on the following pages: dndbeyond.com/forum, dndbeyond.com/new-content
Feature Requests || Homebrew FAQ || Pricing FAQ || Hardcovers FAQ || Snippet Codes || Tooltips
DDB Guides & FAQs, Class Guides, Character Builds, Game Guides, Useful Websites, and WOTC Resources
Do you know if this will remain on the page when others view it? Or is it just for personal use/preference? I imagine the dark mode is only applied while logged in, but I would really love to increase the customization of my character's current page, not just for myself, but for my friends' viewing as well.
bruh
I would await confirmation from the OP, but making an assumption based on the logic of how this works -
It should apply for anyone using the same web browser on the same computer as you, regardless of who is logged in. If however your friends are all using their own computers, they would also need to install the extension plugin into their browser, and add those code exceptions for the specific pages themselves. The same thing applies for any of those friends who are just viewing your character profile - the changes YOU make for yourself on your browser will not be visible to someone else in their browser.
I hope that makes sense!
If you edit your Browser's CSS, it will apply on your browser (on the computer you do the customization on) regardless if you are logged in or not. As blueboo42 said, those customization will be visible only for you, and on the browser you did them on.
I will come back to this topic when I have more time - the Darkmode CSS has changed a bit and I will post a Firefox guide - you do not need a plugin currently but it still is a bit tech savvy to do...
Hyrkali
Full DNDBeyond.com in Dark Mode? Yes please!
And so, after a bit of playing around in Firefox and Chrome, I updated the CSS a bit to fix and tweaks some stuff (profile banner picture for DnD Beyond Staff - namely Stormknight BadEye and OboeLauren who all have some profile banners, TinyMCE text colour on Firefox - can't change it on chrome).
On Chrome, you will still need an extension (see the OP's suggestion - works fine) to enable CSS customization on your browser's end.
On Firefox, there is a file you can add to your Firefox Profile:
As for the code, I have two version of it, a Chrome one and a Firefox one. The only difference is that the Firefox one wraps everything in url-prefix query, to make sure they only applies on the forums.
Firefox CSS Wrapping Code
For bievety's sake, I only added the extra thing you need on Firefox here. Look at the Chrome Code and merge the two together, pasting it once between the { } - you can remove the /* COMMENTS */.
Chrome Code CSS - v1.1
That being sorted out of the way via some client-side customization, adding an actual integrated darkmode to the forums would be a nice addition! :P
Changelog
Changed "source-quote .quote-source" to have a its dark background - added !important to it.
Changed the "Tools" button to have its white text - added !important to it.
Changed the heading and li styling in Firefox' TinyMCE.
Hyrkali
Full DNDBeyond.com in Dark Mode? Yes please!
I use Dark Reader to make all websites easier to read but also Stylus to change the CSS of the character sheet to hide the social media icons, give the character name a cool font, and left-justify the sheet itself on my larger monitor. My CSS skills aren't the best (it's been years since I've really used them) but it works for me:
Before
https://imgur.com/VZfM2zy
After
https://imgur.com/xMRU5sq
Note: Dark Reader and Stlyus are both Chrome extensions.
I've been keeping this updated for quite sometime (long before underdark mode). It features quite a few customization options for the user. It includes most of the website, full character sheet customization including dice. An example of such in my profile picture here. More examples in the link.
https://github.com/Azmoria/dndbeyonddark
For those that don't want to go external here's a video example of the dice/character sheet. This was a while ago and there's been some updates since.
How to get your dice to look like the ones in my profile picture and a full site dark mode.
Tutorial thread by Hyrkali
Oh! Fellow CSS lovers! :D
Personally, I like the underdark mode (I just recently got into DnD... and Beyond) so I haven't felt the need to edit the char sheet. As for the rest of the website, I can see how widening the dark mode to the rest of it could be useful!
Regarding Stylus, I haven't heard of it... I noticed the stylesheet contains variables - VERY useful. Is that a functionality coming from Stylus?
I will certainly give it a try. I also have a github account, so I might help you out there as well if I find a nice tweak.
I will admit I like the style of the darkmode of the forum/this thread (the dark blueish hue) so maybe the base CSS will need some finetuning for my taste but I will see how it goes.
I understand that this is still "client-side" edition of the CSS... But who knows if the staff might not someday implement it on their end! I know I wouldn't mind, and seeing you posted the code under GPL 3 license, I guess you wouldn't either! :D
Hyrkali
Full DNDBeyond.com in Dark Mode? Yes please!
Yes, the variables are read by stylus and you can set them in the dropdown after clicking the extension. You can read up more about it here https://github.com/openstyles/stylus/wiki/Usercss
I really like the extension myself especially for something like this where I might have a different style for each character. I don't have to edit a full sheet just which pages they apply to and then select the colors/settings by clicking the extension.
The underdark mode for characters is near identical if you set the dropdown to use Dndbeyond's background rather than a flat color or custom background. I wouldn't be surprised if someone saw this style sheet and used it as an example to test different options and see what they wanted it's so similar. Otherwise they essentially had the same ideas which is great either way were on the same wave length.
See spoiler
From their release video:
vs my tweet during their DDBStyle contest before underdark mode. I'd also had this available on the dndbeyond forums quite some time before this contest.
I mostly DM so the dark mode for the rest of the site has been a near requirement for my eyes to not burn when switching between screens/tabs. Most of my stuff is in dark mode and the constant swap and refocusing my eyes is rough. Hence why I started this a couple years back.
There are a few changes and bug fixes that dndbeyond hasn't gotten around to in this as well. You may or may not notice them as they're minor or in obscure places. With the exception of the my dice page which has obvious changes to the layout. Others like the scrollable conditions/defenses on the character sheet and a warning when you go to publish homebrew were things I saw on the forums as requests to Dndbeyond and thought they were great ideas that I, my group or others would get use of and implemented.
I would definitely appreciate any suggestions/help you might have. Note that this is very much not done in the "proper" way. I do it the very lazy but works way most of the time so you'll see odd formatting/ordering and use of !important where it isn't needed.
You'll also see that being unable to properly target the iFrames contents on this site (at least last I checked I couldn't figure it out) I elect to allow the user to choose to invert them or not (default inveted) so things like this forums reply box and homebrew tools are just inverted instead of having proper css changes. Those savvy enough can also apply custom filters to the iFrames to match their preferred color scheme.
Your right about the license and that's exactly why I posted it the way I did. 😉
How to get your dice to look like the ones in my profile picture and a full site dark mode.
Tutorial thread by Hyrkali
Yeah, darkmode is a very nice feature to offer and having it really helps the eyes!
I can see you started that a while ago. You don't get nearly 2k lines of CSS without having spent quite some time playing around with it!
Having played with the forums only, I haven't noticed much of the little bugs. iFrames are a pain, because of the potential "external" content rules, but I noticed that Firefox didn't have the same issues when changing the background (whereas Chrome doesn't allow it). Having a "inversion" rule is a good work around I guess.
Not a fan of adding a custom profile background pictures in the sheet though. :P If the sheet gets more visibility, one might wanna keep it as close to the original content and design of the DND Beyond staff and keep it a feature to staff. Just my opinion though, and I would totally be for having a Companion Sheet to supplement that baseline Darkmode.
I dunno if I'll have time to play around with Stylus and your CSS today (which is a new plugin for me and about 2k lines of figuring what you did, why and if I like that XD ) but I'll get back to it for sure!
Hyrkali
Full DNDBeyond.com in Dark Mode? Yes please!
That's fair about the custom profile background on the forums - other than the one I was playing with for myself it's all the original staff ones I added back since they were overridden by other styles. I've removed my own profile customization from the uploaded sheet and created a private side sheet. I can see how it might cause confusion. Thanks for the input!
How to get your dice to look like the ones in my profile picture and a full site dark mode.
Tutorial thread by Hyrkali
In all honesty, having a guide (though one might already exist - haven't looked) to actually add an additional CSS to customize one's own profile and banner might be a cool idea! Bonus points if it works for both light and dark theme of the website!
Just publish the code you removed from the git into a nicely formatted post/tutorial on its own thread! :D I'll make sure to pass by and give it some love!
Hyrkali
Full DNDBeyond.com in Dark Mode? Yes please!
I just published an "update" to this, which I feel is a much needed tutorial:
https://www.dndbeyond.com/forums/d-d-beyond-general/general-discussion/129340-tutorial-dark-night-mode-for-dndbeyond-website-and
Hopefully that will be helpful to everyone!
Hyrkali
Full DNDBeyond.com in Dark Mode? Yes please!