DevStyle (Devforum Redesign)

Resources Community Resources
#1

images(1)g
images(1)g800×160 19.2 KB

About

An all new Devforum redesign! Personally I thought the devforum looked dull and not very appealing. So I created this all new style for it! This was inspired by RefinedBlox, which I highly recommend using.

ScreenShots

Screenshot 2023-10-22 130043
Screenshot 2023-10-22 1300431750×904 133 KB



Screenshot 2023-10-22 130143
Screenshot 2023-10-22 1301431745×900 225 KB



Screenshot 2023-10-22 132346
Screenshot 2023-10-22 1323461749×906 366 KB

Download

To download DevStyle you will need to install Stylus on the chrome web store. After you have installed that go to the DevStyle and press install. After it brings you to the code page press Install Style.

Are you going to use DevStyle? If not why?
  • Yes
  • Maybe
  • No

0 voters

12 Likes
DevForum Condensed (DevForum Redesign)
DevForum Plus - Changelog
#2

I won’t be using DevStyle because it is less of a redesign and more of a simple color change.

6 Likes
#3

What would you like to see change?

#4

Nothing to be honest. I like the Devforum how it is now.

6 Likes
#5

Having the DevForum with the color scheme of “RefinedBlox” is pretty neat, so thanks for this.

1 Like
#6

Just to let anyone know who even might need this it is not fully finished and if anything is wrong with it please report it to me

1 Like
#8

I’d use Roblox Dark as it matches with the creator documentation

1 Like
#9

I personally don’t find this of any use, other than extra memory usage in Chrome by using ‘Stylus’ - The Chrome Extension.

Sure, it may look more visually appealing to some, but it isn’t worth the performance cost.

2 Likes
#10

It’s really just the Roblox Dark theme, but green. Not going to use this.

2 Likes
#11

I made the post title centered:

Screenshot (75)
Screenshot (75)1888×118 37.9 KB

here’s the CSS code I used (i barely use CSS so sorry if I use the wrong methods):

.extra-info-wrapper, .two-rows {
    margin: auto;
    width: 50%;
    display: flex;
    justify-content: center;
}
    
.extra-info-wrapper .topic-header-extra .discourse-tags .discourse-tag {
    color: hsl(0, 0%, 50%) !important;
}
#12

Looks nice, want me to add settings to change some things like that and add light mode

#13

Though I prefer Dark Mode, Light Mode support and change-able settings would be a nice addition.

1 Like
#14

It’s a very good theme, but it lacks several elements such as hover background color or reply color. I’ve added some to assist you. You should also implement the font consistently throughout. :grinning:

