Koo App Dark Mode by vnxcius

Details

Authorvnxcius
LicenseNo License
Categoryhttps://www.kooapp.com/
Created2 years, 3 weeks ago
Updated2 years, 3 weeks ago
Size14 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

Koo App Dark Mode created by vinisimon.dev. Everybody wants dark mode so here it is, while we don't have it officially. :)
Made line by line.
Notes

Report issues at https://github.com/vnxcius/koo-ap-darkmode/issues
This dark mode was made for everyone and everyone can modify it. Be free to change any settings.
Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Koo App Dark Mode
@version      20221119.21.47
@namespace    userstyles.world/user/vnxcius
@description  Koo App Dark Mode created by vinisimon.dev. Everybody wants dark mode so here it is, while we don't have it officially. :)

Made line by line.
@author       vnxcius
@license      No License
==/UserStyle== */

@-moz-document domain("kooapp.com") {
/* ==UserStyle==
@name         Koo App Dark Mode
@version      1.0.19112022
@namespace    https://userstyles.world/user/vnxcius
@description  Dark mode for Koo App, clean and gorgeous.
@author       vinisimon.dev (@vnxcius)
@license      No License
==/UserStyle== */

:root{
    
    --white: #FBFCF7;
    
    --bg-color: #151515;
    --bg-color2: #181818;
    --border-color1: #171717;
    --border-color2: #303030;
    --fg-1: #272727;
    --yellow: #f2c022;
    --text-color1: #8e8e8e;
    --text-color2: var(--white);
    --text-color3: #bfbfbf;
    --hover: #bfbfbf;
    --hover2: #262626;
    --hover3: #323232;
    --hover4: #ffb106;
    
    
}



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




/* add account */
._3aGcm{
    background-color: var(--bg-color2);
}

._1pA0x, .SfEGA, ._3IumR{
    color: var(--white) !important;
}

._2cGzB{
    background-color: var(--bg-color2);
}

._36CvY,._3Q5rI{
    color: var(--white) !important;
}

._3Q5rI img{
    filter: brightness(100);
}

.react-apple-signin-auth-btn-light path{
    fill: var(--white) !important;
}

.SfEGA a{
    color: var(--text-color1) !important;
}

._1S2D-{
    filter: brightness(100) !important;
}



/*-----------------------------------*\
  #LEFT BAR
\*-----------------------------------*/

._2Oxu6{
    background-color: var(--bg-color);
}



/*nav buttons*/
._2bJqv:is(:hover, :focus){
    background-color: var(--fg-1) !important;
}


._3klPV:hover ._2bJqv,._28TS7{
    -webkit-transition:background .1s ease-in-out;
    -o-transition:background .1s ease-in-out;
    transition:background .1s ease-in-out
}

._3klPV:hover ._2bJqv{
    background: var(--fg-1);
}


._3sp-w h5{
    color: var(--text-color1) !important;
}

.oU9Hb img::after{
    filter: brightness(100)
}

._3klPV button {
    filter: brightness(100);
}

.oU9Hb{
    filter: none !important;
}



/* profile button */
.TLbbt{
    background-color: var(--bg-color2);
    border-color: var(--border-color2)
}

._2bghj{
    color: var(--white);
}



/*button + Koo*/
._2VfDv{
    background-color: var(--yellow);
    border: none;
}

._2VfDv:is(:hover, :focus){
    background-color: var(--hover4) !important;
}




/*-----------------------------------*\
  #FEED
\*-----------------------------------*/




/* feed background*/
._3IYIX{
    background-color: var(--bg-color2);
}




/* top feed options bg */
._11JmU{
    position: fixed !important;
    z-index: 3 !important;
    background-color: var(--bg-color2) !important;
}

._5ZKJ8.selectedButton::after{
    border-color: var(--yellow);
}

._1IkWE h5{
    color: var(--yellow) !important;
}

._1IkWE{
    color: var(--yellow) !important;
}





/* CREATE POST */

.css-vmo2nu{
    background: none;
}

.css-frgt2h{
    background-color: var(--fg-1);
}

.css-4dqbgb{
    background-color: var(--bg-color) !important;
    border-color: var(--border-color2);
}

.css-e01vl5, .css-ycr5vf, .css-btrmdm, .css-1o3e9w4, .css-1hqcwul, .css-1n0rgp7, .css-uyv0hi{
    background-color: var(--fg-1);
}

.css-ycr5vf, .css-79elbk, .css-1d1ztm5{
    background: var(--fg-1);
    color: var(--white);
}

/* language button*/
.css-bubol0{
    color: var(--white) !important; 
    background-color: var(--hover2) !important;
    border-color: var(--border-color2) !important;
}

.css-bubol0::after{
    background-color: var(--hover2) !important;
}

/* language config */
.css-1847toy{
    background-color: var(--yellow);
}

.css-1847toy:is(:hover, :focus){
    background-color: var(--hover4) !important;
}


/*post button*/
.css-pin5he{
    background-color: var(--yellow);
}

/*back button*/
.css-97c37r [data-nimg]{
    filter: brightness(100);
}

/* profile pic, just to remove the filter*/
.css-hxotzf [data-nimg]{
    filter: none;
}

/* create bottom */
.css-16uq75j{
    background-color: var(--fg-1);
}

.css-6adkvl, .css-1bntj9o{
    background-color: var(--fg-1); 
}

.css-6adkvl{
    border: none;
}

.css-uqvevw:is(:hover, :focus){
    background-color: var(--hover3) !important;
}

/* create config */
.css-ky1o2e, .css-1y5g08w, .css-1nwsxuf, .css-uxt8dx, .css-1d1w4o9{
    background-color: var(--bg-color);
    border-color: var(--border-color2);
}

.css-1nwsxuf{
    background-color: var(--bg-color2);
}

.css-ky1o2e, .css-1937m1u, .css-jdfwp9, .css-1llakbw, .css-1nx70zi, .css-16h6ite, .css-5c063h, .css-16h6ite, .css-1jcbflt, .css-onkibi, .css-uyv0hi{
    color: var(--white) !important;
}


/* leave warning */
.css-plli3e{
    background-color: var(--yellow);
    border: none;
}

.css-10y5jve{
    background-color: var(--hover3);
    color: var(--white);
    border-color: var(--white);
}


/* CREATE POST FROM COMMENTS */
._160Am, ._3zGCs, ._8iNxG{
    background-color: var(--bg-color2);
    border-color: var(--border-color2);
    color: var(--white);
}

.Xbdnw{
    background-color: var(--bg-color);
    border-color: var(--border-color2);
}

._1a9Q5{
    color: var(--white);
}

._3upq_, ._20IVP, ._3f_oi{
    background-color: var(--bg-color) !important;
    border-color: var(--border-color2);
    color: var(--text-color3);
    
}

.Y9806, .Y9806 div{
    background-color: var(--bg-color) !important;
    border-color: var(--border-color2);
    
}


._2hNHo{
    border: none !important;
    background: none !important;
}





._18nQ8{
    background-color: var(--bg-color) !important;
    border-color: var(--border-color2);
}

._18nQ8 button{
    filter: brightness(100);
}

._18nQ8 div, ._18nQ8 span{
    color: var(--white) !important;
}

#PostButton{
    background-color: var(--yellow) !important;
    border: none !important;
    cursor: pointer;
}


