amdelamar/pm-theme

How to change the default colour?

Ghost-Recon131 opened this issue · 2 comments

I'm using the bg-image-theme.css and I'm wondering which line of code controls the colour of protonmail's icons and text as pointed by the blue arrow in the image below. My background is quite light so the white text is hard to read properly.
image

You can try something like this:

@charset "UTF-8";/*!
* Custom Theme for ProtonMail v3.15.0
* http://amdelamar.com/pm-theme/
*/:root{--theme1:#667cbd;--theme2:#5f5f60;--theme3:#f0f0f0;--theme4:#bcbdbf;--theme5:#797a7c;--theme6:#9397cd;--theme7:#fefefe;--red:#cc9393;--red-light:#ec6446;--yellow:#dfdf19;--yellow-light:#e7d360;--green:#a6cc93;--green-light:#89bc70;--blue:#bce8f1;--blue-light:#93b9cc;--white:#FFF;--black:#000;--image:url(https://mail.protonmail.com/assets/img/login.jpg)}html{background:var(--image) no-repeat center center fixed var(--theme1);-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}body #pm_main::before{background:var(--image) no-repeat center center fixed var(--theme1);-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;-webkit-filter:blur(15px);filter:blur(15px);transition-property:opacity;transition-duration:.55s;transition-timing-function:cubic-bezier(.165,.84,.44,1);position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;content:""}body #pm_main{position:relative;background-color:rgba(255,255,255,0.3);border-top-left-radius:15px}body,body #body,body header,body header a.logo,body section.sidebar,#ptSidebar{background:transparent!important}.sidebarApp-container .footer div.link a,.sidebarApp-container .footer div.storage strong{color:var(--white)!important}.sidebarApp-item .navigationItem-item,.sidebarApp-item .sidebarApp-link,.sidebarApp-menu .menuLabel-link{font-weight:600}.menuLabel-item.active .menuLabel-link,.sidebarApp-item.active .navigationItem-item,.sidebarApp-item.active .sidebarApp-link{background-color:var(--theme1)}.conversation.active{background:var(--theme1)!important}#conversation-view .message{color:var(--black)!important}#conversation-view .message .frame{color:var(--black)!important}.pm_button,.pm_form .pm_select{background-color:var(--white)}.pm_button.link{color:var(--black)!important}body section.sidebar a.compose{box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}.sidebarApp-container .sidebar-btn-compose{background:var(--theme1)!important;border-color:var(--theme1)!important;color:var(--theme7)!important}.sidebarApp-container .sidebar-btn-compose:hover{background-color:var(--theme6)!important;border-color:transparent!important;color:var(--theme7)!important}.composerHeader-container{color:var(--black)!important}

/* navigation text */
header.headerDesktop-container ul.navigation > li > a {
  color: var(--black);
}
/* sidebar text */
body section.sidebar ul.menu li a {
  color: var(--black);
}
body section.sidebar ul.menu li a:hover {
  color: var(--theme1);
}
body section.sidebar ul.menu li.active a {
  color: var(--black);
}
body section.sidebar ul.menu li.active a:hover {
  color: var(--white);
}
/* folders and labels */
.sidebarApp-menu .menuLabel-link {
  color: var(--black);
}
/* icons */
.sidebarApp-item .navigationItem-icon, .sidebarApp-item .sidebarApp-icon, .sidebarApp-menu .menuLabel-icon {
  color: var(--black);
}

thanks!