Skip to content

Ayu Theme for Roblox by ArthurDeAraujoNeves

Details

AuthorArthurDeAraujoNeves

LicenseMIT

Categoryhttps://www.roblox.com

Created

Updated

Size9.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         Ayu Theme for Roblox
@version      20241115.20.33
@namespace    aspimbr_
@description  A theme based in visual studio extension https://marketplace.visualstudio.com/items?itemName=teabyii.ayu
@author       Aspim_
@license      MIT
==/UserStyle== */

@-moz-document url-prefix("https://www.roblox.com/") {
:root {
    
    --theme: #e6b450;
    --bg: #0f131a;
    --details: #47526640;
    --details2: #1D232D;
    --title: #e6b450;
    --subTitle: #bfbdb6;
    --text: #fff;
    --text2: #565b66;
    --button: ;
    
    --inputBg: #0d1017;
    --inputPlaceholder: #bfbdb6;
    
    --borderRadius: 10px;
    --borderRadius2: 5px;
    --borderColor: #565b6645;
    
    --ansiRed: #ea6c73;
    
    --duration: 0.2s;
        
}

/*===========*/
/* SCROLLBAR */
/*==========*/

/* width */
::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: var(--details) !important;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--theme) !important; 
}

/*=========*/
/* Global */
/*========*/

body, .search-bars, .topic-carousel {
    
    background-color: var(--bg) !important;
}

img {
    
    border-radius: var(--borderRadius);
}

input {
    
    background-color: var(--inputBg) !important;
    border-color: var(--borderColor) !important;
}
input::placeholder {
    
    color: var(--inputPlaceholder) !important;
}
/* Pagination */
input[class=btr-pager-cur] {
    
    color: #bfbdb6 !important;
    background-color: var(--details2) !important;
}

select {
    
    background-color: var(--details2) !important;
}
option {
    
    background-color: var(--details2) !important;
}

input[type=checkbox]+label:before {
    
    background-color: var(--details2) !important;
    border-color: var(--details) !important;
    color: white !important;
}
input[type=checkbox]:checked+label:before {
    
    background-color: var(--theme) !important;
    border-color: var(--theme) !important;
}

/* Title of the game | Badge name */
.game-name-title, .game-card-name, .item-name {
    
    color: var(--subTitle) !important;
}

/*========*/
/* Layout */
/*========*/

/* Header, Sidebar, background content */
.content, #header, .simplebar-content-wrapper, #navigation, footer {
    
    background-color: var(--bg) !important;
}
.text-header {
    
    color: var(--text2) !important;
}

/* Sidebar */
#navigation {
    
    box-shadow: none;
}
/* line in profile sidebar */
.rbx-divider {
    
    background-color: var(--text2) !important;
}

/* Titles */
.builder-font h1, h2 {
    
    color: var(--title) !important;
}

/* Tabs */
.rbx-tabs-horizontal .nav-tabs {
    
    background-color: var(--theme) !important;
    overflow: hidden;
    border-radius: var(--borderRadius) !important;
    border-color: var(--borderColor) !important;
}
/* Tabs without active */
.dark-theme .rbx-tab .rbx-tab-heading {
    
    background-color: var(--details2);
}

/* Chat */
#chat-main {
    
    box-shadow: none;
}
#chat-header {
    
    background-color: var(--details2) !important;
}
#chat-body {
    
    background-color: var(--details2) !important;
}
.chat-friends {
    
    background-color: var(--details2) !important;
}

/* Opened chat */
.dialog-header, .dialog-visible {
    
    background-color: var(--details2) !important;
}
.dialogs .dialog-container .dialog-message-container .dialog-message {
    
    background-color: var(--details) !important;
    border: none;
}
/* Message from user */
.dark-theme .dialogs .dialog-container .dialog-message-container .dialog-message {
    
    border: none;
}
.dark-theme .dialogs .dialog-container .dialog-message-container.message-cluster-master .dialog-triangle:after, .dark-theme .dialogs .dialog-container .dialog-message-container.message-cluster-master .dialog-triangle:before {
    
    display: none;
}
/* Message from friend */
.dark-theme .dialogs .dialog-container .dialog-message-container.message-inbound .dialog-message {
    
    border: none;
}

.chat-windows-header {
    
    background-color: var(--details2) !important;
}
/* Add friends */
div[ng-click="toggleAddFriends()"] {
    
    background-color: var(--details2) !important;
}
.friend-container {
    
    background-color: var(--details2) !important;
}
/* Body */
#mCSB_3 {
    
    background-color: var(--details2) !important;
}

/*=======*/
/* Home */
/*======*/

/* Name of the friends */
.friends-carousel-display-name {
    
    color: var(--subTitle) !important;
}