/* FEED POSTS */

._30Ibw{
    border: 1px solid var(--border-color1) !important;
    background-color: var(--bg-color);
}

/* what is in your mind */

._2nxUQ{
    background-color: var(--fg-1);
    border-color: var(--border-color2);
}

/* (+) button */
._2nxUQ a img{
    filter: grayscale(100);
}



/* post username */
._1e9m_{
    color: var(--white);
}


/* post text*/
.JHnAG{
    color: var(--text-color3) !important;
}

._1Mxo5{
    color: var(--white);
}

._25V56{
    color: var(--text-color3);
}


/* REACTIONS */
._1RJkC{
    background-color: var(--bg-color2);
}

._2TS0V, ._2eGJm{
    color: var(--white);
}

.w7ADY{
    filter: brightness(100);
}

.XeJC_{
    color: var(--yellow) !important;
}

.XeJC_.selectLine::after{
    border-color: var(--yellow) !important;
}

.vNGwI{
    background-color: var(--bg-color);
    border-color: var(--border-color2)
}

.vNGwI:is(:hover,:focus){
    background-color: var(--hover3) !important;
}


/* pool */
._2WiZs{
    background-color: var(--yellow) !important;
}

._1_Uag{
    color: var(--white);
    
}



/* post link */
._1lQ36{
    background-color: var(--fg-1);
    border-color: #000 !important;
}

