Custom Dark Theme for the Coles Online shopping.
NOTICE: Use this version here instead -> https://userstyles.world/style/9033/coles-online-dark-mode
Coles Online [OUTDATED] by thealkaris
Details
Authorthealkaris
LicenseCC-BY-NC-SA
CategoryColes Online
Created
Updated
Size16 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This is a work in progress style theme, so not everything may be themed to dark correctly, and things on the site may change at any time causing this dark theme to break.
NOTICE: Use this version here instead -> https://userstyles.world/style/9033/coles-online-dark-mode
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name shop.coles.com.au
@namespace userstyles.world
@version 1.0.0
==/UserStyle== */
@-moz-document domain("shop.coles.com.au") {
/*
Dark Theme for shop.coles.com.au
made by Alkaris ©2022
*/
/*
Page body
*/
body.is-checkout .main, body.is-sub-confirm .main, .main, body, .main-content-body, .is-checkout, .is-checkout .main-content-body {
background: #1c1c1c;
clear: both;
color: #b2b2b2;
}
body.page-full-width, body.page-full-width, body.is-dss, b2b-parent-header, body.page-full-width, body.is-dss, b2b-parent-header {
background: #1c1c1c !important;
clear: both;
color: #b2b2b2 !important;
}
/*
page header + header top
don't know why these are defined in 2 sections.
*/
body.page-full-width .header, body.is-dss .header {
background: #1c1c1c;
}
.header-top {
background: #1c1c1c;
}
/*
Lets define :root elements here since they use them
change the root element colors with these values.
also lets prettify it to make it easier to read.
*/
:root {
--rocket-yellow: #ffb700;
--rocket-green: #74ba24;
--rocket-orange: #ff8833;
--rocket-turquoise: #06CFD2;
--rocket-blue: #66bfff;
--rocket-violet: #df80ff;
--rocket-brand-color: #e01a22;
--rocket-brand-color-variant: #c70007;
--rocket-brand-color-2: transparent;
--rocket-brand-color-2-variant: transparent;
}
/*
content header
*/
.main-content-header h1, h1 {
color: #b2b2b2;
}
/*
bold text and regular text
*/
.is-checkout .orderSummary .orderSpecifics .left strong, .draw-content-body .orderSummary .orderSpecifics .left strong {
color: #b2b2b2;
}
.is-checkout .orderSummary, .draw-content-body .orderSummary {
color: #b2b2b2;
}
.is-checkout .orderSummary .orderSpecifics .left, .draw-content-body .orderSummary .orderSpecifics .left {
color: #767676;
}
/*
web links
*/
.is-checkout .orderSummary a, .draw-content-body .orderSummary a, a {
color: #b2b2b2;
}
/*
time and date slots
*/
.is-checkout .main-content.checkout-summary .orderSummary li .dateslot, .is-checkout .main-content.checkout-summary .orderSummary li .timeslot {
color: #707070;
}
/*
Zero together banner and the other banner thingy
*/
.is-checkout .orderSummary .orderSpecifics.together-to-zero, .draw-content-body .orderSummary .orderSpecifics.together-to-zero {
background: #1c1c1c;
border: 1px solid #3c3c3c;
border-radius: 6px;
}
.aoc-banner-wrapper .aoc-banner {
background: var(--rocket-brand-color-variant);
}
.product-banner .image-first-layout.coles-for-business-aisle {
background: #1c1c1c;
color: #707070;
border: 1px dotted #707070;
}
.product-banner.product-banner-default {
border: 0px dotted #707070;
-webkit-box-shadow: 0px 5px 10px rgb(0 0 0 / 50%)
}
.product-banner .image-first-layout.coles-for-business-aisle .hero-text {
color: #707070;
}
.product-banner .image-first-layout .banner-content {
filter: invert(20%);
}
/*
footer and links
*/
.footer .footer-col-wrapper .footer-col .title {
color: #b2b2b2;
}
.footer .footer-text a {
color: #707070;
}
.footer .footer-col-wrapper .footer-col ul li a, .footer {
color: #707070;
}
.horizontal-tile-container .tile.elephant-supplier-horizontal .tile-copy-section .sub-tile-terms a {
color: #707070;
}
/*
localisation bar
*/
.localisation-bar, .header {
background: #1c1c1c;
color: #b2b2b2;
}
/*
geo-location bar + link
*/
.localisation-bar .button.button-link {
color: #707070;
}
.localisation-bar .icon.icon-mapmarker {
fill: #707070;
}
/*
Search bar
*/
.search {
background: #1c1c1c;
color: #707070;
border: 1px solid #707070;
}
.search .search-txt {
color: #b2b2b2;
}
.search-ac-items {
background: #1c1c1c;
color: #b2b2b2;
border-bottom: 1px #707070 solid;
}
.header .search.product-search .search-autocomplete .search-ac-item.is-active {
background: rgb(43, 43, 43);
color: #b2b2b2;
}
.header .search.product-search .search-autocomplete .search-ac-item {
color: #b2b2b2;
}
/*
tile containers
*/
.horizontal-tile-container .tile .tile-copy-section .tile-cta {
color: #707070;
}
.horizontal-tile-container .tile .tile-copy-section {
border: 1px #707070 dotted;
border-radius: 8px;
-webkit-box-shadow: 0px 5px 10px rgb(0 0 0 / 50%);
}
/*
header sections
*/
.section-heading-container .text-container {
background: #1c1c1c;
color: #b2b2b2;
}
/*
Promo sections and specials
*/
.is-promo .promo-content-wrapper {
background: #1c1c1c;
border: 1px solid;
border-radius: 3px;
border-color: #707070;
}
.product.is-promo .content-container.weekkly-specials-single {
background: var(--rocket-yellow);
}
.product-icons .icon-specials-badge, .product-pricing-info .saving-container .product-saving {
background: var(--rocket-yellow);
}
.product.product-specials, .product.product-while-stocks-last, .product.product-reduced-to-clear {
background: #1c1c1c;
color: #b2b2b2;
border-color: var(--rocket-yellow);
}
/*
product titles
*/
.product-title a {
color: #b2b2b2;
}
.star-rating .rating-details {
color: #b2b2b2;
}
.product {
background: #1c1c1c;
color: #b2b2b2;
border-color: #707070;
}
.product-options-container .button.toggle-options {
background: #b2b2b2;
border: 1px #707070 solid;
border-radius: 90%;
-webkit-tap-highlight-color: transparent;
}
/*
Nav sidebar and cart
*/
.draw-nav {
background: #1c1c1c;
color: #b2b2b2
}
.draw-nav a {
background: #1c1c1c;
color: #707070;
}
.draw-nav ul li.is-active {
background: #707070;
}
.draw-content {
background: #3c3c3c;
color: #b2b2b2;
}
.draw-header .button-close-draw, .draw-header .button-close-draw:focus, .draw-header .button-close-draw:hover {
background: #3c3c3c;
color: #1c1c1c;
}
/*
past orders + address filter
*/
.view-past-orders .draw-content-header .address-filter {
color: #1c1c1c;
}
.view-past-orders .draw-content-header .address-filter a {
color: #b2b2b2;
}
.view-past-orders .draw-content-body .order-list li .order-details {
color: #b2b2b2;
}
/*
Container body
*/
.draw-content-body .input-container a {
color: #b2b2b2;
}
.draw-content-body .redirect a {
color: #b2b2b2;
}
/*
Logout button
*/
.view-account .draw-account-header .logout {
border: 1px solid var(--rocket-brand-color-variant);
border-radius: 8px;
background: #CC575D;
color: #1c1c1c;
}
/*
Login window
*/
input[type=text], select, textarea, input[type=number], input[type=email], input[type=tel], input#password-input-box {
color: #b2b2b2 !important;
background: #1c1c1c !important;
border: 1px solid #707070;
}
.view-login-register.view-login .input-container a {
color: #b2b2b2;
}
.draw-content-body .input-container .onPwdBlur {
border: 1px solid #707070;
background: #1c1c1c !important;
color: #b2b2b2;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], textarea, select {
border: 1px solid #707070;
background: #1c1c1c !important;
color: #b2b2b2;
}
.onPwdFocus {
border-color: #707070;
}
/*
Help and support tab
because you might want to view this stuff?
except this shit wont change color for some stupid reason... fuck.
*/
body#fsLocal.fsBody {
background: #1c1c1c;
color: #b2b2b2;
}
}
@-moz-document domain("shop.coles.com.au") {
/*
Dark Theme for shop.coles.com.au
made by Alkaris ©2022
*/
/*
Page body
*/
body.is-checkout .main, body.is-sub-confirm .main, .main, body, .main-content-body, .is-checkout, .is-checkout .main-content-body {
background: #1c1c1c;
clear: both;
color: #b2b2b2;
}
body.page-full-width, body.page-full-width, body.is-dss, b2b-parent-header, body.page-full-width, body.is-dss, b2b-parent-header {
background: #1c1c1c !important;
clear: both;
color: #b2b2b2 !important;
}
/*
page header + header top
don't know why these are defined in 2 sections.
*/
body.page-full-width .header, body.is-dss .header {
background: #1c1c1c;
}
.header-top {
background: #1c1c1c;
}
/*
Lets define :root elements here since they use them
change the root element colors with these values.
also lets prettify it to make it easier to read.
*/
:root {
--rocket-yellow: #ffb700;
--rocket-green: #74ba24;
--rocket-orange: #ff8833;
--rocket-turquoise: #06CFD2;
--rocket-blue: #66bfff;
--rocket-violet: #df80ff;
--rocket-brand-color: #e01a22;
--rocket-brand-color-variant: #c70007;
--rocket-brand-color-2: transparent;
--rocket-brand-color-2-variant: transparent;
}
/*
content header
*/
.main-content-header h1, h1 {
color: #b2b2b2;
}
/*
bold text and regular text
*/
.is-checkout .orderSummary .orderSpecifics .left strong, .draw-content-body .orderSummary .orderSpecifics .left strong {
color: #b2b2b2;
}
.is-checkout .orderSummary, .draw-content-body .orderSummary {
color: #b2b2b2;
}
.is-checkout .orderSummary .orderSpecifics .left, .draw-content-body .orderSummary .orderSpecifics .left {
color: #767676;
}
/*
web links
*/
.is...