Dark DevHub CSS Theme

[PeZsmistic]

The orange accent color can be externally customized with Stylus, however, every color is a variable, so if you feel inclined you can copy the CSS and manually tweak the colors to your heart’s content.

On my 720p monitor, contrast looks fine, however this may not be the case on all monitors. Let me know if you find serious contrast issues. Also let me know if you see anything weird. I’ve done my best to cover all major pages and components, but the DevHub will always be changing.

This theme should also be compatible with my compressed theme, sans the colored sections option.

Roblox DevHub Dark

---

Here is the CSS on it’s own:

/* Variables */
:root {
    --white: #fff;
    --lighter: #363636;
    --light: #2D2D2D;
    --mid: #242424;
    --dark: #1B1B1B;
    --btn: #3F3F3F;
    --btn-light: #484848;
    --txt: #C8C8C8;
    --txt-light: #FFFFFF;
    --txt-dark: #919191;
    --txt-darker: #3f3f3f;
    --accent: #ff9300;
    --accent-dark: #532e12;

    --alert-blue-body: #232328;
    --alert-blue-border: #4b7cae;
    --alert-red-body: #292323;
    --alert-red-border: #ae4b4b;
    --alert-yellow-body: #2b2926;
    --alert-yellow-border: #ae974b;
    --alert-green-body: #232823;
    --alert-green-border: #4dae4b;

    --ref-properties-header: #363636;
    --ref-properties-body: #242424;
    --ref-properties-border: #834833;
    --ref-functions-header: #363636;
    --ref-functions-body: #242424;
    --ref-functions-border: #516a32;
    --ref-events-header: #363636;
    --ref-events-body: #242424;
    --ref-events-border: #297b93;

    --ref-type-txt: #49A078;
    --ref-member-txt: #6761A8;
}

/* Search modal */
#live-search-modal .input-group-text,
#live-search-modal .nav-link.active {
    background: var(--btn) !important;
    color: var(--txt) !important;
}

#live-search-modal .nav-link.active,
#live-search-modal .nav-link:hover {
    border-color: var(--dark) !important;
}

#live-search-modal .modal-body {
    background: var(--light) !important;
}

#live-search-modal .nav-tabs,
#live-search-modal .modal-header {
    border-color: var(--dark) !important;
}

#live-search-modal .liveSearch .search-lists .type {
    color: var(--txt-light);
}

#live-search-modal .liveSearch .search-lists p {
    color: var(--txt);
}

/* Fancy */
.learn-roblox-pages .learning-materials-content .tab-content .inner-wrap:hover {
    box-shadow: 0 0 16px var(--dark);
    background: var(--light);
}

.table .table-row td code:not(.type) a,
.type-link {
    font-weight: bold !important;
}

.card-deck .card {
    box-shadow: none;
}

.mll,
.mls {
    content: url("https://gist.githubusercontent.com/CAZ-H/d96c76ed59b55c31d238365b0d7420a6/raw/fcf7c98a074d3bc202dcce7fa375e9834db6d9a1/DarkbloxDevHub-RightArrow.svg?sanitize=true")!important;
}

.mrl,
.mrs {
    content: url("https://gist.githubusercontent.com/CAZ-H/2bc5ebb4e6822b8cfabd2f71b0e795d6/raw/ca25aaf43de113f02e64d1f83186d8970e0c6b36/DarkbloxDevHub-LeftArrow.svg?sanitize=true")!important;
}

.toggle-sidebar .arrow {
    content: url("https://gist.githubusercontent.com/CAZ-H/5588c9f4f3060ee5fc49126ba9cb794e/raw/9df2fe9a8266d062f40fe764d415bb00701f8700/DarkbloxDevHub-DoubleLeftArrow.svg?sanitize=true")!important;
}

.logo a {
    background-image: url("https://i.imgur.com/L0oCbGK.png")!important;
}

