Skip to content

Steam Amoled by xiggi

Write a review Install Get Stylus

Details

Authorxiggi

LicenseNo License

Categorysteam

Created

Updated

Size16 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Deep Dark theme for Steam.

Notes

Still in progress, so expect many bugs.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         Steam Amoled
@version      20240902.07.14
@namespace    ?
==/UserStyle== */

@-moz-document domain("steamcommunity.com") {
    :root {
        /** Backgrounds **/
        --main-bg: rgb(12, 12, 12);
        
        --second-bg: rgb(21, 21, 21);
        --second-bg-opacity: rgba(21, 21, 21, .5);
        
        --third-bg: rgb(31, 31, 31);
        --third-bg-hover: rgb(31 31 31 / 80%);;
        
        --gray-bg: rgb(31, 31, 31);
}

body.v6 {
    background: var(--main-bg);
    font-family: "Motiva Sans", Sans-serif;
    font-weight: 300;
}

body {
    background: var(--main-bg) !Important;
    color: #8F98A0;
}

body.apphub_blue, body.v6.game_bg, body.v6.app.game_bg.application.responsive_page, ._2N8SepiLeBUusG1vbHCgiY, .react_landing_background {
    background: var(--main-bg) !Important;
}

.game_page_background.game {
    background: var(--main-bg);
    background-image: none !Important;
}

.friends_nav h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
}

.friends_nav a {
    color: #ccc;
}

.friends_nav a:hover, .friends_nav a:active {
    color: #fff;
    transition: 0.2s;
}

.count {
    color: #fff;
}

.search_results_none {
    background: var(--second-bg-opacity);
    text-align: center;
}

input[type=text], input[type=password], input[type=number], select {
    color: #909090;
    background-color: rgba( 0, 0, 0, 0.2 );
    border: 1px solid transparent;
    /* box-shadow: 1px 1px 0 0 rgb(91 132 181 / 20%); */
    border-radius: 3px;
}

.group_block {
    background-color: var(--second-bg);
}

.profile_small_header_texture {
    background: var(--second-bg);
    line-height: 50px;
    border-radius: 20px;
    font-weight: 600;
}

.apphub_background {
    background-image: none !important;
}

.apphub_Card {
    background-color: var(--second-bg);
}

.apphub_sectionTabsHR {
    background-color: var(--second-bg);
}

.apphub_sectionTab.active > span, .apphub_responsive_tab .responsive_tab_control .responsive_tab_control_inner {
    background: var(--second-bg);
}

.profile_subpage_column .maincontent, body.migrated_profile_page .profile_subpage_column #BG_bottom.maincontent {
    background-image: none;
    background: var(--main-bg);
}

.achieveTxtHolder {
    border: 1px solid var(--third-bg);
    border-radius: 10px;
    padding: 0 10px;
}

.achieveFill {
    background: #17435c;
    border-radius: 10px;
}

.achieveTxt h3 {
    font-weight: normal;
    font-size: 17px;
    color: #fff;
    line-height: 15px;
}

.achieveTxt h5 {
    font-weight: normal;
    font-size: 12px;
    color: #ccc;
}

.achievePercent {
    float: right;
    position: relative;
    margin-top: 20px;
    margin-right: 20px;
    color: #66C0F4;
    font-size: 13px;
    z-index: 40;
}

.community_home_search_apps, .community_home_search_players {
    background-color: var(--third-bg);
    border: 1px solid transparent;
    color: #fff;
}

.profile_award {
    background: var(--second-bg);
}

.profile_small_header_text {
    line-height: 35px;
}

.profile_small_header_arrow {
    margin-left: 5px;
    margin-right: 5px;
}

.workshopItemCollection, #NoItemsContainer {
    background-color: var(--second-bg);
}

.workshopItemCollection:hover {
    background-color: var(--third-bg);
}

.hover_box {
    background-color: var(--third-bg);
}

.workshopItemCollection .fileRating {
    margin-bottom: 5px;
}

.responsive_tab_baseline {
    background-color: var(--third-bg);
}

.sectionTab.active > span {
    background: var(--third-bg);
}

#ScreenshotUploadLink, #VideoUploadLink {
    background-color: var(--third-bg);
    color: #ccc;
}

#ScreenshotUploadLink:hover, #VideoUploadLink:hover {
    background-color: #417B9C;
    color: #fff;
}

.newmodal {
    background: radial-gradient(circle at top left, var(--second-bg) 0%, var(--third-bg) 60%), #25282e;
}

.newmodal_content_innerbg {
    background-color: transparent;
}

.editGuidePageControls {
    text-align: center;
    margin-bottom: 20px;
}

.btn_grey_white_innerfade, .btn_blue_white_innerfade {
    padding: 10px 20px;
}

.blotter_block {
    background-color: var(--second-bg);
}

.sectionTab, a.sectionTab {
    color: #ccc;
    background-color: var(--second-bg);
}

.friend_block_v2 {
    background-color: var(--second-bg);
}


.forum_op {
    background-color: var(--second-bg);
    background-image: none;
    border-color: transparent;
}

.forumtopic_comments .commentthread_comment {
    background-color: var(--second-bg);
    border-color: transparent;
}

.forum_topic {
    background-color: var(--second-bg);
}

.forum_topic:hover {
    background-color: var(--third-bg);
}

.apphub_StorePrice {
    border: 1px solid #4e4c4a;
    color: #ccc;
    background: var(--main-bg);
}

.adultcontent_warningbar_ctn {
    background: linear-gradient(to right, rgba(226,244,255,0.3), var(--main-bg) 70%);
}

.apphub_sectionTab:hover {
    background: rgba( 103, 193, 245, 0.2 );
    transition: 0.2s;
}

