Skip to content

Steam Amoled by xiggi

Details

Authorxiggi

LicenseNo License

Categorysteam

Created

Updated

Size25 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      20241005.14.36
@namespace    ?
==/UserStyle== */

@-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;
}
    
    .GHIW6-Wf1rQ- {
    background: var(--main-bg);
    }

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 {
    background: var(--second-bg);
}

.creatorhome .light_container, .creatorhome #footer_spacer, body.v6.creatorhome .page_content.browse_reviews {
    background: var(--main-bg);
}

.creatorhome .browse_filters h4 {
    color: #ccc;
}

.browse_filters h4 {
    font-weight: 500;
    font-size: 13px;
}

.page_content_ctn.grayscale {
    background: linear-gradient( transparent, var(--main-bg) );
}

.gutter_header {
    color: #fff;
}

.creatorhome .curator_featured > div {
    background: linear-gradient( -45deg, var(--third-bg) 5%,var(--second-bg) 95%);
}

.creatorhome .light_container.bezel {
    background: linear-gradient( to bottom, var(--second-bg) 10px, rgba(46, 49, 56, 0) 200px);
}

.navigation_bar > a.selected {
    background-color: var(--third-bg);
    color: #fff;
}

.navigation_bar > a {
    color: #ccc;
}

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

.dTa5uAAOq-wFRgQQG7xRm {
    background: linear-gradient(90.41deg, #2C3C49 16.25%, var(--main-bg) 99.89%);
}

.game_area_comingsoon {
    background: linear-gradient(135deg, rgba(64,120,152,0.4) 10%, var(--main-bg) 100%);
}

.store_header_btn_gray {
    background-image: none;
    background-color: var(--third-bg);
}

.game_area_dlc_row.odd, .game_area_dlc_row.even {
    background: linear-gradient(135deg, rgba(97,100,101,0.3) 0%, var(--main-bg) 100%);
}

body.v6 .store_nav .popup_block_new .popup_body {
    background: linear-gradient(90deg, rgba(33, 162, 255, 0.1) 1.89%, rgba(50, 50, 51, 0) 50%), linear-gradient(180deg, var(--third-bg) 11.6%, var(--second-bg) 54.73%, var(--second-bg) 100%);
}

div.early_access_header .heading {
    background: linear-gradient(135deg, var(--main-bg) 0%,rgba(48,93,122,1) 100%);
}

.game_area_wishlist_btn.disabled, .btnv6_blue_hoverfade.queue_btn_active {
    background-color: rgba( 103, 193, 245, 0.4 );
    color: #ffffff;
}

.queue_btn_menu > .queue_menu_arrow.queue_btn_active {
    background-color: rgba( 103, 193, 245, 0.4 );
}

._2Ptras-ZC31rwdT6pD-t0a {
    background: var(--second-bg);
}

.Wk21cv1qcYBOF2PSAOfb- {
    border-top: 1px dotted #6d6e70;
    background: var(--main-bg);
}

div.early_access_banner {
    background: linear-gradient(135deg, var(--second-bg) 0%, var(--third-bg) 100%);
}

.related_items_ctn {
    background: radial-gradient(62.67% 62.67% at 62.67% 100%, var(--second-bg) 0%, var(--main-bg) 100%);
}

._2BG1JKMgeqn_cr0rbRhRNA, .XIDYByW4BEOm-YiOiwGmO {
    background: radial-gradient(62.67% 62.67% at 62.67% 100%, var(--second-bg) 0%, var(--main-bg) 100%);
}

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

#filters_container > div {
    background: var(--second-bg);
    color: #edebeb;
}

#filters_container > div:hover {
    background: var(--third-bg);
    color: #fff;
}

.btn_green_steamui > span {
    background: linear-gradient( to right, var(--main-bg) 5%, var(--second-bg) 95%);
    color: #ccc;
}

.btn_green_steamui:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover > span {
    background: linear-gradient( to right, #8ed629 5%, var(--third-bg) 95%);
    color: #fff;
    transition: 0.2s;
}

.home_area_spotlight {
    background-image: none !Important;
    background-color: var(--second-bg);
}

.pagebtn, a.pagebtn, .btnv6_blue_hoverfade {
    background-color: var(--second-bg);
}

.pagebtn:not(.disabled):hover, a.pagebtn:not(.disabled):hover, .btnv6_blue_hoverfade:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover {
    background-color: rgba(103, 193, 245, .5);
    border-color: transparent;
    color: #fff;
}

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

.discount_block .discount_pct, .discount_pct {
    color: #BEEE11;
    background: rgb(76 107 34 / 40%);
}

.pagesubheader {
    color: #fff;
}

.game_page_autocollapse_fade {
    background: linear-gradient(to top, var(--second-bg), transparent);
}

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

.btnv6_grey_black:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover, a.game_area_details_specs_ctn:hover .label {
    background: rgba(103, 193, 245, .5);
}

._3lmdEmwrmqe-kicNCZ9v-I {
    background: var(--second-bg);
}

body.v6 .game_area_already_owned.page_content {
    background: linear-gradient(to right, rgba(75,106,33,0.6)  0%,var(--main-bg) 100%);
}

.hover_tag_row .app_tag, .hover_body .hover_review_summary, .hover_details_block, .hover_details_block_full {
    background-color: var(--third-bg);
}

.breadcrumbs {
    color: #ccc;
}

input[type=text], input[type=password], input[type=number], select {
    color: #ccc;
    background-color: var(--third-bg);
    border: 1px solid var(--third-bg);
    box-shadow: none;
}

:focus-visible {
    outline: 1px solid var(--third-bg);
}

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

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

.carousel_container.spotlight .carousel_items > * .store_capsule.daily_deal {
    background: -webkit-linear-gradient( top, #ffffff 5%, #abdaf4 95%);
    background: linear-gradient( to bottom, var(--second-bg) 5%, var(--third-bg) 95%);
}

.dailydeal_desc {
    color: #fff;
}

.carousel_container .arrow.right:hover {
    background:linear-gradient( to right, rgba( 0, 0, 0, 0) 5%, var(--third-bg) 95%);
}

.carousel_container .arrow.left:hover {
    background:linear-gradient( to left, rgba( 0, 0, 0, 0) 5%, var(--third-bg) 95%);
}

.game_details b {
    color: #ccc;
}

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

.tab_item_details {
 ...

Reviews

No reviews yet.