Skip to content

Indeed.com Dark Theme by axeia

Screenshot of Indeed.com Dark Theme
Write a review Install Get Stylus

Details

Authoraxeia

LicenseNo License

Categoryindeed

Created

Updated

Size23 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

I tried a few of the other dark styles available for indeed.com but they weren't what I wanted so I decided to do it myself.

So I present you a proper dark mode theme for indeed.com. It doesn't do much else other than just make things dark and keeping things readable (enough contrast), not even all the CSS in the world could make the site look better. It needs layout changes for that.

Notes

As to why there's so much CSS in this style, this contains a lot more code due to Indeed having:

  • Oddly specific selectors
  • Hardcoded inline CSS
  • Different CSS for exactly the same thing in different places
  • Bad (automatically generated ?) class names
  • No code consistency, for example the 'kebab' menu in the search results and in the chat don't just use different CSS the layout is vastly different as well
  • There are a LOT of nested elements, each with layers of CSS applied to them making it hard to figure out what affects what[¹]

¹ Note to Indeed if they ever read this, this also makes your page more complicated, slowing down page render time and increasing battery usage on mobile devices.

Log.
v2022.05.01: Added dark styles for the post application process.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           indeed.com Dark Theme
@version        2022.05.01
@namespace      indeed.com
@description    Gives indeed.com a new dark lick of paint and compacts the site in a few places
@author         Axeia
==/UserStyle== */

@-moz-document domain("indeed.com") {
/** 
layer 0 #121212;
layer 1 #1e1e1e;
layer 2 #222;
layer 3 #242424;
layer 4 #272727;
layer 5 #2c2c2c;
layer 6 #2e2e2e;
layer 7 #333;
layer 8 #363636;
layer 9 #383838;

yellow #EABD05
blue   #2059B1

**/
html{
    
    scrollbar-color: #000 #333;
}
body{
    background-color:#121212;
    color: #eee;
}

a{
    color: #2059B1;
}

h1, h2, h3{
    color: #eee;
}

div{
    color: #ddd;
}

textarea{
    background: #383838;
    color: #fff;
}

/** Main NAV **/
#gnav-main-container.gnav .gnav-header-1fosl13,
.jobsearch-TabbedContent-tabsContainer,
.jobsearch-Content{
    background-color:#121212;
}

#gnav-main-container.gnav .gnav-header-15ta8f3:visited,
#gnav-main-container.gnav .gnav-header-15ta8f3:hover,
#gnav-main-container.gnav .gnav-header-15ta8f3{
    color: #fff;
}

#gnav-main-container.gnav .gnav-header-1fosl13,
.jobsearch-TabbedContent-tabsContainer{
    border-color: #242424;
}

#gnav-main-container.gnav .gnav-header-1fosl13, .jobsearch-TabbedContent-tabsContainer{
    background: #000;
}

/** What where fields and autocomplete **/

[dir] .yosegi-EmbeddedLabelInput .icl-TextInput{
    border-color: transparent;
}
[dir] .yosegi-EmbeddedLabelInput .icl-TextInput-label{
    color: #fff;
}
[dir] .yosegi-EmbeddedLabelInput .icl-TextInput-control{
    background-color: #383838;
    padding: 8px 10px;
    color: #ccc;
}

[dir] .mosaic .icl-TextInput-control:focus,
[dir] .yosegi-EmbeddedLabelInput.is-focused input:placeholder-shown{
    background: #383838;
    padding: 8px 10px;
    color: #fff;
}

[dir] .yosegi-EmbeddedLabelInput .icl-Autocomplete-list,
[dir] .yosegi-EmbeddedLabelInput .icl-Autocomplete-option{
    background: #383838 !important;
}

[dir] .yosegi-EmbeddedLabelInput .is-autocomplete-open .icl-TextInput{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08),inset 0 -1px 0 #383838;
}

[dir] .yosegi-EmbeddedLabelInput .icl-Autocomplete-option .icl-Autocomplete-text,
[dir] .yosegi-EmbeddedLabelInput .icl-Autocomplete-option .icl-Autocomplete-text b, [dir] .yosegi-EmbeddedLabelInput .icl-Autocomplete-option .icl-Autocomplete-text strong{
    color: #fff;    
}