.btnv6_blue_hoverfade:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover {
    background: rgba( 103, 193, 245, 0.5 );
    transition: 0.2s;
}

.btnv6_blue_hoverfade {
    border-radius: 5px;
}

.just_added_to_list {
    background-color: rgba( 64, 128, 183, 0.2);
}

.group_tab.active > span {
    background: var(--second-bg);
}

.grouppage_header {
    border-bottom: 5px solid var(--second-bg);
}

.group_associated_game {
    background: var(--second-bg);
}

.member_block {
    background: var(--second-bg);
}

.member_block .rank_icon {
    background-color: var(--third-bg);
}

._1HwWXjF06mJ9sG_9KXlgA- {
    background-color: var(--second-bg);
}

.profile_friends.title_bar, .profile_groups.title_bar {
    background: linear-gradient(45deg, #015e80, var(--main-bg));
}

.supernav_content {
    background: var(--second-bg);
}

div#global_header .submenuitem.active, div#global_header .submenuitem:hover {
    background: var(--third-bg-hover);
    color: #fff;
}
}

@-moz-document domain("store.steampowered.com") {
    :root {
        /** Backgrounds **/
        --main-bg: rgb(12, 12, 12);
        
        --second-bg: rgb(21, 21, 21);
        --second-bg-opacity: rgba(21, 21, 21, .5);
        
        --third-bg: rgb(31, 31, 31);
        --third-bg-hover: rgb(31 31 31 / 80%);;
        
        --gray-bg: rgb(31, 31, 31);
}

body.v6 {
    background: var(--main-bg);
    font-family: "Motiva Sans", Sans-serif;
    font-weight: 300;
}

body {
    background: var(--main-bg) !Important;
    color: #8F98A0;
}

body.apphub_blue, body.v6.game_bg, body.v6.app.game_bg.application.responsive_page, ._2N8SepiLeBUusG1vbHCgiY, .react_landing_background {
    background: var(--main-bg) !Important;
}

.game_page_background.game {
    background: var(--main-bg);
    background-image: none !Important;
}

.friends_nav h4 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
}

.friends_nav a {
    color: #ccc;
}

.friends_nav a:hover, .friends_nav a:active {
    color: #fff;
    transition: 0.2s;
}

.count {
    color: #fff;
}

.search_results_none {
    background: var(--second-bg-opacity);
    text-align: center;
}

input[type=text], input[type=password], input[type=number], select {
    color: #909090;
    background-color: rgba( 0, 0, 0, 0.2 );
    border: 1px solid transparent;
    /* box-shadow: 1px 1px 0 0 rgb(91 132 181 / 20%); */
    border-radius: 3px;
}

.carousel_container.spotlight .carousel_items > * .store_capsule {
    background-image:none;
    background-color: var(--second-bg);
}
    
.store_capsule .discount_block.daily_deal_discount > .discount_prices {
    background-color: var(--second-bg);
}
    
    .store_capsule {
        background: var(--second-bg);
    }

body.v6 .game_page_background {
    background: var(--main-bg) !important;
}

.wishlist_row {
    background-color: var(--second-bg);
}

.filter_tab {
    background: var(--second-bg);
    color: #ccc;
}

.wishlist .controls .filter_tab:hover, .wishlist .controls div.filter_tab.hover {
    background: var(--third-bg);
    color: #fff;
}

.dropdown_container {
    background-color: var(--second-bg);
}

.dropdown_container .item:hover {
    background-color: var(--third-bg);
    color: #fff;
}

.filter_section {
    background-color: var(--third-bg);
}

.game_area_purchase_game, .game_area_offsite_purchase {
    background: linear-gradient( -60deg, var(--second-bg) 5%,var(--main-bg) 95%);
}

.member_block {
    background-color: var(--second-bg);
}

.creatorhome .page_background {
    background-color: var(--main-bg);
}

.creatorhome .curator_featured > div {
    background-color: var(--second-bg);
}

.group_block {
    background-color: var(--second-bg);
}

.tab_filter_control.checked, .tab_filter_control_row:not(.disabled).checked {
    background: linear-gradient(135deg, var(--main-bg) 0%,#417a9b 100%);
}

.game_hover_box {
    background: var(--second-bg);
    color: #ccc;
}

.game_hover_box h4.hover_title {
    color: #fff;
}

#widget {
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    background: var(--second-bg);
    box-shadow: 2px 2px 15px rgb(0 0 0 / 40%);
}

.Cek1s5Ixk2xYmkqjjESD0, ._2dGPTYWTKq3CirJwPXKw2b {
    background-color: var(--second-bg);
}

._1MwNf8slOG9lOvAeOshmuu._1ruRSreC31IK4kUGUcSRDK, .discount_block .discount_prices {
    background: var(--second-bg);
}

.breadcrumbs {
    margin-bottom: 5px;
}

.mature_content_notice {
    background: linear-gradient( 70deg, rgba(152,128,60,0.3) 5%,var(--main-bg) 95%);
}

.game_area_details_specs_ctn .label, .block a.linkbar, a.communitylink_achievement.communitylink_achivement_plusmore {
    background: var(--second-bg);
    color: #acb2b8;
}

._2xZaMR-NKc0LbkeM50cZq8 {
    background-color: var(--second-bg);
}

.dxuI55RF56-dzbuXjj2W0, ._3KAysk4dlhWETa6ixz7V2j {
    background: var(--second-bg);
}

.browse_ctn_background {
    background: linear-gradient( to bottom, var(--second-bg) 5%, var(--main-bg) 95%);
}

.browse_tabs a:hover, .browse_tabs a.selected {
    backg...

Reviews

No reviews yet.