/* ==UserStyle==
@name         devforum.roblox.com
@version      20231022.19.56
@namespace    userstyles.world/user/gamesaver2010
@description  hi
@author       gamesaver2010
@license      No License
==/UserStyle== */
@-moz-document url-prefix("https://devforum.roblox.com/") {
    @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
    :root {
        --secondary: #111827;
        --gray-900: #111827;
        --gray-800: #1f2937;
        --gray-700: #374151;
        --gray-600: #4b5563;
        --green-500: #22c55e;
    }

    body {
        background: #111827 !important;
        font-family: 'Nunito', 'Quicksand', sans-serif !important;
    }
    .d-header > .wrap {
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: 0 10px;
    }
    .d-header {
        display: flex;
        align-items: center;
        width: 90%;
        z-index: 1000;
        background-color: rgb(31, 41, 55);
        box-shadow: 0 2px 4px -1px rgb(15 19 25 / 61%);
        backface-visibility: hidden;
        /* margin: 20px; */
    }
    .btn-flat .d-icon {
        color: #d1cfcf;
    }

    .topic-list .topic-list-data.posters {
        height: 29px;
        display: none;
    }

    .btn {
        border: 1px solid transparent;
        font-size: var(--font-0);
        line-height: normal;
        box-sizing: border-box;
        padding: 0.5em 0.65em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        font-weight: normal;
        color: var(--primary);
        background: var(--primary-low);
        cursor: pointer;
        transition: all 0.25s;
        border-radius: 5px;
    }

    .nav-pills > li > a,
    .nav-pills > li button {
        border: none;
        padding: 6px 12px;
        color: var(--primary);
        font-size: var(--font-up-1);
        line-height: var(--line-height-small);
        box-sizing: border-box;
        min-height: 30px;
        display: flex;
        align-items: center;
        transition: background-color 0.2s, color 0.2s;
        border-radius: 8px;
    }

    .timeline-container .topic-timeline .timeline-date-wrapper {
        max-width: 9em;
        overflow-wrap: anywhere;
        display: none;
    }
    .topic-status-info,
    .topic-timer-info {
        display: none;
    }

    #topic-footer-buttons .pinned-button .reason .text,
    #topic-footer-buttons .topic-notifications-button .reason .text {
        margin-left: 0.5em;
        line-height: var(--line-height-medium);
        display: none;
    }

    #ember87 {
        display: none;
    }

    .suggested-topics-message {
        display: none;
    }

    .topic-post-badges {
        display: none;
    }

    .discourse-tags {
        display: none;
    }
    .nav-pills > li a.active,
    .nav-pills > li button.active {
        color: var(--secondary);
        background-color: var(--green-500);
    }

    #footer_rbx {
        display: none;
    }

    .btn-primary .d-icon,
    .admin-wizards-custom-fields .btn.save:enabled .d-icon {
        color: #bdbcbc;
        margin-right: 0.45em;
        transition: color 0.25s;
    }

    .btn {

        font-size: var(--font-0);
        line-height: normal;
        box-sizing: border-box;
        padding: 0.5em 0.65em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        font-weight: normal;
        color: var(--primary);
        background: #11182700;
        cursor: pointer;
        transition: all 0.25s;
        border-radius: 5px;
        border: 1px #6b6b6b solid;
    }

    .topic-map {
        background: #111827;
        border: 0px solid #ffffff;
        border-top: none;
    }

    .topic-map section {
        border: 2px solid var(--gray-800);
        border-radius: 6px;
    }

    .topic-map .buttons .btn {
        border: 0;
        padding: 0 23px;
        color: var(--primary-med-or-secondary-high);
        background: #0e131e;
        border-left: 1px solid va;
        display: none;
    }

    .d-header #site-logo {
        height: 2.667em;
        content: url(https://i.ibb.co/2kvtPNZ/images-1.png);
    }
    .user-main .about.collapsed-info .details {
        position: relative;
        padding: 0;
        margin-top: 0;
        /* border-bottom: 1px solid var(--primary-low); */
    }

    .user-main .about.collapsed-info .details .primary {
        width: 100%;
        background: #111827;
    }
    .user-content {
        padding-bottom: 12px;
        margin-bottom: 12px;
        background-color: #111827;
        box-sizing: border-box;
    }

    .user-stream .item,
    .user-stream .user-stream-item {
        background-color: #111827;
        border-bottom: 1px solid var(--primary-low);
        padding: 1em 0.53em;
        list-style: none;
    }
    .user-main .about .details {
        background: #111827;
        border-bottom: 1px solid var(--primary-low);
    }

    .user-main .about .details .groups {
        display: none;
    }

    .select-kit.multi-select .multi-select-header {
        background: #111827;
        border-color: var(--primary-medium);
    }

    .badge-card {
        background-color: #111827;
        border: 1px solid var(--primary-low);
        position: relative;
    }

    .menu-panel {
        border: 0px solid var(--primary-low);
        box-shadow: 0 12px 12px rgb(11 15 20);
        background-color: #1f2937;
        z-index: 1000;
        padding: 0.5em;
        width: 320px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .search-container .search-header {
        padding: 1rem 10%;
        background: #111827;
    }

    .search-container .search-filters {
        background: #111827;
        display: flex;
        flex-direction: column;
    }

    .search-container .search-filters .search-advanced-filters {
        background: #111827;
    }

    .select-kit.combo-box .select-kit-header {
        background: #111827;
        border-color: #909090;
    }

    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: var(--font-0);
        line-height: normal;
        box-sizing: border-box;
        padding: 0.5em 0.65em;
        display: inline-block;
        margin-bottom: 9px;
        color: var(--primary);
        background-color: #111827;
        border: 1px solid var(--primary-medium);
        border-radius: var(--d-input-border-radius);
    }

    .open .grippie {
        cursor: row-resize;
        padding: 4px 0;
        background: #34455d;
    }

    #reply-control .reply-area {
        margin: 0 auto;
        padding: 8px;
        box-sizing: border-box;
        height: calc(100% - 11px);
        width: 100%;
        background: #111827;
    }

    .d-editor-textarea-wrapper {
        display: flex;
        flex: 1;
        flex-direction: column;
        background-color: #111827;
        position: relative;
        border: 1px solid var(--primary-medium);
        border-radius: var(--d-input-border-radius);
        min-height: 0;
    }

    #reply-control.draft,
    #reply-control.saving {
        height: 40px !important;
        align-items: center;
        background: var(--green-500);
        color: var(--secondary);
        flex-direction: row;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        justify-content: space-between;
    }
    #reply-control.draft .composer-controls .d-icon,
    #reply-control.saving .composer-controls .d-icon {
        color: #fff;
    }

    .user-menu .quick-access-panel .read {
        background-color: #1f2937;
    }
    div.menu-links-header .menu-links-row button.active {
        border: 1px solid var(--primary-low);
        border-bottom: 0px solid var(--secondary);
        position: relative;
    }

    div.menu-links-header .menu-links-row button.active {
        border: 0px solid var(--primary-low);
        border-bottom: 0px solid var(--secondary);
        position: relative;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background: #111827;
    }
    .search-container .search-bar {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        background: #111827;
    }

    .user-menu .menu-panel .panel-body-bottom .btn,
    .hamburger-panel .menu-panel .panel-body-bottom .btn {
        background-color: #1f2937;
        color: var(--primary-high);
    }

    .drop-down-mode .d-header-icons .active .icon {
        position: relative;
        background-color: #1f2937;
        cursor: default;
        border: 0px solid var(--primary-low);
    }

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="date"]:focus,
    input[type="month"]:focus,
    input[type="time"]:focus,
    input[type="week"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="color"]:focus,
    .select-kit.single-select.is-expanded .select-kit-header:not(.btn),
    .select-kit.single-select .select-kit-header:not(.btn):focus,
    .select-kit.single-select .select-kit-header:not(.btn):active,
    .select-kit.multi-select.is-expanded .multi-select-header,
    .select-kit.multi-select .multi-select-header:focus,
    .d-date-input .date-picker:focus {
        border-color: var(--green-500);
        outline: 1px solid var(--green-500);
    }

    .discourse-no-touch .btn:hover,
    .discourse-no-touch .btn.btn-hover {
        background: var(--green-500);
    }

    aside.quote .title,
    blockquote,
    .quote aside .quote,
    .quote aside .title,
    .quote aside blockquote,
    .quote aside .onebox,
    .quote aside .onebox-result {
        border-left: 5px solid var(--gray-800);
        background-color: var(--gray-700);
    }

    .user-card .card-content,
    .group-card .card-content {
        background: var(--gray-800);
        border-radius: 12px;
        border: 2px solid var(--gray-700);
    }

    .embedded-posts {
        border: 1px solid var(--gray-800);
        border-radius: 12px;
    }

    .topic-body,
    .topic-avatar,
    .embedded-posts.bottom .row .topic-avatar,
    .embedded-posts.bottom .row .topic-body {
        border-top: 1px solid var(--gray-800);
    }

    .nav-pills > li > a:hover,
    .nav-pills > li button:hover {
        color: white;
        background-color: var(--gray-800);
    }

    .topic-map section > section {
        border: var(--gray-800);
    }

    .select-kit .select-kit-row.is-highlighted,
    .select-kit .select-kit-row.is-selected.is-highlighted,
    .select-kit .select-kit-collection:hover .select-kit-row.is-highlighted:hover {
        background: var(--gray-800);
    }

    .user-main .about .secondary {
        border-top: 1px solid var(--gray-800);
    }
    .user-main .about .details {
        border-bottom: 1px solid var(--gray-800);
    }
    
    .user-menu .quick-access-panel li:hover {
        background-color: var(--gray-700);
    }
    
    .user-menu .quick-access-panel li {
        border-radius: 6px;
        margin-top: 2px
    }
}
1 Like
#15

