Skip to content

Depop Dark Clean by dr1pp

Screenshot of Depop Dark Clean

Details

Authordr1pp

LicenseNo License

Categorydepop

Created

Updated

Size2.3 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

first version of a clean dark theme for desktop Depop attempting to stay true to the branding and style guide of the company whilst making browsing easier on the eyes for night owls like myself :)

Notes

  • code is probably ugly asf i dont do css i just hate light themed sites
  • many improvements to be made
  • main focus was on simply making the home and listing pages dark and cohesive
  • might expand into other pages and fix small issues if i get my life together

Source code

/* ==UserStyle==
@name         Depop Dark Clean
@version      20220225.08.05
@namespace    userstyles.world/user/dr1pp
@description  first version of a clean dark theme for desktop Depop attempting to stay true to the branding and style guide of the company whilst making browsing easier on the eyes for night owls like myself :)
@author       dr1pp
@license      No License
==/UserStyle== */

@-moz-document domain("depop.com") {
:root {
    --bg-grey:#262628;
    --top-bar-grey:#222124;
    --red: rgb(255 35 0);
    --heading-text: #f00;
    --body-text: #cecece;
}

img {
    border-radius: 2%;
    max-width: 100%;
    height: auto;
}

.eIWEnr {
    border-bottom: 0.0625rem solid #ffffff1a; /*top bar divider*/
    padding: 0.75rem 2rem;
}


/*Nav bar*/
.hJpOyM {
    background: var(--top-bar-grey);
}

.joQtwj {
    background-color: var(--top-bar-grey);
    background: #171717;
    border: 0.0625rem solid rgba(191, 191, 191, .23);
}

/*Categories bar*/
.hRJqSO{
    background: var(--top-bar-grey);
    border-bottom: 0.0625rem solid rgb(49, 49, 49); 
}

/*Categories dropdown*/
.cHNnMc {
    display: none;
    position: absolute;
    top: 100%;
    padding-top: 0.1875rem;
    left: auto;
    background: rgb(255, 0, 0);
    border: 0.0625rem solid rgb(204, 204, 204);
    border-radius: 0.125rem;
    box-shadow: rgb(0 0 0 / 10%) 0px 0px 0.75rem 0.25rem;
}


/*Category colours*/
.XJxhY {color: #fff;}


/*Likes button*/
.dKSFsZ {color: var(--red);}

.eysHZq {
    color: #fff !important;
}


/*Listing price div*/
.iWZOCk {
    background-color: var(--bg-grey);
}

/*Listing price*/
.kcftTA .Pricestyles__FullPrice-sc-__sc-1vj3zjr-0 {
    color: white;
}


/*Buy now button*/
.ifTSSH {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.875rem;
    border-radius: 0.125rem;
    background-color: var(--red);
    color: rgb(255, 255, 255);
    cursor: pointer;
    border-color: rgb(38, 38, 38);
    border-width: 0.125rem;
    border-style: solid;
    text-decoration: none;
    transition: all 0.2s ease 0s;
    width: 100%;
}


.dfXtnW {
    color: var(--body-text)}

.kxviEH{
    background-color: var(--red);
    color: #000;
    
}



body {
    background-color: var(--bg-grey);
}


}

Reviews

No reviews yet.