Skip to content

Creator Hub Theme For Roblox by mek_21

Screenshot of Creator Hub Theme For Roblox

Details

Authormek_21

LicenseNo License

Categorywww.roblox.com or web.roblox.com

Created

Updated

Size18 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A theme for Roblox that tries to emulate the design of the new Roblox Creator Hub in the main website.

Notes

Make sure your Roblox is set to dark mode, light mode isnt supported yet!

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Creator Hub Theme For Roblox
@version      20230728.12.22
@namespace    userstyles.world/user/mek_21
@description  A theme for Roblox that tries to emulate the design of the new Roblox Creator Hub in the main website.
@author       mek_21
@license      No License
==/UserStyle== */

@-moz-document domain("roblox.com") {
/* DevFourm */
.d-header {
    background: black;
    box-shadow: 0px 0px 0px #fff0;
}
.nav-pills>li {
    text-transform: uppercase;
}

button {
    text-transform: uppercase;
}




/* Search */
.dark-theme .rbx-header .navbar-search {
    background-color: #fff0;
    border: none;
    
}

.dark-theme .rbx-header .navbar-search .input-field {
    border: none;
    border-radius: 1px;
    border-bottom: 0px solid;
    border-bottom-color: #727272;
    transition: border-bottom-color 0.3s, color 0.3s, border-bottom-width 0.1s, width 0.5s;
    width: 300px;
}

.dark-theme .rbx-header .navbar-search .input-field::placeholder {
    color: #fff0;
    opacity: 0;
}

.dark-theme .rbx-header .navbar-search .input-field:hover::placeholder {
    color: #727272;
    opacity: 1;
}

.dark-theme .rbx-header .navbar-search .input-field:hover {
    border: none;
    border-bottom: 2px solid;
    border-bottom-color: #fff;
    color: #fff;
    height: 28px;
    width: 500px;
}

.dark-theme .rbx-header .navbar-search .input-field:focus {
    border: none;
    border-bottom: 2px solid;
    border-bottom-color: #2BB1FF;
    color: #fff;
    height: 28px;
    width: 500px;
}

/* Dialogs */

.dark-theme .modal-dialog .modal-content {
    background-color: #2C2C2C;
    color: #fff;
    border-radius: 4px  ;
    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.dark-theme .simplemodal-overlay {
     background-color: #0000009c!important;
}



/* Buttons */

.dark-theme .btn-cta-sm {
    background-color: #2BB1FF;
    border: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 64px;
    padding: 10px;
    color: #171717;
}

.dark-theme .btn-cta-sm:hover {
    background-color: rgb(60, 135, 179);
    color: #171717;
}

.dark-theme .btn-control-sm {
    border: 1px solid rgb(152, 152, 152);
    color: #ededed;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 64px;
    padding: 10px;
}

.dark-theme .btn-control-sm:hover {
    border-color: rgb(152, 152, 152);
    background-color: rgba(250, 250, 250, 0.16);
}

.dark-theme .btn-primary-sm{
    background-color: #2BB1FF;
    border: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 64px;
    padding: 10px;
    color: #171717;
}

.dark-theme .btn-primary-sm:hover{
    background-color: rgb(60, 135, 179);
    color: #171717;
}
.dark-theme .avatar-card-btns .accept-friend {
    background-color: #2BB1FF;
    border: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 64px;
    padding: 10px;
    color: #171717;
}
.dark-theme .avatar-card-btns .accept-friend:hover {
    background-color: rgb(60, 135, 179)
}

.dark-theme .btn-primary-xs {
     background-color: #2BB1FF;
    border: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 64px;
    padding: 5px;
    color: #171717;
}

.dark-theme .btn-primary-xs:hover{
    background-color: rgb(60, 135, 179);
    color: #171717;
}

.dark-theme .btn-control-xs {
    border: 1px solid rgb(152, 152, 152);
    color: #ededed;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 64px;
    padding: 5px;
}

.dark-theme .btn-control-xs:hover {
      border-color: rgb(152, 152, 152);
    background-color: rgba(250, 250, 250, 0.16);
} 

.dark-theme .btn-growth-xs {
    border-radius: 4px;
    border: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    text-transform: uppercase;
    min-width: 64px;
    padding: 5px;
}

.dark-theme .btn-growth-xs:hover {
    background-color: #037349;
}

.dark-theme .rbx-upgrade-now .btn-secondary-md:link {
    color: #171717;
}

.dark-theme .rbx-upgrade-now .btn-secondary-md {
    background-color: #2BB1FF;
    border: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 64px;
    padding: 10px;
    color: #171717;
}

.dark-theme .rbx-upgrade-now .btn-secondary-md:hover {
    background-color: rgb(60, 135, 179)
}

.dark-theme .btn-secondary-md {
    border: 1px solid rgb(152, 152, 152);
    color: #ededed;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 64px;
    padding: 10px;
}

.dark-theme .btn-secondary-md:hover {
    border-color: rgb(152, 152, 152);
    background-color: rgba(250, 250, 250, 0.16);
}


.dark-theme .group-details .group-shout .group-form .group-form-button {
    padding-right: 20px;
}

.dark-theme .btn-growth-md {
    border-radius: 4px;
    border: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    text-transform: uppercase;
    min-width: 64px;
    padding: 11px;
}

.dark-theme .btn-growth-md:hover {
    background-color: #037349;
}

.dark-theme .btn-control-md {
    border: 1px solid rgb(152, 152, 152);
    color: #ededed;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 64px;
    padding: 10px;
}

.dark-theme .btn-control-md:hover {
    border-color: rgb(152, 152, 152);
    background-color: rgba(250, 250, 250, 0.16);
}


.dark-theme #game-details-play-button-container .btn-common-play-game-lg {
    background-color: #00b06f!important;
    border-radius: 4px;
    border: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    text-transform: uppercase;
    min-width: 64px;
    padding: 11px;
}

.dark-theme #game-details-play-button-container .btn-common-play-game-lg:hover {
    background-color: #037349!important;
}