.arrow-down {
    background-image: url("https://i.imgur.com/n3bokJh.png")!important;
}

.bd-content img {
    background-color: rgba(255, 255, 255, 0.1);
    margin: 8px;
}

.carousel-indicators li {
    color: var(--accent)!important;
    border-color: var(--accent)!important;
}

.carousel-indicators li.active {
    background-color: var(--accent)!important;
}

/* Borders and Outlines */
.creators-stories-carousel .img-wrap img {
    border-color: var(--accent) !important;
}

.time {
    border-color: var(--txt-dark) !important;
    color: var(--txt-dark) !important;
}

.header .search-box {
    border-left: 1px solid var(--light);
}

.custom-tabs .nav-tabs-wrap,
.search-container .search-lists li,
.news-n-announcements .recent-announcements li {
    border-bottom: 2px solid var(--light);
}

.news-n-announcements .recent-announcements {
    border-top: 2px solid var(--light);
}

.bd-sidebar .bd-toc-heading,
.bd-sidebar-wrap .toggle-sidebar,
.bd-sidebar-wrap .nav-tabs {
    border-bottom: 1px solid var(--mid);
}

.learn-roblox-pages .intro {
    border-bottom: 2px solid var(--light);
}

.nav-item > .nav-link.active,
.bd-sidebar-wrap .nav-tabs li .active {
    border-bottom: 2px solid var(--accent)!important;
}

.bd-toc .toc-nav .inner-toc-nav {
    border-left: 4px solid var(--accent);
}

.form-control,
.select2-container a,
.select2-drop {
    border-color: var(--mid)!important;
}

.code-link,
.page-section code,
.bd-content code {
    border-color: var(--txt-darker);
}

.multi-nested-list :before,
.multi-nested-list :after {
    border-color: var(--dark)!important;
}

.hasSubmenu > ul {
    border-left: 1px dashed var(--dark)!important;
}

tbody,
td,
tr,
th {
    border-color: var(--lighter)!important;
}

.card {
    border-color: var(--light)!important;
}

/* Text */
.table .table-row .type,
.type-link {
    color: var(--ref-type-txt)!important;
}

.table .table-row td code:not(.type) a {
    color: var(--ref-member-txt)!important;
}

.select2-container a,
.inner-toc-nav .toc-content a,
#toc > ul > li > a,
.alert,
.alert li,
h1,
h2,
h3,
h4,
h5,
h6,
.search-results li .type {
    color: var(--txt)!important;
}

.select2-results .select2-result-label,
.bd-sidebar .bd-toc-item .bd-toc-link,
.header .bd-navbar-nav .nav-item > a,
.nav-tabs .nav-item .nav-link,
.bd-sidebar-wrap .toggle-sidebar a,
.alphabetical-index a,
.multi-nested-list a,
.bd-sidebar .bd-toc-item .sub-nav a,
.bd-content code,
.bd-content code .api-tag,
.search-box-wrap input,
.header .search-box .form-control,
.table .arguments-wrap .value,
.desc,
.inherited-lbl,
.home-inner,
.home-inner p,
.search-results li p {
    color: var(--txt-dark)!important;
}

.bd-content div,
.bd-content span,
.bd-content p,
.bd-content li,
.learn-roblox-pages .intro .lead {
    color: var(--txt-dark);
}

.st-next,
.st-prev,
.carousel-details a.btn {
    color: var(--txt-light)!important;
}

.tab-content h5,
.intro a,
.breadcrumb .breadcrumb-item a,
.bd-toc .toggle-toc,
.nav-link.active,
.nav-link:hover,
.alphabetical-index a:hover,
.bd-sidebar-wrap .nav-tabs .nav-item:hover a,
.bd-sidebar-wrap .nav-tabs .nav-item a.active,
.multi-nested-list a:hover,
.multi-nested-list li.active a,
.footer a,
.show-hide a,
.load-more a,
.home-inner a {
    color: var(--accent)!important;
}

