Light Theme

Resolved ankitengr
(@ankitengr)

3 years, 2 months ago

Those using makestories previously like light theme but web stories has only dark display. Is there any option to show the web stories create/edit sotry in light theme. We have tried different wordpress themes but this only change display on frontend while we require light theme on web stories.

Viewing 4 replies - 1 through 4 (of 4 total)

(@luckynasan)

Hello @ankitengr , thank you for your inquiry. There is not an option to display the editor in a light theme. I’ve opened a feature request on your behalf so please feel free to monitor this issue for any progress on the matter. Thank you.

Plugin Author

Pascal Birchler

(@swissspidy)

3 years, 2 months ago

Out of curiousity, what’s wrong with the editor’s colors? 🙂 Is this question purely because of preference or perhaps an accessibility need?

Thread Starter

ankitengr

(@ankitengr)

3 years, 2 months ago

@swissspidy, this will better for the user as an option to file web story in light mode. This is just suggestion as many content writer who migrating from makestories to web stories are complaining the same and not happy with dark mode.

Alternatively, if the class name can be fixed then we can override by ourselves and for this we also made a plugin. But the css that is working in v1.30, not working in v1.31. Below is the working override css in web stories v1.30.

.epXuat,.jszrIl,.hQCtJC,.fXheDW,.grdinb,.cgeQFQ,.kRCyRO{background-color:rgb(255, 255, 255);}
.bvAhdz{border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.urGTC{color: #000000!important;}
.dmojaA,.cNrBth,.fhQSgo,.jPBVjs,.jTAXeo,.hZJTDt .chip__Infix-sc-oghxqk-0, .hZJTDt .chip__StyledChip-sc-oghxqk-1,.bPUZJN,.jeLoyP label,.hQrHdj,.fkhnDT,.icPgqn,.eJAqoc label,.BTQiE,.hcxmkd,.gwbkod,.hQUPwy,.eJtAgs,.fHRyiI,.cPKkuj,.bVCmRi,.jAlabV,.jqeGj,.kCEFWH,.fpFiQk{color:rgb(0 0 0);}
.lpqLVL svg >path{fill:#000}
.hDLNvQ span, .hDLNvQ svg:not(.alert) {color: rgb(0 0 0);}
.iJBwqy svg, .iJBwqy svg > *,.jzhUtY svg>path{fill:rgb(0 0 0);}
.jzhUtY svg>path{stroke: rgb(0,0,0);}
.gQAnvo > path,.fkOXpU svg> path{stroke: black;}

.eJWZiB .lmeaUa,.fpFiQk{color: rgb(86 ,86 ,86);}
.eJWZiB .bVdZlV {color: rgb(145, 152, 153);}
.eebBBS{color: rgb(145, 152, 153);}
.kuJgXu label, .kuJgXu * > label{color: rgb(54, 54, 54);}
.kDEAkD >path{fill:rgb(0,0,0);}
.elTuJm{background-color: rgb(0, 0 ,0);}
.egZYAm{color: rgb(0 97 224);}
.ftvZIN .eJWZiB{background-color: rgb(19, 21, 22);}
.ftvZIN .eJWZiB{background-color: rgb(19, 21, 22);}
.fPVrKh,.eBkazc{background: rgb(236, 236, 236); color: rgb(0 0 0);border-color: rgb(255 255 255);}
.hFRxO{ background-color: rgb(236, 236, 236); border: 1px solid rgb(255, 255, 255);}
.dLpQXk{color: rgb(0, 0 ,0);border-color: rgb(255, 255, 255);background-color: rgb(236, 236, 236);}
.cdfTOx{color: rgb(0, 0, 0);border-color: rgb(255, 255, 255);background-color: rgb(236, 236, 236);}
.jUsGor{background-color: rgb(236, 236 ,236); border: 1px solid rgb(255, 255, 255);}
.jMYRit{color: rgb(0 0 0);}
.boHHJR{background-color: rgb(236 236 236);border: 1px solid rgb(255 255 255);}
.hA-DPxi{color: rgb(0 0 0);}
.ftvZIN .eJWZiB{background-color: rgb(236 236 236);}
.lgFWHs{color: rgb(0 0 0);}
.fIkiLF svg,.dLezFV{color: rgb(0 0 0);}
.fIkiLF:hover {background-color: rgb(255 255 255);}
.fPVrKh:hover, .fPVrKh:focus,.bQYXGo:hover, .bQYXGo:focus,.hFRxO:hover, .hFRxO:focus, .hFRxO:active,.boHHJR:hover, .boHHJR:focus, .boHHJR:active{background-color: rgb(207, 207, 207);}
.hFRxO:hover {border-color: rgb(255, 255, 255);}
.eJWZiB{background-color: rgb(247 247 247);}
.jzhUtY:hover, .jzhUtY:focus{background-color: rgb(221 221 221);}
.guWypn:hover,.dmojaA:hover, .dmojaA:focus {background-color: rgb(255, 255, 255);}
.ieQmgh{background-color: rgb(236, 236, 236);}
.ihlRSB{color: rgb(0 0 0);}
.hvyAZB{background-color: rgb(225, 225 ,225); color: rgb(0, 0, 0);}
.hBMKRb .react-calendar{background-color: rgb(225, 225 ,225);color: rgb(0 0 0);}
.hBMKRb .react-calendar .react-calendar__navigation button{ color: rgb(0 0 0);}
.hBMKRb .react-calendar button,.lmJMtU,.etPYod{color: rgb(0 0 0);}
.hBMKRb .react-calendar .react-calendar__month-view__days__day--weekend {color: rgb(111 111 111);}
.jmUAMl {color: rgb(255, 1, 1);}
.hBMKRb .react-calendar button.react-calendar__tile--active, .hBMKRb .react-calendar button.react-calendar__tile--hasActive {background: rgb(255, 1, 1);color: rgb(255, 255, 255);}
.geYWQr{background-color: rgb(236, 236, 236);}
.FVycx{background: rgb(255, 255 ,255);border: 1px solid rgb(201, 201, 201);color: rgb(0, 0, 0);}
.eqbSA-d > svg{color: rgb(127, 127, 127);fill: rgb(229, 229, 229);}
.lmJMtU:hover {background-color: rgb(255, 255, 255);}
.dNDjit{background: rgb(236, 236, 236); color: rgb(38, 38, 38);}
.hUDBks{color: rgb(3, 90, 204);}
.dpJugp{color: rgb(0, 0, 0);}
.kbKZMK{background-color: rgb(255, 255 ,255);}
.bqcJch{background-color: rgb(236, 236, 236);}
.blfwWg{background-color: rgb(255 255 255);}
.dzrNmJ .ffKbTF,.dzrNmJ .kIDagJ{background: rgb(0, 0,0, 0.4);}

Plugin Author

Pascal Birchler

(@swissspidy)

3 years, 2 months ago

Thanks for the additional information. While we won’t make the class names static, we will take your feedback into consideration.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Light Theme’ is closed to new replies.

Tags