.dark-theme .btn-primary-md {
    background-color: #2BB1FF!important;
    border: 0px!important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms!important;
    border-radius: 4px!important;
    text-transform: uppercase!important;
    min-width: 64px!important;
    padding: 10px!important;
    color: #171717!important;
}

.dark-theme .btn-primary-md:hover {
    background-color: rgb(60, 135, 179)!important;
}

.dark-theme .btn-growth-lg {
    border-radius: 4px;
    border: 0px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    text-transform: uppercase;
    min-width: 64px;
}

.dark-theme .btn-growth-lg:hover {
    background-color: #037349;
}

.dark-theme .btn-alert-md {
    border-radius: 4px;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    text-transform: uppercase;
    min-width: 64px;
    color: rgb(244, 100, 93);
    border: 1px solid rgba(244, 67, 54, 0.5);
}

.dark-theme .btn-alert-md:hover {
    border-color: rgba(244, 67, 54, 0.5);
    background-color: rgba(244, 67, 54, 0.08);
}

/* Experience Pages 
.dark-theme #game-detail-page {
    background-color: #222222;
    border-radius: 4px;
    padding: 13px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}

.dark-theme .age-rating-details {
    background-color: #222222!important;
    border-radius: 4px;
    padding: 0;
    padding-top: 20px;
}

.dark-theme .game-creator a {
    color: #2BB1FF!important
}

.dark-theme .game-creator span {
    font-weight: 300;
}

.dark-theme .border, .dark-theme .border-bottom, .dark-theme .border-left, .dark-theme .border-right, .dark-theme .border-top {
    border: none;
    border-radius: 4px;
    background-color: #171717;
    text-transform: uppercase;
    text-align: left;
    padding-right: 20px;
    padding-top: 20px;
}

.dark-theme .section-content-off {
    background-color: #3b3b3b;
}

 */
/* Colours */
.dark-theme .notification-stream-header,...

Reviews

No reviews yet.