.bd-content a,
.bd-content a:hover {
    color: var(--accent);
}

.bd-content a.btn,
.bd-content a.btn:hover {
    color: var(--accent-dark);
}

.mw-btn-outline-primary,
.mw-btn-outline-primary span {
    color: var(--accent) !important;
    border-color: var(--accent);
}

.mw-btn-outline-primary:hover,
.mw-btn-outline-primary:active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-dark) !important;
}

a.mw-btn-outline-primary:hover span,
a.mw-btn-outline-primary:active span {
    color: var(--accent-dark) !important;
}

a.mw-btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--accent-dark);
}

.mw-btn-outline-secondary,
.mw-btn-outline-secondary span {
    color: var(--accent-dark) !important;
    border-color: var(--accent-dark);
}

.mw-btn-outline-secondary:hover,
.mw-btn-outline-secondary:active {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}

a.mw-btn-outline-secondary:hover span,
a.mw-btn-outline-secondary:active span {
    color: var(--accent) !important;
}

a.mw-btn-outline-secondary:focus {
    box-shadow: 0 0 0 0.2rem var(--accent);
}

/* Backgrounds */
body {
    background: var(--dark)!important;
}

.bd-content,
.select2-container a,
tbody,
.main-container,
.home-inner > div,
.bg-white {
    background: var(--mid)!important;
}

.bd-sidebar,
.bd-sidebar-wrap,
.bd-toc,
.bd-toc-wrap,
.nav-tabs,
.nav-tabs-wrap,
.select2-highlighted,
.form-control,
th,
.hasSubmenu li :after,
.tags-list li,
.card-body,
.card,
.carousel-control-prev,
.carousel-control-next,
.video-section,
.recommended-videos {
    background: var(--light)!important;
}

.header,
.bd-sidebar .bd-toc-item .active,
.bd-sidebar .bd-toc-item .bd-toc-link:hover,
.select2-drop,
.bd-sidebar .bd-toc-item .sub-nav a:hover,
.card-header {
    background: var(--lighter)!important;
}

.card-header.bg-primary {
    background: var(--accent)!important;
    color: var(--accent-dark)!important;
}

.footer {
    background: var(--accent-dark)!important;
}

.alert {
    background: var(--alert-blue-body);
    border: 1px solid var(--alert-blue-border);
}

.alert-danger {
    background: var(--alert-red-body);
    border: 1px solid var(--alert-red-border);
}

.alert-info {
    background: var(--alert-yellow-body);
    border: 1px solid var(--alert-yellow-border);
}

.code-link,
.page-section code,
.bd-content code {
    background: rgba(0, 0, 0, 0.3);
}

mark {
    background: rgba(0, 0, 0, 0.3);
    color: var(--txt-dark)
}

kbd {
    background: var(--lighter);
    border-color: var(--dark) var(--dark) var(--dark);
    background-color: var(--lighter);
    color: var(--txt-mid);
}

.bd-toc .toggle-toc {
    background: var(--light);
}

.st-next,
.st-prev,
.btn {
    background: var(--accent)!important;
}

.begin-link img {
    padding: 8px;
}

