Skip to content

Roblox Reimagined by bdidk235

Mirrored from https://github.com/bdidk235/RobloxReimagined/raw/master/RobloxReimagined.user.css

Screenshot of Roblox Reimagined
Homepage Write a review Install Get Stylus

Details

Authorbdidk235

LicenseMIT

Categoryroblox

Created

Updated

Size37 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Customize Roblox without it feeling like a whole new design, and make the Roblox website a bit more consistent.

Notes

This was mostly made for myself, you may encounter issues due to extensions or lack of them.

Roblox-Like Themes cannot be customized with Hue and Saturation.

Please raise issues in the GitHub repository.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Roblox Reimagined
@version        0.3.2
@namespace      https://userstyles.world/user/bdidk235
@description    Customize Roblox without it feeling like a whole new design.
@author         bdidk235
@homepageURL    https://github.com/bdidk235/RobloxReimagined
@supportURL     https://github.com/bdidk235/RobloxReimagined/issues
@license        MIT
@preprocessor   stylus

@var select theme "Theme" ["defaultDark:Default Dark", "defaultLight:Default Light", "darker:Darker", "amoled:AMOLED", "robloxDark:Roblox Dark", "robloxLight:Roblox Light", "off:Off"]
@var number hue "Theme Hue (1-360)" [210, 0, 360, 1]
@var number saturation "Theme Saturation (0-100%)" [3, 0, 100, 1]

@var checkbox basicAnimations "Basic Animations" 0
@var checkbox moreAnimations "More Animations" 0
@var select popoutAnimation "Popout Animation" ["off:Off", "basic:Basic", "outlined:Outlined"]
@var checkbox navFloat "Floating Navigation" 0

@var checkbox improvements "Various Improvements" 1
@var checkbox twitterToX "Change Twitter to X" 0
@var checkbox footerLinks "Remove Footer Links" 1
==/UserStyle== */