/** Buttons on Main NAV **/
#gnav-main-container.gnav .gnav-header-16fyci3,
#gnav-main-container.gnav .gnav-header-l6aei4{
    background-color: #121212;
}

#gnav-main-container.gnav .gnav-header-pv65au{
    background-color: #ff94a3;
    border-color: #333;
}

#gnav-main-container.gnav .gnav-header-16fyci3:hover,
#gnav-main-container.gnav .gnav-header-l6aei4:hover{
    background-color: #383838;
}

/** Tabs **/
.jobsearch-TabbedContent-tab:not(.jobsearch-TabbedContent-tab--active).is-desktop{
    color: #ccc;
}

.jobsearch-TextPromo-container{
    display: none;
}

.jobsearch-TabbedContent-tab{
    background-color: #121212;
    color: #ddd;
}

/** Rest of main search page layout **/
.jobsearch-Spacer{
    padding: 4px 0;
    background: #121212;
}
.jobsearch-PostJobPromo-container{
    margin-bottom: 8px !important;
}

.jobsearch-MarketingBanner{
    background-color: #1e1e1e;
    color: #eee;
}
.jobsearch-MarketingBanner-closeButton, .css-11hskql{
    color: #eee;
}

.jobsearch-RecentSearches-background.is-desktop {
    background-color:#121212;
    color: #fff;
}
.mosaic-provider-jobcards .tapItem{
    background-color: transparent;
}
.slider_container{
    background-color: #1e1e1e;
}

.mosaic-provider-jobcards .desktop .slider_container{
    border-color: transparent;
}

.mosaic-provider-jobcards .result .slider_container .resultContent .jobTitle .jcs-JobTitle{
    color: #2059B1;
}

.mosaic-provider-jobcards .result .slider_container .resultContent .jobTitle .jcs-JobTitle:active, .mosaic-provider-jobcards .result .slider_container .resultContent .jobTitle .jcs-JobTitle:focus, .mosaic-provider-jobcards .result .slider_container .resultContent .jobTitle .jcs-JobTitle:hover, .mosaic-provider-jobcards .result .slider_container .resultContent .jobTitle .jcs-JobTitle:visited{
    background: #2059B1;
    background: linear-gradient(to bottom, #2042c6 40%, #EABD05 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}

.mosaic-provider-jobcards .tapItem{
    color: #fff;
}
.mosaic-provider-jobcards .result .resultContent .companyName{
    color: #ddd;
}

.mosaic-provider-jobcards .result .ratingsDisplay{
    color: #EABD05;
}
.mosaic-provider-jobcards .result .resultContent .ratingsDisplay .ratingNumber{
    color: inherit;
    background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'%3E%3Cpath d='M10 10h123v123H10z'/%3E%3C/svg%3E" );
}

.starIcon{
    fill: #EABD05;
}

.mosaic-provider-jobcards .result .jobCardShelfContainer .jobCardShelf .shelfItem, .mosaic-provider-jobcards .result .jobCardShelfContainer .jobCardShelf .shelfItem .hiringMultipleCandidatesCaption, .mosaic-provider-jobcards .result .jobCardShelfContainer .jobCardShelf .shelfItem .resumeMatch{
    color: #ddd;
}

.mosaic-provider-jobcards .result .jobCardShelfContainer .jobCardShelf .ialbl.iaTextBlack, .mosaic-provider-jobcards .result .jobCardShelfContainer .jobCardShelf .oilbl.oiTextBlack, .mosaic-provider-jobcards .result .jobCardShelfContainer .jobCardShelf .textBlack{
    color: #ddd !important;
}

.mosaic-provider-jobcards .result .jobCardShelfContainer .underShelfFooter .result-footer, .mosaic-provider-jobcards .result .jobCardShelfContainer .underShelfFooter .result-footer span,
.mosaic-provider-jobcards .result .job-snippet{
    color: #ddd;
}

.mosaic-provider-jobcards .result .resultContent .companyLocation{
    color: #ddd;
}

.mosaic-provider-jobcards .result .resultContent .metadata{
    color: #ddd !important;
}

.mosaic-provider-jobcards .result .resultContent .salary-snippet-container .salary-snippet:not(.big6_prefmatch_visualChanges){
    color: #ddd !important;   
}

.jobsearch-RecentSearchesMixedJobFeed-header{
    color: #aaa;
}

.mosaic-provider-jobcards .result .slider_container .resultContent .new.holisticNewBlue .label{
    background: transparent;
}
.mosaic-provider-jobcards .result .slider_container .resultContent .new.holisticNewBlue .label{
    color: #EABD05;;
}

.kebabMenu-button{
    position: relative;
}
.kebabMenu-button svg{
    visibility: hidden;
}
.kebabMenu-button::after{
    content: '⋮';
    font-size: 1.5rem;
    color: #ddd;
    position: absolute;
    left: 18px;
    top: 2px;
}
.mosaic-provider-jobcards .kebabMenu-items{
    border-color: #383838;
}
.mosaic-provider-jobcards .kebabMenu-items,
.mosaic-provider-jobcards .dislike-container_kebabstyle,
.mosaic-provider-jobcards .bookmark_kebabstyle,
.mosaic-provider-jobcards .report_job{
    background: #2c2c2c;
    color: #ddd;
}
.mosaic-provider-jobcards .report_job:hover,
.mosaic-provider-jobcards .desktop .dislike-container_kebabstyle:hover,
.mosaic-provider-jobcards .desktop .bookmark_kebabstyle:hover{
    background-color: #383838;
    color: #fff;
}
.mosaic-provider-jobcards svg{
    filter: invert(100%);
}
.mosaic-provider-jobcards .report_job{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3.5a.5.5 0 01.5-.5h9.191a.5.5 0 01.447.276l.724 1.448a.5.5 0 00.447.276H20.5a.5.5 0 01.5.5v10a.5.5 0 01-.5.5h-6.191a.5.5 0 01-.447-.276l-.724-1.448a.5.5 0 00-.447-.276H5v6.5a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-17z' fill='%23cdcdcd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 15px, center;
}
#gnav-footer-container .main{
    background: #000 !important;
}
.jobsearch-Footer{
    border-top: #121212;
}

[dir] .mosaic .icl-Card{
    background: #1e1e1e;
}
.desktopAurora .mosaic-provider-jobsearch-feedback div#ratingForm .icl-Card--hasBorder{
    border-color: #1e1e1e;
}