.loader img {
    background: transparent;
    box-sizing: border-box;
    width: 160px;
    height: 20px;
    padding-left: 160px;
    border: none;
    background-image: url(https://i.imgur.com/M1SVaJE.gif);
}

.text-highlight {
    background: rgba(255, 255, 255, 0.3);
    color: var(--txt-light) !important;
}

a.bg-secondary:hover,
a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus,
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus,
.mw-btn-primary:hover {
    background-color: var(--accent-dark) !important;
    color: var(--dark) !important;
}

.nav-pills .nav-link:hover {
    background: var(--accent-dark)!important;
    color: var(--dark)!important;
}

.nav-pills .nav-link.active {
    color: var(--txt-light)!important;
    background: var(--accent)!important;
}

.gs-article-container {
    background: var(--mid);
}

.gs-article-container-border {
    background: var(--dark) !important;
}

.gs-article-container-border {
    border-color: var(--mid) !important;
}

.gs-article-container > .container > .row:first-child,
.gs-article-container-2 > .container > .row:first-child {
    background: var(--lighter) !important;
}

.gs-article-container div.p-0 > div.mx-0 > .ml-4 > div.p-0 > a > img.img-fluid.m-0 {
    box-sizing: border-box;
    width: 24px !important;
    height: 18px !important;
    padding-left: 24px !important;
    background-image: url("https://gist.githubusercontent.com/CAZ-H/d96c76ed59b55c31d238365b0d7420a6/raw/fcf7c98a074d3bc202dcce7fa375e9834db6d9a1/DarkbloxDevHub-RightArrow.svg?sanitize=true")!important;
}

.badge-success > *, .badge-warning > *, .badge-danger > * {
    color: rgba(0,0,0, 0.75) !important;
}

.language-dropdown .input-dropdown-btn,
.language-dropdown .show .dropdown-menu {
    background-color: var(--mid);
    border-color: var(--mid);
}

.language-dropdown .input-group-btn .dropdown-menu li a:hover,
.language-dropdown .input-group-btn .dropdown-menu li a:focus,
.language-dropdown .input-group-btn .dropdown-menu li a.active {
    background-color: var(--light);
    box-shadow: 4px 0 0 0 var(--accent) inset;
}

.language-dropdown .input-dropdown-btn span {
    color: var(--txt-light);
}

.language-dropdown .input-group-btn .input-dropdown-btn #icon-globe,
.language-dropdown .show #icon-globe {
    background: rgba(0, 0, 0, 0) url(https://www.roblox.com/images/Shared/generic_01312019.svg) no-repeat scroll -20px -1300px/40px padding-box border-box;
}

.language-dropdown .input-group-btn .input-dropdown-btn:hover,
.language-dropdown .show .input-dropdown-btn {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--txt-dark);
}

.language-dropdown .icon-down-16x16 {
    background: rgba(0, 0, 0, 0) url(https://www.roblox.com/images/Shared/generic_01312019.svg) no-repeat scroll -16px -272px/32px padding-box border-box;
}

/* API Reference - Member Sections*/
#properties.page-section {
    padding: 10px !important;
    margin-top: 10px !important;
    border: 1px solid var(--ref-properties-border)!important;
}
#properties.page-section .table .table-row td:first-child {
    background: var(--ref-properties-header)!important;
    border: none;
}
#properties.page-section .table.tbl-items tbody {
    background: var(--ref-properties-body)!important;
    border: none;
}

#functions.page-section {
    padding: 10px !important;
    margin-top: 10px !important;
    border: 1px solid var(--ref-functions-border)!important;
}
#functions.page-section .table .table-row td:first-child {
    background: var(--ref-functions-header)!important;
    border: none;
}
#functions.page-section .table.tbl-items tbody {
    background: var(--ref-functions-body)!important;
    border: none;
}

#events.page-section {
    padding: 10px !important;
    margin-top: 10px !important;
    border: 1px solid var(--ref-events-border)!important;
}
#events.page-section .table .table-row td:first-child {
    background: var(--ref-events-header)!important;
    border: none;
}
#events.page-section .table.tbl-items tbody {
    background: var(--ref-events-body)!important;
    border: none;
}

.table.tbl-items {
    background-color: #ffffff !important;
}

/* API Reference - Data Types */
.table-responsive tbody {
    background: var(--lighter)!important;
}

.table-responsive [style*="background"] {
    background: var(--lighter)!important;
}

.table-responsive tr {
    background: var(--mid)!important;
}

.table-responsive tr {
    border-color: var(--light);
}

.table thead,
.table thead td {
    background: var(--light)!important;
}

