Customizable theme - Dark by default for most of Dndbeyond.
For character sheet style see: Dndbeyond Character Sheet Dice and Dark
You can support this project at https://ko-fi.com/azmoria
DNDBeyond Dark Theme by azmoria
Imported and mirrored from https://raw.githubusercontent.com/Azmoria/dndbeyonddark/master/DNDBeyond%20site%20dark.user.css
Details
Authorazmoria
LicenseNo License
CategoryDndbeyond
Created
Updated
Size465 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
dndbeyonddark
Themes for DNDBeyond allowing for custom colors. It's set to a dark mode by default.
Now includes customizing Dice Tint. See dropdowns below for examples.
Character Sheet examples:
Dice customization examples:
Mobile character sheet examples:
Rest of the site examples:
You will need Stylus or another User CSS extension to apply these themes.
You can get Stylus here:
For Chrome
For Firefox **Note I do not play using firefox - testing will be slow. Please report any issues you find and I will attempt to fix them.
I recommend setting the popup width for stylus to at least 500 pixels. You can find this under options when clicking on the stylus extension.
Once you have Stylus installed click the links below to install the themes. I suggest opening them in a new tab clicking install then closing the tab.
Character Sheet Theme
The rest of DNDBeyond site
For android devices (mobile/tablet) Kiwi Browser allows the installation of desktop Chrome extentions. There may be alternatives that work for iOS. However I only own android devices so I am unaware of which ones would work or exist.
**Note: Mobile/tablet testing will be slow as I primarily play on desktop - please add issues for problems you find, either desktop or other devices, as your help finding problems is appreciated. If you have requests you can also add them to issues and I will attempt to add what I can.
How to create character specific themes
How to capture just the dice for your stream
With the exception of the dice roller most of the alpha or beta content has not been themed as I am waiting for finalized versions and they either have their own dark mode available (such as the encounter builder) or are darker than the original site design.
Encounter Builder and Combat tracker are now included as of 1.1.1
I also probably will not touch the marketplace at all as this is more for everyday use pages.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. /* ==UserStyle==
@name DNDBeyond Dark Theme
@preprocessor uso
@namespace DNDBeyond Dark Theme
@version 1.2.479
@author Azmoria (Jay_Lane)
@var color backgroundColor "Background Color" #0b0b0d
@var color transparencyBackgroundColor "Transparency of some backgrounds/buttons" #000000aa
@var color forumPostColor "Forum Post Color" #0f0f0fdd
@var color forumSecondaryColor "Forum Secondary Color" #111d
@var color forumTertiaryColor "Forum Tertiary Color" #1e1e1edd
@var color fontColor "Font Color" #ddd
@var color linkColor "Link Color" #88bcd6
@var color sidebarColor "Sidebar Color" #0b0b0dff
@var color rollColor "Rollable Items Color" #5dbbf7
@var color rollCalcColor "Roll Results Background Color" #030f1acc
@advanced dropdown fontContrast "Font Contrast Colors" {
dark "Dark Mode" <<<EOT
@supports (-moz-appearance:none){
html>#tinymce [style*="color: rgb(0, 0, 0"],
html>#tinymce [style*="color: rgb(51, 51, 51"],
html>#tinymce [style*="color: rgb(128, 128, 128"],
html>#tinymce [style*="color: rgb(36, 37, 39)"],
html>#tinymce [style*="color: #000000"]
{
color: var(--font-color) !important;
}
html>#tinymce [style*="color: rgb(51, 51, 0)"]
{
color: rgba(100, 100, 0, 1) !important;
}
html>#tinymce [style*="color: rgb(0, 51, 0)"]
{
color: rgb(24, 80, 24) !important;
}
html>#tinymce [style*="color: rgb(0, 51, 102);"]
{
color: rgba(0, 101, 152, 1) !important;
}
html>#tinymce [style*="color: rgb(0, 0, 255"]{
color: rgb(70, 100, 255) !important;
}
html>#tinymce [style*="color: rgb(255, 0, 255)"]
{
color: rgba(255, 0, 255, .66) !important;
}
html>#tinymce [style*="color: rgb(16, 16, 255"]
{
color: rgba(73, 73, 255, 1) !important;
}
html>#tinymce [style*="color: rgb(0, 0, 128"]
{
color: rgb(43, 43, 248) !important;
}
html>#tinymce [style*="color: rgb(255, 0, 0"]
{
color: rgb(162, 28, 28) !important;
}
html>#tinymce [style*="color: rgb(128, 0, 0"]
{
color: rgb(138, 29, 29) !important;
}
html>#tinymce [style*="color: rgb(51, 51, 153"]
{
color: rgb(89, 89, 227) !important;
}
html>#tinymce [style*="color:purple"]
{
color: #d465d4 !important;
}
html>#tinymce [style*="color: rgb(255, 0, 0"]
{
color: #D35050 !important;
}
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(51, 51, 0, 1)"]
{
color: rgba(100, 100, 0, 1) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(0, 51, 0, 1)"]
{
color: rgb(24, 80, 24) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(0, 51, 102, 1)"]
{
color: rgba(0, 101, 152, 1) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(0, 0, 255, 1)"],
.single-column #content .p-forum-a .p-comment-wrapper [style*="color:blue"]{
color: rgb(70, 100, 255) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(255, 0, 255, 1)"]
{
color: rgba(255, 0, 255, .66) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(16, 16, 255, 1)"]
{
color: rgba(73, 73, 255, 1) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(0, 0, 128, 1)"]
{
color: rgb(43, 43, 248) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(255, 0, 0, 1)"]
{
color: rgb(162, 28, 28) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(128, 0, 0, 1)"]
{
color: rgb(138, 29, 29) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(51, 51, 153, 1)"]
{
color: rgb(89, 89, 227) !important;
}
.single-column #content .p-forum-a .p-comment-wrapper [style*="color:purple"]
{
color: #d465d4 !important;
}
.tooltip-hover.monster-tooltip,
.tooltip-hover.monster-tooltip:hover,
.tooltip-hover.monster-tooltip:focus,
.tooltip-hover.monster-tooltip:active,
.tooltip-hover.monster-tooltip:visited,
.plural-monster-tooltip,
.body-page .p-article-a .p-article-content a.monster-tooltip,
.body-forum .p-article-a .p-article-content a.monster-tooltip,
.single-column #content .p-forum-a .p-comment-wrapper [style*="color:red"],
.single-column #content .p-forum-a .p-comment-wrapper [style*="color: rgba(255, 0, 0, 1)"],
[style*="color: rgba(255, 0, 0, 1)"],
.mon-stat-block__name .mon-stat-block__name-link,
.mon-stat-block__name .mon-stat-block__name-link:active,
.mon-stat-block__name .mon-stat-block__name-link:hover,
.mon-stat-block__name .mon-stat-block__name-link:visited,
.listing .info .row.monster-name .link:hover,
.listing .info .row.monster-name .link,
#site .ddb-campaigns-list-item-footer-buttons-item-delete,
#site .ddb-campaigns-character-card-footer-links-item-remove,
#site .ddb-campaigns-character-card-footer-links-item-remove,
#site .ddb-campaigns-character-card-footer-links-item-delete,
.list-row-primary-text-monster,
.homebrew-creation-actions-item-delete,
.homebrew-creation-actions-item-delete:hover,
.ddb-homebrew-rejection-label,
.combatant-card--monster .combatant-summary__name,
.body-rpgmonster .listing-filters .advanced-filter a span,
.add-monster-modal__header-text--name,
.ddb-campaigns-character-card-footer-links div:last-of-type>button:first-of-type,
.list-row-primary-text a[href^="/monsters"],
.listing__items .listing__list-item__column.blocked,
.stat-block-background--space .stat-block-ability-scores,
.red-statblock-text{
color: #D35050 !important;
}
body *{
--compendium-monster-tooltip: #D35050;
--compendium-spell-tooltip: #896CE0;
--compendium-magic-item-tooltip: #1877EC;
}
.section-tome-of-beasts-1 li::marker, .section-tome-of-beasts-1 strong:not(em strong,ul strong,strong em,.flexible-double-column.hangingIndent strong,.epigraph strong),
.section-tome-of-beasts-1 .monster--stat-block.tob--stat-block .monster--stats p:nth-child(odd),
.section-tome-of-beasts-1 .monster--stat-block.tob--stat-block .monster--action-header{
color: #9f6fa5;;
}
.section-tome-of-beasts-1 .monster--stat-block.tob--stat-block{
--stat-block-divider: #9f6fa5;;
}
.tooltip-hover.spell-tooltip,
.tooltip-hover.spell-tooltip:hover,
.tooltip-hover.spell-tooltip:focus,
.tooltip-hover.spell-tooltip:active,
.tooltip-hover.spell-tooltip:visited,
.body-page .p-article-a .p-article-content a.spell-tooltip,
.mon-stat-block .tooltip-hover.spell-tooltip,
.mon-stat-block .tooltip-hover.spell-tooltip:hover,
.mon-stat-block .tooltip-hover.spell-tooltip:focus,
.mon-stat-block .tooltip-hover.spell-tooltip:active,
.mon-stat-block .tooltip-hover.spell-tooltip:visited,
.listing .info .row.spell-name .link:hover,
.listing .info .row.spell-name .link,
a[style*="color: #704cd9;"],
.list-row-primary-text-spell,
.list-row-spell a,
.section-bigby-presents-glory-of-the-giants.body-page .p-article-a .p-article-content :is(.table-compendium,.text--rules-sidebar) .tooltip-hover.spell-tooltip{
color: #896CE0 !important;
}
.tooltip-hover.magic-item-tooltip,
.tooltip-hover.magic-item-tooltip:hover,
.tooltip-hover.magic-item-tooltip:focus,
.tooltip-hover.magic-item-tooltip:active,
.tooltip-hover.magic-item-tooltip:visited,
.mon-stat-block .tooltip-hover.magic-item-tooltip,
.mon-stat-block .tooltip-hover.magic-item-tooltip:hover,
.mon-stat-block .tooltip-hover.magic-item-tooltip:focus,
.mon-stat-block .tooltip-hover.magic-item-tooltip:active,
.mon-stat-block .tooltip-hover.magic-item-tooltip:visited,
.body-page .p-article-a .p-article-content a.magic-item-tooltip,
.list-row-primary-text-item{
color: #1877EC !important;
}
.player-info-table .lowest-value{
background-color:#620000
}
.player-info-table .highest-value{
background-color:#135301
}
.thread-prefix span.thread-prefix{
background-color: #7D5A0C !important;
}
.thread-prefix span.bug{
background-color: #B9222A !important;
}
.thread-prefix span.resolved{
background-color: #3D6B3D !important;
}
.thread-prefix span.request{
background-color: #B52172 !important;
}
#content a span.user-role-d-d-beyond-staff,
#content a span.user-role-d-d-beyond-staff:hover,
#content .thread-author a span.user-role-d-d-beyond-staff,
#content .p-comment-edited span.user-role-d-d-beyond-staff,
.section-changelog #content a span.user-role-d-d-beyond-staff,
.section-posts #content a span.user-role-d-d-beyond-staff{
color: #c02323 !important;
}
#content a span.user-role-moderator,
#content a span.user-role-moderator:hover,
#content .thread-author a span.user-role-moderator,
#content .p-comment-edited span.user-role-moderator,
.section-changelog ...