By the way I’d recommend changing @name devforum.roblox.com to something like @name DevStyle, it would allow for easier identification of the theme/style especially if someone has multiple styles installed.

Example below;

image

1 Like
#16

The Developer Forum looks equally, if not slightly less dull than ROBLOX’s website.

2 Likes
#17

image (37)
image (37)800×450 45.2 KB

3 Likes
#18

since my last reply i added tons of elements to the theme, also applied the font everywere and stuff.

/* ==UserStyle==
@name         devforum.roblox.com
@version      20231022.19.56
@namespace    userstyles.world/user/gamesaver2010
@description  hi
@author       gamesaver2010
@license      No License
==/UserStyle== */
@-moz-document url-prefix("https://devforum.roblox.com/") {
    @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
    :root {
        --secondary: #111827;
        --gray-900: #111827;
        --gray-800: #1f2937;
        --gray-700: #374151;
        --gray-600: #4b5563;
        --gray-500: #6b7280;
        --green-500: #22c55e;
    }

    body {
        background: #111827 !important;
        font-family: 'Nunito', 'Quicksand', sans-serif !important;
    }

    * {
        font-family: 'Nunito', 'Quicksand', sans-serif !important;
    }

    .d-header > .wrap {
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: 0 10px;
    }
    .d-header {
        display: flex;
        align-items: center;
        width: 90%;
        z-index: 1000;
        background-color: rgb(31, 41, 55);
        box-shadow: 0 2px 4px -1px rgb(15 19 25 / 61%);
        backface-visibility: hidden;
        /* margin: 20px; */
    }
    .btn-flat .d-icon {
        color: #d1cfcf;
    }

    .topic-list .topic-list-data.posters {
        height: 29px;
        display: none;
    }

    .btn {
        font-size: var(--font-0);
        line-height: normal;
        box-sizing: border-box;
        padding: 0.5em 0.65em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        font-weight: normal;
        color: var(--primary);
        background: var(--primary-low);
        cursor: pointer;
        transition: all 0.25s;
        border-radius: 5px;
        border: 1px var(--gray-800) solid;
    }

    .nav-pills > li > a,
    .nav-pills > li button {
        border: none;
        padding: 6px 12px;
        color: var(--primary);
        font-size: var(--font-up-1);
        line-height: var(--line-height-small);
        box-sizing: border-box;
        min-height: 30px;
        display: flex;
        align-items: center;
        transition: background-color 0.2s, color 0.2s;
        border-radius: 8px;
    }

    .timeline-container .topic-timeline .timeline-date-wrapper {
        max-width: 9em;
        overflow-wrap: anywhere;
        display: none;
    }
    .topic-status-info,
    .topic-timer-info {
        display: none;
    }

    #topic-footer-buttons .pinned-button .reason .text,
    #topic-footer-buttons .topic-notifications-button .reason .text {
        margin-left: 0.5em;
        line-height: var(--line-height-medium);
        display: none;
    }

    #ember87 {
        display: none;
    }

    .suggested-topics-message {
        display: none;
    }

    .topic-post-badges {
        display: none;
    }

    .discourse-tags {
        display: none;
    }
    .nav-pills > li a.active,
    .nav-pills > li button.active {
        color: var(--secondary) !important;
        background-color: var(--green-500) !important;
    }

    #footer_rbx {
        display: none;
    }

    .btn-primary .d-icon,
    .admin-wizards-custom-fields .btn.save:enabled .d-icon {
        color: #bdbcbc;
        margin-right: 0.45em;
        transition: color 0.25s;
    }

    .btn {
        font-size: var(--font-0);
        line-height: normal;
        box-sizing: border-box;
        padding: 0.5em 0.65em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        font-weight: normal;
        color: var(--primary);
        background: #11182700;
        cursor: pointer;
        transition: all 0.25s;
        border-radius: 5px;
        border: 1px var(--gray-800) solid;
    }

    .btn:focus {
        background: var(--gray-800);
        color: var(--primary);
    }
    .btn:focus .d-icon {
        color: var(--primary);
    }
    .topic-map {
        background: #111827;
        border: 0px solid #ffffff;
        border-top: none;
    }

    .topic-map section {
        border: 2px solid var(--gray-800);
        border-radius: 6px;
    }

    .topic-map .buttons .btn {
        border: 0;
        padding: 0 23px;
        color: var(--primary-med-or-secondary-high);
        background: #0e131e;
        border-left: 1px solid va;
        display: none;
    }

    .d-header #site-logo {
        height: 2.667em;
        content: url(https://i.ibb.co/2kvtPNZ/images-1.png);
    }
    .user-main .about.collapsed-info .details {
        position: relative;
        padding: 0;
        margin-top: 0;
        /* border-bottom: 1px solid var(--primary-low); */
    }

    .user-main .about.collapsed-info .details .primary {
        width: 100%;
        background: #111827;
    }
    .user-content {
        padding-bottom: 12px;
        margin-bottom: 12px;
        background-color: #111827;
        box-sizing: border-box;
    }

    .user-stream .item,
    .user-stream .user-stream-item {
        background-color: #111827;
        border-bottom: 1px solid var(--primary-low);
        padding: 1em 0.53em;
        list-style: none;
    }
    .user-main .about .details {
        background: #111827;
        border-bottom: 1px solid var(--primary-low);
    }

    .user-main .about .details .groups {
        display: none;
    }

    .select-kit.multi-select .multi-select-header {
        background: #111827;
        border-color: var(--primary-medium);
    }

    .badge-card {
        background-color: #111827;
        border: 1px solid var(--primary-low);
        position: relative;
    }

    .menu-panel {
        border: 1px solid var(--gray-700);
        box-shadow: 0 12px 12px rgb(11 15 20);
        border-radius: 12px;
        background-color: #1f2937;
        z-index: 1000;
        padding: 0.5em;
        width: 320px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .search-container .search-header {
        padding: 1rem 10%;
        background: #111827;
    }

    .search-container .search-filters {
        background: #111827;
        display: flex;
        flex-direction: column;
    }

    .search-container .search-filters .search-advanced-filters {
        background: #111827;
    }

    .select-kit.combo-box .select-kit-header {
        background: #111827;
        border-color: var(--gray-800);
    }

    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: var(--font-0);
        line-height: normal;
        box-sizing: border-box;
        padding: 0.5em 0.65em;
        display: inline-block;
        margin-bottom: 9px;
        color: var(--primary);
        background-color: #111827;
        border: 1px solid var(--primary-medium);
        border-radius: var(--d-input-border-radius);
    }

    .open .grippie {
        cursor: row-resize;
        padding: 4px 0;
        background: #34455d;
    }

    #reply-control .reply-area {
        margin: 0 auto;
        padding: 8px;
        box-sizing: border-box;
        height: calc(100% - 11px);
        width: 100%;
        background: #111827;
    }

    .d-editor-textarea-wrapper {
        display: flex;
        flex: 1;
        flex-direction: column;
        background-color: #111827;
        position: relative;
        border: 1px solid var(--primary-medium);
        border-radius: var(--d-input-border-radius);
        min-height: 0;
    }

    #reply-control.draft,
    #reply-control.saving {
        height: 40px !important;
        align-items: center;
        background: var(--green-500);
        color: var(--secondary);
        flex-direction: row;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        justify-content: space-between;
    }
    #reply-control.draft .composer-controls .d-icon,
    #reply-control.saving .composer-controls .d-icon {
        color: #fff;
    }

    .user-menu .quick-access-panel .read {
        background-color: #1f2937;
    }
    div.menu-links-header .menu-links-row button.active {
        border: 1px solid var(--primary-low);
        border-bottom: 0px solid var(--secondary);
        position: relative;
    }

    div.menu-links-header .menu-links-row button.active {
        border: 0px solid var(--primary-low);
        border-bottom: 0px solid var(--secondary);
        position: relative;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background: #111827;
    }
    .search-container .search-bar {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        background: #111827;
    }

    .user-menu .menu-panel .panel-body-bottom .btn,
    .hamburger-panel .menu-panel .panel-body-bottom .btn {
        background-color: #1f2937;
        color: var(--primary-high);
    }

    .drop-down-mode .d-header-icons .active .icon {
        position: relative;
        background-color: #1f2937;
        cursor: default;
        border: 0px solid var(--primary-low);
    }

    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="date"]:focus,
    input[type="month"]:focus,
    input[type="time"]:focus,
    input[type="week"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="color"]:focus,
    .select-kit.single-select.is-expanded .select-kit-header:not(.btn),
    .select-kit.single-select .select-kit-header:not(.btn):focus,
    .select-kit.single-select .select-kit-header:not(.btn):active,
    .select-kit.multi-select.is-expanded .multi-select-header,
    .select-kit.multi-select .multi-select-header:focus,
    .d-date-input .date-picker:focus {
        border-color: var(--green-500);
        outline: 1px solid var(--green-500);
    }

    .discourse-no-touch .btn:hover,
    .discourse-no-touch .btn.btn-hover {
        background: var(--green-500);
    }

    aside.quote .title,
    blockquote,
    .quote aside .quote,
    .quote aside .title,
    .quote aside blockquote,
    .quote aside .onebox,
    .quote aside .onebox-result {
        border-left: 5px solid var(--gray-800);
        background-color: var(--gray-700);
    }

    .user-card .card-content,
    .group-card .card-content {
        background: var(--gray-800);
        border-radius: 12px;
        border: 2px solid var(--gray-700);
    }

    .embedded-posts {
        border: 1px solid var(--gray-800);
        border-radius: 12px;
    }

    .nav-pills > li > a:hover,
    .nav-pills > li button:hover {
        color: white;
        background-color: var(--gray-800);
    }

    .topic-map section > section,
    .archetype-private_message .topic-body .cooked {
        border: var(--gray-800);
    }

    .select-kit .select-kit-row.is-highlighted,
    .select-kit .select-kit-row.is-selected.is-highlighted,
    .select-kit .select-kit-collection:hover .select-kit-row.is-highlighted:hover {
        background: var(--gray-800);
    }



    .topic-body,
    .topic-avatar,
    .embedded-posts.bottom .row .topic-avatar,
    .embedded-posts.bottom .row .topic-body,
    .user-main .about .secondary,
    .post-links-container .post-links,
    div.poll .poll-buttons,
    .user-menu .quick-access-panel,
    hr {
        border-top: 1px solid var(--gray-800);
    }

    .user-main .about .details,
    .topic-list-item,
    tr,
    .user-main .about.collapsed-info .details,
    .user-stream .item,
    .user-stream .user-stream-item,
    .user-content .user-notifications-filter,
    div.poll .poll-title,
    .select-kit.single-select .select-kit-filter.is-expanded {
        border-bottom: 1px solid var(--gray-800);
    }

    div.poll .poll-container {
        border-right: 1px solid var(--gray-800);
    }

    div.poll {
        border: 1px solid var(--gray-800);
        border-radius: 12px;
    }



    tbody {
        border-top: 3px solid var(--gray-800);
    }

    .user-menu .quick-access-panel li:hover {
        background-color: var(--gray-700);
    }

    .user-menu .quick-access-panel li {
        border-radius: 6px;
        margin-top: 2px;
    }

    .user-card,
    .group-card {
        border-radius: 13px;
    }

    .user-card .badge-section .user-badge,
    .user-card .badge-section .more-user-badges a {
        background: var(--gray-900);
        border: 1px solid var(--gray-700);
        border-radius: 6px;
    }

    .user-secondary-navigation .nav-stacked li,
    .user-secondary-navigation .nav-stacked li {
        margin-top: 2px;
        border-radius: 12px;
    }

    .user-secondary-navigation .nav-stacked li:hover,
    .user-secondary-navigation .nav-stacked li.active,
    nav.post-controls .actions .double-button:hover button,
    nav.post-controls .actions .double-button button.button-count + .toggle-like.d-hover,
    div.poll .results .bar-back {
        background: var(--gray-800);
    }

    nav.post-controls .actions button.d-hover,
    nav.post-controls .actions button:focus,
    nav.post-controls .actions button:active,
    nav.post-controls .show-replies:hover,
    nav.post-controls .show-replies:focus {
        background: var(--gray-800);
        border-radius: 4px;
    }

    div.poll .results .bar {
        background: var(--gray-600);
    }

    div.poll .results .chosen .bar {
        background: var(--green-500);
    }

    .topic-map > section {
        margin-bottom: 6px;
    }

    .placeholder-animation,
    .card-avatar-placeholder::before {
        background: var(--gray-700);
        background: linear-gradient(to right, var(--gray-700) 10%, var(--gray-600) 18%, var(--gray-700) 33%);
    }

    a,
    a:active,
    a:hover,
    a:visited {
        color: var(--green-500);
    }

    .list-cell,
    .table-heading,
    .category-list td,
    .category-list th,
    .category-list .topics .badge-notification,
    .category-list .category .badge-notification,
    .category-list .featured-topic a.last-posted-at,
    .category-list .featured-topic a.last-posted-at:visited {
        color: var(--gray-500);
    }

    .select-kit.is-expanded .select-kit-body {
        border: 2px solid var(--gray-800);
        border-radius: 6px;
    }

    .extra-info-wrapper,
    .two-rows {
        margin: auto;
        width: 50%;
        display: flex;
        justify-content: center;
    }

    .extra-info-wrapper .topic-header-extra .discourse-tags .discourse-tag {
        color: hsl(0, 0%, 50%) !important;
    }
}

new:

image
image1920×932 131 KB

old:

image
image1920×932 122 KB

1 Like
#19

Adding this, thanks for contributing to it, Next update should be adding settings!

#20

Haha, what colors would you like to see when settings are added?

#21

Not green, that’s for sure. It does not fit with the style of the website. The theme is clearly white and blue, just like how ROBLOX…Was…Before 2020.

2 Likes