@-moz-document domain("www.roblox.com"), domain("web.roblox.com") {
	/* Variables */
	isLight = (theme == defaultLight || theme == robloxLight)

	/* Themes */
	:root, .dark-theme, .light-theme {
		if theme == defaultDark {
			--background-color: hsl(hue, saturation, 15%);
			--navigation-color: hsl(hue, saturation, 10%);
			--header-color: var(--navigation-color);
			--content-color: hsl(hue, saturation, 23%);
			--input-color: hsl(hue, saturation, 4%);
			--input-border-color: hsl(hue, saturation, 18%);
			--thumbnail-color: hsl(hue, saturation, 30%);
			--item-thumbnail-color: var(--thumbnail-color);
			--highlight-color: hsl(hue, saturation, 45%);
			--highlighter-color: hsl(hue, saturation, 55%);
			--primary-text-color: hsl(hue, saturation, 100%);
			--secondary-text-color: hsl(hue, saturation, 75%);
		} else if theme == defaultLight {
			--background-color: hsl(hue, saturation, 95%);
			--navigation-color: hsl(hue, saturation, 85%);
			--header-color: var(--navigation-color);
			--content-color: hsl(hue, saturation, 100%);
			--input-color: hsl(hue, saturation, 90%);
			--input-border-color: hsl(hue, saturation, 65%);
			--thumbnail-color: hsl(hue, saturation, 85%);
			--item-thumbnail-color: var(--thumbnail-color);
			--highlight-color: hsl(hue, saturation, 85%);
			--highlighter-color: hsl(hue, saturation, 70%);
			--primary-text-color: hsl(hue, saturation, 15%);
			--secondary-text-color: hsl(hue, saturation, 38%);
		} else if theme == darker {
			--background-color: hsl(hue, saturation, 10%);
			--navigation-color: hsl(hue, saturation, 6%);
			--header-color: var(--navigation-color);
			--content-color: hsl(hue, saturation, 20%);
			--input-color: hsl(hue, saturation, 4%);
			--input-border-color: hsl(hue, saturation, 18%);
			--thumbnail-color: hsl(hue, saturation, 17%);
			--item-thumbnail-color: var(--thumbnail-color);
			--highlight-color: hsl(hue, saturation, 35%);
			--highlighter-color: hsl(hue, saturation, 42%);
			--primary-text-color: hsl(hue, saturation, 100%);
			--secondary-text-color: hsl(hue, saturation, 75%);
		} else if theme == amoled {
			--background-color: hsl(hue, saturation, 0%);
			--navigation-color: hsl(hue, saturation, 2%);
			--header-color: var(--navigation-color);
			--content-color: hsl(hue, saturation, 14%);
			--input-color: hsl(hue, saturation, 2%);
			--input-border-color: hsl(hue, saturation, 12%);
			--thumbnail-color: hsl(hue, saturation, 12%);
			--item-thumbnail-color: var(--thumbnail-color);
			--highlight-color: hsl(hue, saturation, 20%);
			--highlighter-color: hsl(hue, saturation, 28%);
			--primary-text-color: hsl(hue, saturation, 100%);
			--secondary-text-color: hsl(hue, saturation, 65%);
		} else if theme == robloxDark {
			--background-color: #232527;
			--navigation-color: #191b1d;
			--header-color: var(--navigation-color);
			--content-color: #393b3d;
			--input-color: rgba(0,0,0,.7);
			--input-border-color: hsla(0,0%,100%,.2);
			--thumbnail-color: #d4d4d4;
			--item-thumbnail-color: rgba(57,59,61,.5);
			--highlight-color: #656668;
			--highlighter-color: #989898;
			--primary-text-color: #fff;
			--secondary-text-color: #bdbebe;
		} else if theme == robloxLight {
			--background-color: #f2f4f5;
			--navigation-color: #dee1e3;
			--header-color: var(--navigation-color);
			--content-color: #fff;
			--input-color: hsla(0,0%,100%,.9);
			--input-border-color: rgba(57,59,61,.2);
			--thumbnail-color: #d4d4d4;
			--item-thumbnail-color: rgba(0,0,0,.1);
			--highlight-color: #bdbebe;
			--highlighter-color: #b8b8b8;
			--primary-text-color: #393b3d;
			--secondary-text-color: #606162;
		}

		if theme != off {
			/*--header-color: hsl(200, 65%, 45%);*/

			--text-color: var(--primary-text-color);
			--secondary-color: var(--secondary-text-color);
		}
	}

	if theme != off {
		html,
		.scroller {
			background-color: var(--background-color) !important;
			color: var(--primary-text-color) !important
		}

		body,
		.content,
		.container-main,
		.container-footer,
		.warp,
		.table,
		.scroller .spacer,
		.avatar-back .thumbnail-2d-container,
		.item-details-thumbnail-container .thumbnail-2d-container,
		.groups-list .group-cards .list-item .group-card .group-card-thumbnail .thumbnail-2d-container,
		.section-content.remove-panel,
		.rbx-tab .rbx-tab-heading,
		.catalog-container .sticky .search-bars,
		.catalog-container .sticky .topic-container,
		#profile-current-wearing-avatar .thumbnail-2d-container,
		#recommendations-container .current-items > .layer,
		.notification-stream-list,
        .new-message .input-block input {
			background-color: transparent !important;
		}

		.rbx-left-col,
		.layer,
		.slide-switcher .slide-item-container .slide-item-container-left,
		.profile-avatar-left, .profile-avatar-left .thumbnail-span,
		.voting-panel .users-vote .vote-details .vote-container .vote-background, .voting-panel .users-vote .vote-details .vote-container .vote-background.has-votes,
		#navbar-search-input,
		.chat-search,
		.chat-main .chat-header,
		.dialog-header,
		.chat-windows-header,
		.create-chat-container .details-header-container,
		.select-friends-container .details-header-container,
		.tooltip .tooltip-inner,
		.notification-stream-header,
		.payment-method-label-clickable .payment-method-label:hover {
			background-color: var(--navigation-color) !important;
		}

		.dialog-message {
			background-color: var(--navigation-color) !important;
			border-color: var(--navigation-color) !important;
		}

		.dialog-message-container.message-inbound .dialog-triangle::after {
			border-color: transparent var(--navigation-color) transparent transparent !important;
		}

		.link-card-container.dialog-triangle::after,
		.link-card-container.dialog-triangle::before,
		.dialog-message-container.message-cluster-master .dialog-triangle.message-is-sending::after,
		.dialog-message-container.message-cluster-master .dialog-triangle.message-is-sending::before,
		.dialog-message-container.message-cluster-master .dialog-triangle::after,
		.dialog-message-container.message-cluster-master .dialog-triangle::before {
			border-color: transparent transparent transparent var(--navigation-color) !important;
		}

		.rbx-header {
			background-color: var(--header-color) !important;
			border-color: var(--header-color) !important;
		}

		.section-content,
		.stack .card-list .card-item,
		.rbx-tabs-horizontal .nav-tabs,
		.dropdown-menu,
		.popover,
		.table-striped > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th,
		.friends-content .avatar-card-content,
		.slide-switcher .slide-item-container .slide-item-container-right,
		.profile-avatar-right .profile-avatar-mask,
		.voting-panel .users-vote .vote-details .vote-container .vote-mask .segment,
		.messages .messageDivider,
		.chat-main,
		.dialog-container,
		.dialog-body,
		.details-container,
		.details-header-container,
		.details-btns,
		.details-btns-fixed,
		.friends-list-container,
		.add-friends-option,
		.sendr-notification-background,
		.meta-actions-overlay,
		.payment-method-label-clickable .payment-method-label {
			background-color: var(--content-color) !important;
		}

		.highlight-badge .fluid-highlight-text,
		.subscription-price {
			color: var(--content-color) !important;
		}

		.content,
		.section-content,
		.light-theme,
		.dark-theme,
		.text-link-secondary.active,
		.text-link-secondary:hover
		.text-name,
		.text-name:hover,
		.text-name:visited,
		.text-name.text-overflow,
		.refresh-link,
		.refresh-link-icon,
		.see-all-link,
		.see-all-link-icon,
		.touch .refresh-link,
		.touch .refresh-link-icon,
		.touch .see-all-link,
		.touch .see-all-link-icon
		.text-lead,
		.text-title,
		.text-link,
		.font-title,
		.rbx-header .text-header,
		.input-group .input-field,
		.menu-vertical .menu-option.active,
		.people-list .friend .friend-link,
		.people-info-card-container .place-container .place-info-container .place-info,
		.request-error-page-content .default-error-page,
		.item-details-info-header,
		.text-robux,
		.table,
		.text-emphasis,
		.text-sec,
		.text-warning
		.voting-panel .users-vote .vote-details .vote-numbers .count-left,
		.voting-panel .users-vote .vote-details .vote-numbers .count-right,
		.vlist .list-item .list-body .list-content a,
		.rbx-header .navbar-search .navbar-search-option:focus a,
		.rbx-header .navbar-search .navbar-search-option:hover a,
		.rbx-header .navbar-search .navbar-search-option .new-navbar-search-anchor .navbar-list-option-text,
		.container-header > h2,
		.select-group .select-option:hover,
		.avatar-card-container,
		.avatar-card-btns,
		.slide-switcher .slide-item-container .slide-item-container-right,
		.see-all-link,
		.see-all-link-icon,
		.dropdown-menu > a:focus,
		.dropdown-menu > a:hover,
		.dropdown-menu > li:focus,
		.dropdown-menu > li:hover,
		.rbx-left-col li .text-nav,
		.rbx-left-col li .text-nav:hover .fon...

Reviews

No reviews yet.