._253Sj{
    border: 1px solid var(--border-color2);
    background: none;
}

._6olDO:hover{
    color: var(--hover);
    
}

/* right up corner button */
._2kIaT::after{
    background-color: var(--hover3) !important;
}

._3LTXF{
    background-color: var(--fg-1);
}

._3QdLP{
    color: var(--white);
}

._285LB{
    filter: brightness(100);
}

._3VHZR:hover{
    background-color: var(--border-color2)
}

._2aBXI:hover{
    background-color: var(--border-color2)
}


/* interaction buttons */
._13Ai0:is(:hover, :focus){
    background-color: var(--hover3) !important;
    box-shadow: 0 0 0 3px var(--hover3);
}


/*who to follow*/

._4EXN4, ._2hBXY{
    color: var(--white);
}


.i9KL- img{
    filter: brightness(100);
}

._1XLU_{
    filter: none !important
}

._2CCLa{
    background-color: var(--bg-color);
    border-color: var(--border-color2);
}

/* comment section */
._3KfDD, ._8cw8U{
    background-color: var(--bg-color);
    border-color: var(--border-color2) !important;
}



/*-----------------------------------*\
  #RIGHT BAR
\*-----------------------------------*/


/* bg of right bar*/
._2knNJ{
    background-color: var(--bg-color);
}



/* SEARCH INPUT */



._2uMHi{
    background-color: var(--fg-1);
    border-color: #303030;
    color: var(--white)
}

._1C8uK:is(:hover, :focus){
    background-color: var(--hover2);
}

/* input text */
._1yLtb{
    color: var(--white);
}

/* search results */
._3P1Cm{
    background-color: var(--fg-1);
}

._1C8uK span{
    color: var(--text-color1);
}


/* select language */
._1sfFF, ._1OXHW, ._392hR{
    background-color: var(--bg-color2);
}

.soTbA, ._336VF, .M1TbC{
    border-color: var(--border-color2) !important;
}

._1rdFp, .hyRtJ{
    color: var(--white) !important;
}



/* notifications */
.YKEom{
    color: var(--text-color2);
}

.YKEom:visited{
    color: var(--text-color1);
}

.YKEom:hover{
    color: var(--hover)
}
    

.JIFVg{
    border-color: var(--border-color2) !important;
}

._1-NNC{
    background: none !important;
    border: none !important;
}



/* TRENDS */


/* trending hashtags */
.yzz8Z{
    color: var(--white) !important;
}

/* trends box bg color */
._1YWt_, ._2UOMz{
    background-color: var(--fg-1) !important;
    border-color: var(--border-color1);
}

._1YWt_:is(:hover), ._2UOMz:is(:hover){
    background-color: var(--hover3) !important;
}


._2f_EU, ._3ctZe{
    color: var(--white) !important;
}

.GEmUF{
    filter: grayscale(100)
}

._2y4P8{
    background-color: var(--fg-1);
    border-color: var(--border-color2);
}

._1XAaX{
    color: var(--white);
}

._1XAaX:hover{
    color: var(--text-color1);
}

._3tm7b img{
    filter: grayscale(100)
}


/* hashtags */
._1DZxP {
    background-color: var(--bg-color2) !important;
}

._1i2K2{
    color: var(--white);
}

._1ujxo{
    filter: brightness(100);
}

._2H-nN ._2LSvC{
    background-colo...
Reviews

No reviews yet.