/* Reording the Continue and Favorites to the top */
.game-home-page-container > div {
    
    display: flex !important;
    flex-direction: column !important;
}
/* Continue and favorite */
.game-sort-carousel-wrapper {
    
    order: 1;
}
/* Recommended */
div[data-testid="home-page-game-grid"] {
    
    order: 2;
}

/* Game in focus */
div[data-testid="game-grid"] > .focused {
    
    background-color: var(--details2) !important;
}
li[data-testid="wide-game-tile"]:hover .info-container {
    
    background-color: var(--details2) !important;
}
/* Name and rating */
li[data-testid="wide-game-tile"]:hover > div > .game-card-link {
    
    background-color: var(--details2) !important;
}

/*=========*/
/* PROFILE */
/*=========*/

/*Profile*/
.profile-header-content {
    
    background-color: var(--details) !important;
    border-radius: var(--borderRadius);
}
/*About*/
.section-content {
    
    background-color: var(--details) !important;
    border-radius: var(--borderRadius);
}
/* Details of the items from the player */
.profile-avatar-mask {
    
    background-color: var(--bg) !important;
}
/* Game name */
.btr-game-button {
    
    background-color: var(--details) !important;
    border-radius: var(--borderRadius);
    border-color: transparent !important;
}
/* Badge background */
.asset-thumb-container {
    
    background-color: var(--details) !important;
}
/* Options to see inventory */
#vertical-menu {
    
    background-color: var(--details) !important;
    border-radius: var(--borderRadius);
}
/* Modal from #vertical-menu */
.menu-secondary {
    
    background-color: var(--details2) !important;
    border-radius: var(--borderRadius);
}
/* Private inventory */
.section-content-off {
    
    background-color: var(--details) !important;
    border-radius: var(--borderRadius);
}

/*=========*/
/* Friends */
/*=========*/

.avatar-card-container {
    
    border-radius: var(--borderRadius);
    overflow: hidden;
}
/* User details */
.avatar-card-content {
    
    background-color: var(--details2) !important;
}
/* Ignores or accept */
.avatar-card-btns {
    
    background-color: var(--details2) !important;
}
/* Ignore button */
.avatar-card-btns > .ignore-friend {
    
    background-color: var(--ansiRed) !important;
    border-color: var(--ansiRed);
    transition: var(--duration);
}
.avatar-card-btns > .ignore-friend:hover {
    
    border-color: var(--ansiRed);
}
/* Accept button */
.avatar-card-btns > .accept-friend  {
    
    background-color: var(--details) !important;
    border-color: var(--details) !important;
    color: var(--text2) !important;
    transition: var(--duration);
}
/* Accept button */
.avatar-card-btns > .accept-friend:hover  {
    
    background-color: var(--theme) !important;
    border-color: var(--theme) !important;
    color: var(--text) !important;
}

/*===========*/
/* Game page */
/*===========*/

/* Arrows */
.carousel-controls.btn-primary-md {
    
    background-color: var(--details2) !important;
}
/* Game banner in carousel */
#game-details-carousel-container > div[data-testid="carousel"] > .thumbnail-2d-container {
    
    background-color: transparent !important;
}
#game-details-carousel-container > div[data-testid="carousel"] > .thumbnail-2d-container > img {
    
    border-radius: var(--borderRadius2);
}

/* Play button */
.btn-common-play-game-lg {
    
    background-color: var(--theme) !important;
    width: 50% !important;
    transition: var(--duration);
}
.btn-common-play-game-lg:hover {
    
    background-color: var(--details) !important;
    width: 100% !important;
}

/* Private server */
#rbx-private-servers > .section-content {
    
    padding: 10px;
}

/* Badge */
.stack .stack-list .stack-row {
    
    background-color: var(--details2) !important;
    border-radius: var(--borderRadius);
}
/* Badge not taked */
.btr-badges-container .badge-row.btr-notowned {
    
    background-color: var(--details2) !important;
}

/* Server card */
.card-item {
    
    background-color: var(--details) !important;
    border-radius: var(--borderRadius);
}
/* Join server */
.card-item > div[class="rbx-game-server-details game-server-details"] > span > button {
    
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background-color: var(--theme) !important;
    border-radius: var(--borderRadius2);
    border-color: var(--borderColor);
    color: var(--text);
    font-size: 15px;
    width: 50%;
    height: 40px;
    transition: var(--duration);

}
.card-item > div[class="rbx-game-server-details game-server-details"] > span > button:hover {
    
    background-color: var(--details) !important;
    border-radius: var(--borderRadius2);
    border-color: var(--details) !important;
    width: 100%;
}
/* More players */
.dark-theme .stack .card-list .player-thumbnails-container .player-avatar.hidden-players-placeholder {
    
    background-color: var(--details) !important;
}


/*======*/
/* SHOP */
/*======*/

/* Product background */
.thumbnail-2d-container {
    
    background-color: var(--details) !important;
}

.dropdown-menu {
    
    background-color: var(--bg) !important;
}

}

Reviews

No reviews yet.