Skip to content

Coles Online DARK MODE by thealkaris

Screenshot of Coles Online DARK MODE

Details

Authorthealkaris

LicenseNo License

Categorycoles.com.au

Created

Updated

Size21 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

CSS Override styles for Coles Online (https://www.coles.com.au)

a DARK MODE theme for Coles Online which they do not have by default. Keeps most of the same looks of Cole Online with some changes.

Dark Theme will be easier on the eyes and you shouldn't be flashbanged by white backgrounds.

Colors are kept mostly the same, and added stylized scrollbar to fit the theme.

            /!\  THIS IS BY FAR NO MEANS A PERFECT DARK MODE THEME SO SOME THINGS MAY NOT   /!\
                    LOOK 100% RIGHT AS THEY USE WEIRD CLASS ELEMENTS FOR EVERYTHING.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Coles Online DARK MODE
@version      20240205.18.18
@namespace    https://userstyles.world/user/thealkaris
@description  CSS Override styles for Coles Online (https://www.coles.com.au)a DARK MODE theme for Coles Online which they do not have by default. Keeps most of the same looks of Cole Online with some changes.Dark Theme will be easier on the eyes and you shouldn't be flashbanged by white backgrounds.Colors are kept mostly the same, and added stylized scrollbar to fit the theme.                /!\  THIS IS BY FAR NO MEANS A PERFECT DARK MODE THEME SO SOME THINGS MAY NOT   /!\                        LOOK 100% RIGHT AS THEY USE WEIRD CLASS ELEMENTS FOR EVERYTHING.
@author       thealkaris
@license      No License
==/UserStyle== */

@-moz-document domain("coles.com.au"), domain("colesgroupprofile.com.au") {
/*
               DARK MODE 
                 COLES
      https://www.coles.com.au

      Because hey, I don't like being
    flashbanged by blank bright white pages,
    and they don't include a Dark Mode.

    CSS Override Style by Alkaris ©2023

      It's not going to be perfect,
      but it'll be just good enough.
*/

/*

Let's define :root colors, since they already
do this for their CSS elements, so we can override defaults.

using the !important property enforces these color changes.

Whoever maintains the coles.com.au website needs to be fired, because they have no idea how to CSS code
without making it more of a complete mess by keep adding new element names for already named elements,
it's like smashing at their keyboard for a random bunch of letters and numbers for each element,
instead of simple descriptor elements.

*/

:root {
    --colors-background-default: #1c1c1c !important;
    --colors-common-white: #1c1c1c !important;
    --colors-text-primary: #3c3c3c !important;
    --colors-rdsColorAccent-primaryLighter: #3c3c3c !important;
    --colors-rdsColorBackground-primary: #1c1c1c !important;
    --colors-rdsColorBackground-secondary: #676767 !important;
    --colors-rdsColorBackground-defaultColor: #1c1c1c !important;
    --colors-rdsColorBackground-tertiary: #3c3c3c !important;
    --colors-rdsColorText-light: #ababab !important;
    --colors-rdsColorText-defaultColor: #ababab !important;
}

body, html {
    color: #ccc;
    background: var(--colors-background-default);
}

/*

      Let's make a better looking and functional
   scrollbar to fit the theme instead of default colors.

      If you want to change thickness of scrollbar,
    just change width property, but 12px looks fine.

*/

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #333;
    border-radius: 7px;
}

::-webkit-scrollbar-thumb {
    background: #cd3728;
    border-radius: 5px;
    border: 1px solid #333;
}

h1, h2, h3, h4, h5, h6 {
    color: #9e9e9e !important;
}

p {
    color: var(--colors-rdsColorText-light);
}

a {
    color: #525252 !important;
}

.erOpMS .description a[target="_blank"]::after {
    color: #525252 !important;
}

.hHCoLg, .iOWPQq, .hFPQIk {
    color: #9e9e9e !important;
}

.hUTsRu {
    color: #9e9e9e !important;
    box-shadow: 0px 0px 0px 0.125rem #1c1c1c;
}

.fLnFab {
    box-shadow: 0px 0px 0px 0.125rem #1c1c1c;
}

.jqvsXe {
    color: #9e9e9e !important;
}

.jEVjBd .product-tiles-btn svg {
    color: #9e9e9e !important;
}

.hOkMMP svg {
    color: #9e9e9e !important;
}

.hHCoLg:hover {
    color: #e0e0e0 !important;
}

.sUaxf, .bjyeJE {
    background: #1c1c1c !important;
    color: #9e9e9e !important;
    border-bottom: 1px solid #cd3728;
}

span {
    color: #9e9e9e !important;
}

.jtBMMq, .kqXaM {
    background: #1c1c1c !important;
}

.kalVVO {
    background: #1c1c1c !important;
    border-bottom: 1px solid #1c1c1c;
}

.css-13h3xwp-control {
    color: #9c9c9c;
    background: #4e4e4e;
}

.jfqICQ, .hROjkU, .DRdyG, .feMcrS.coles-targeting-ModalDialogContentStyledMuiDialogContent {
    background: #1c1c1c;
    color: #9e9e9e;
    --banner-bg-color: var(--colors-background-default);
}

.css-co0dvl-group {
    color: #9e9e9e !important;
}

.css-13h3xwp-control:hover, .edPWAZ, .cgVZTv, .bWAnsc, .cGzUTa, .gKVqhe, .gKVqhe a {
    background: var(--colors-rdsColorBackground-tertiary);
    color: #9e9e9e;
}

.css-13h3xwp-control:focus-within {
    background: var(--colors-rdsColorBackground-tertiary);
    color: #9e9e9e;
}

.css-11w82qv {
    color: #9e9e9e !important;
}

.css-1ltal0w-placeholder {
    color: #9e9e9e;
}

.hhJRDz, .yUioP, .jCSASz, .bYbdkB {
    color: #9e9e9e;
}

.bOxfbT svg {
    color: #9e9e9e;
}

.kxaITq svg, .esObSL svg, .ihHWLk svg, .cWEOP, .cJnPGl {
    color: #9e9e9e;
}

.kxaITq:hover {
    background: #333;
    border: 1px solid #333;
}

input[type="text" i] {
    color: #9e9e9e;
}

.cMrkcF .search-box-trigger:hover, .cMrkcF .search-box-trigger:active {
    background: var(--colors-rdsColorAccent-primaryLighter);
    color: var(--colors-rdsColorText-light);
}

.cMrkcF .search-box-trigger {
    background: #333;
    color: var(--colors-rdsColorText-defaultColor);
    border: 1px solid #333;
}

.kVGJOW {
    background: var(--colors-background-default);
}

.erOpMS {
    background: #171717;
    color: var(--colors-rdsColorText-light) !important;
}

.gfPfrG {
    background: #494949;
}

.iQhSjY {
    background: var(--colors-background-default);
    border: 1px solid rgba(205, 55, 40, 0);
    color: var(--colors-rdsColorText-defaultColor);
}

.hnIyDD, .HuJLU {
    background: var(--colors-background-default);
    color: var(--colors-rdsColorText-defaultColor);
}

.hiEzqa:hover, .hiEzqa:focus-within {
    color: var(--colors-rdsColorText-defaultColor)
}

.hiEzqa:hover, .hiEzqa:focus-within {
    border: 1px solid #696969;
}

.dTLIim, .mui-style-vel5pp-placeholder, .mui-style-t2286o-group, .xiyST, .gavxng {
    color: var(--colors-rdsColorText-defaultColor)
}

.bbjGLB, .iupFGy {
    color: var(--colors-rdsColorText-defaultColor)
}

.iZsLxL {
    color: var(--colors-rdsColorText-defaultColor)
}

.iJGfkU {
    color: var(--colors-rdsColorText-defaultColor)
}

.cOsZNa {
    background: var(--colors-background-default);
    color: var(--colors-rdsColorText-defaultColor);
    border: 1px solid #1c1c1c;
}

.bTsTpP {
    background: var(--colors-background-default);
    color: var(--colors-rdsColorText-defaultColor);
}

.gVaVAS {
    color: var(--colors-rdsColorText-defaultColor)
}

.fUVIkS:hover, .fUVIkS:focus-within {
    color: var(--colors-rdsColorText-defaultColor);
}

.eoyalZ {
    color: var(--colors-rdsColorText-defaultColor);
}

.bmKQrE {
     color: var(--colors-rdsColorText-defaultColor);
}

.cKuWtm:hover {
    background: #333;
}

.bxUUdk:hover {
    background: #333;
    border: 1px solid #696969;
}

.bxUUdk {
    border: 1px solid #333;
    color: var(--colors-rdsColorText-defaultColor);
}

.bxUUdk svg {
    color: var(--colors-rdsColorText-defaultColor);
}

.iUSSHX {
    background: var(--colors-background-default);
    color: var(--colors-rdsColorText-defaultColor)
}

.bZfQZV {
    border: 1px solid #333;
}

.ctTVPi {
    border: 1px solid #333;
}

.etSscI {
    background: var(--colors-background-default);
    border: 1px solid #333;
    color: var(--colors-rdsColorText-defaultColor);
}

.btbmRx {
    border-bottom: 1px solid #333;
}

.kDyyEP:hover {
    background: #333;
    color: var(--colors-rdsColorText-defaultColor);
}

.cBhXqo, .kqwMUp, .dHFVXI {
    background: transparent;
    color: var(--colors-rdsColorText-defaultColor);
}

.bHPTmu {
    border: 1px solid #333;
    background: rgba(33, 33, 33, .77);
    box-shadow: var(--shadows-shadow2,0px 4px 8px rgb(33, 33, 33));
    color: var(--colors-rdsColorText-defaultColor);
}

.Vjssy svg {
    color: var(--colors-rdsColorText-defaultColor)
}

.Vjssy:hover, .khCkGH, .ihRzM, .dpOhQU, .cfyTIF {
    background: transparent;
}

.eJEgeY svg {
    color: var(--colors-rdsColorText-defaultColor)
}

.eJEgeY:hover {
    background: transparent;
}

.eyArhX {
    color: var(--colors-rdsColorText-defaultColor);
}

.iYFXyf span {
    background: var(--colors-rdsColorText-defaultColor);
    border: 1px solid #000;
}

.iYFXyf:hover, .eQInwE .MuiFormControl-root:hover, .bWUoEB, .cKjLFL {
    background: transparent;
}

.eyArhX:hover {
    background: transparent;
}

.bdNxv, .bdNxv a {
    background: #333;
    color: var(--colors-rdsColorText-defaultColor);
}

.bdNxv {
    border-top: 1px solid rgb(205, 55, 40);
}

.dhpPQD {
    border: 1px solid #333;
}

.dhpPQD:hover {
    border: 1px solid #333;
}

.iJaKOy:hover {
    border: 1px solid #333;
}

.fvdlOw svg {
    color: var(--colors-rdsColorText-defaultColor)
}

.fvdlOw:hover {
    background: #333;
}

.jEVjBd .product-tiles-btn {
    border: 1px solid #333;
}

.kOLheR:hover {
    border: 1px solid #333;
}

.fvdlOw {
    border: 1px solid #333;
}

.hHCoLg {
    border: 1px solid #333;
}

.hOkMMP {
    border: 1px solid #333;
}

.hOkMMP:hover {
    background: #333;
}


.jUmwot {
    color: #292929 !important;
}

.jOljGY, .ffwSfa, .gHHCC {
    color: #fff !important;
}

.eflrmT:focus, .eflrmT:active, .eflrmT:hover {
    background: #333;
}

.dzIdCG:hover {
    background: #333;
    border: 1px solid #333;
}

.htYghY:first-child {
    border-top: 1px solid #333;
}

.kNnvxg:not(:first-child) {
    border-top: 1px solid #333;
}

.htYghY {
    border: 1px solid #333;
}

.crNrRA .MuiSelect-select {
    color: var(--colors-rdsColorText-defaultColor);
}

.crNrRA .MuiFormControl-root:hover {
    background: #333;
    border: 1px solid #333;
}

.hRyTDy {
    background: #333;
    color: var(--colors-rdsColorText-defaultColor);
    border: 1px solid #333;
}

.fheDTm {
    color: var(--colors-rdsColorText-defaultColor)
}

.fheDTm.Mui-selected:hover, .fheDTm:hover, .jWfjlS, .mui-style-1r09u4m {
    background: #1c1c1c;
}

.ictfiu {
    border: 1px solid #333;
    border-radius: 8px;
    
}

.ictfiu:hover {
    border: 1px solid #333;
    border-radius: 8px;
}

.eteAcF {
    background: #fedc02;
    border: 1px solid #fedc0...

Reviews

No reviews yet.