.table-responsive table,
.table-responsive thead tr {
    border: 1px solid var(--lighter)!important;
}

.table-primary {
    background-color: var(--alert-blue-body);
    color: var(--txt-light);
    border-color: var(--alert-blue-border)!important;
}

.table-success,
.table-success > th,
.table-success > td {
    background-color: var(--alert-green-body);
    color: var(--txt-light);
    border-color: var(--alert-green-border)!important;
}
.table-warning,
.table-warning > th,
.table-warning > td {
    background-color: var(--alert-yellow-body);
    color: var(--txt-light);
    border-color: var(--alert-yellow-border)!important;
}
.table-danger,
.table-danger > th,
.table-danger > td {
    background-color: var(--alert-red-body);
    color: var(--txt-light);
    border-color: var(--alert-red-border)!important;
}
.table-success img,
.table-warning img,
.table-danger img {
    background: none;
}

/* API Reference - Members */
thead,
.code-block {
    border-color: var(--dark)!important;
}

hr {
    border-color: var(--light)!important;
}

[EmeraldSlash (Rio)]

Cool, found a bit on tables that hasn’t been changed, though:

[DarkContinuum]

Awesome! Thanks for making this

[BULK_BROGAN]

Is Stylish back??

Edit: IT IS!!!

[PeZsmistic]

You should use use Stylus. Stylus is a fork of Stylish that does not do nefarious deeds.

[GeorgeOfAIITrades]

Not a huge fan of the Red. Would rather see Studio Blue in those places. But that’s just me. Cool stuff though.

[PeZsmistic]

Reread OP.

@qqtt991

The orange accent color can be externally customized with Stylus , however, every color is a variable, so if you feel inclined you can copy the CSS and manually tweak the colors to your heart’s content.

[Noble_Draconian]

My eyes thank you. Thanks!

[PeZsmistic]

Should be fixed now. You can update on userstyles.org.

[Streeteenk]

I know this is not relevant enough but it could change the colors of the following things:

Click in the images to access a example!

List of the things

• It is hard tto read “Pending”:

  

• Script Blocks could start in Dark Mode by default:

  

• The hover of these buttons makes the text difficult to read:

  
  

• Playlist viewer is white:

  

• Looks like Icons aren’t supported for some reason:

  
  
  
  

• Some code blocks are white:

  

• The loading thing is very buggy:

  
  (I don’t know why there is chinese things)

• Tables doesn’t have separators:

  
  

• Those tables are also broken:

  
  
  
  

• This collapsible frame doesn’t look like a warning:

  
  

• Language dropbox is white:

  

• This doesn’t looks like as this looks in white theme:

  
  

• The contrast of these buttons is absurd:

  

• Could add a different background for each, like in white theme:

  

• And I just found this critical bug:

  

I think that’s just it. I hope it was worth reliving this topic!

[PeZsmistic]

I have updated the theme to address these problems. I cannot change the default initial code block theme though. Will update screenshots in OP shortly.

[PeZsmistic]

I’ve updated the theme to address some small issues and add support for the new search box. You should update via userstyles.

[SaIamancas (Lalo)]

I just tried to switch from Stylish to Stylus and userstyles.org seems to be down for everyone.
Using the raw CSS works fine which you provided but there’s a purple highlight in codeblocks that didn’t use to be there (was roblox highlighting on a tutorial page).

I assume the updated version is on there but again it’s not working, could you update the css you provided or switch to another host?

[Fire540Games (FireForge)]

Thank you! This is really nice.

I found a problem: the bottom of the page is orange.

I managed to fix it by changing the color of footer from --accent-dark to --mid. Just do ctrl + F, type “footer”, and go to the second one (its on line 375).

I also changed the accent color from orange to blue. On line 14, just change it to #239de3 (the Roblox Studio logo color).

[AmazingRock3r (aaon)]

This is really cool, You made DevHub look 100% better! Thank you for making this