/** Job popup overlay thing **/
.jobsearch-ViewJobContainer{
    border-color: transparent;
    border-radius: 4px;
}

.jobsearch-ViewJobLayout .mobRefresh .jasxrefreshcombotst .jobsearch-ViewJobLayout--embedded{
    background-color: #1e1e1e;
}

.desktopAurora .jobsearch-JobComponent-embeddedHeader,
.desktopAurora .jobsearch-JobInfoHeader-subtitle.is-embedded,
.desktopAurora .jobsearch-JobMetadataHeader-item,
.desktopAurora .jobsearch-JobComponent-embeddedBody div,
.jobsearch-HiringInsights-header,
.jobsearch-HiringInsights-subheader,
.jobsearch-HiringInsights-entry--bullet span{
    color: #ddd;
}

.jobsearch-ViewJobContainer{
    border-color: #1e1e1e;
}
.jobsearch-ViewJobContainer{
    background: transparent;
}
body.desktopAurora{
    background: transparent;
}
.jobsearch-ViewJobLayout .i-unmask{
    background: #1e1e1e;
}

.jobsearch-HiringInsights-root--bottomborder{
    border-color: #333;
}
[dir] .desktopAurora .mosaic .icl-Card--hasBorder{
    color: #ddd !important;
}
.css-klr43q, .css-1mk2z48{
    color: #ddd;
}
.css-c9jupi svg{
    filter: invert(100%);
}
/** Notifications **/ 
#content{
    background: #121212;
}

.nc-notification{
    background: #1e1e1e;
}

.nc-Header .nc-Header-text .nc-Header-notifType,
.nc-Header .nc-Header-text .nc-Header-notifTime,
.nc-notification .nc-Notification-prompt,
.nc-notification .nc-Notification-prompt .nc-Notification-primaryPrompt,
.nc-NotificationsContainer .nc-CompanyDisplay .nc-CompanyDisplay-location{
    color: #ddd;
}

.nc-content-divider{
    background-color:#2e2e2e;
}

.nc-NotificationsContainer .nc-job-info-title a,
.nc-Notification...

Reviews

No reviews yet.