Enable Dark Mode

  • Resolved pardinn

    (@pardinn)


    2 years, 3 months ago

    Is there an easy way to set the colors for a dark theme? All font colors and icons are in gray, which doesn’t work really well with my website that’s mostly black. I’ve been manually changing the color variables to lighter ones, but it is a lot of work to change them individually, especially those using HSL, and it doesn’t look like I’d have access to change the SVG icons. I was wondering if there’s an easier way to do it. Thank you!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Marcus (aka @msykes)

    (@netweblogic)

    Hello, there might be an easy way to do this, we’re experimenting with the concept. You could add the below code to your Customizer > Additional CSS, then modify the first line to have the color you want:

    .em .em-icon { background : red; }
.em .em-icon.em-icon-logo-office365 { -webkit-mask-image: var(--icon-logo-office365); mask-image: var(--icon-logo-office365); }
.em .em-icon.em-icon-logo-google-calendar { -webkit-mask-image: var(--icon-logo-google-calendar); mask-image: var(--icon-logo-google-calendar); }
.em .em-icon.em-icon-logo-apple { -webkit-mask-image: var(--icon-logo-apple); mask-image: var(--icon-logo-apple); }
.em .em-icon.em-icon-logo-outlook { -webkit-mask-image: var(--icon-logo-outlook); mask-image: var(--icon-logo-outlook); }
.em .em-icon.em-icon-download { -webkit-mask-image: var(--icon-download); mask-image: var(--icon-download); }
.em .em-icon.em-icon-spinner { -webkit-mask-image: var(--icon-spinner); mask-image: var(--icon-spinner); }
.em .em-icon.em-icon-calendar { -webkit-mask-image: var(--icon-calendar); mask-image: var(--icon-calendar); }
.em .em-icon.em-icon-calendar-empty { -webkit-mask-image: var(--icon-calendar-empty); mask-image: var(--icon-calendar-empty); }
.em .em-icon.em-icon-list-grouped { -webkit-mask-image: var(--icon-list-grouped); mask-image: var(--icon-list-grouped); }
.em .em-icon.em-icon-filter { -webkit-mask-image: var(--icon-filter); mask-image: var(--icon-filter); }
.em .em-icon.em-icon-list { -webkit-mask-image: var(--icon-list); mask-image: var(--icon-list); }
.em .em-icon.em-icon-map { -webkit-mask-image: var(--icon-map); mask-image: var(--icon-map); }
.em .em-icon.em-icon-location { -webkit-mask-image: var(--icon-location); mask-image: var(--icon-location); }
.em .em-icon.em-icon-settings { -webkit-mask-image: var(--icon-settings); mask-image: var(--icon-settings); }
.em .em-icon.em-icon-clock { -webkit-mask-image: var(--icon-clock); mask-image: var(--icon-clock); }
.em .em-icon.em-icon-folder { -webkit-mask-image: var(--icon-folder); mask-image: var(--icon-folder); }
.em .em-icon.em-icon-category { -webkit-mask-image: var(--icon-folder); mask-image: var(--icon-folder); }
.em .em-icon.em-icon-tag { -webkit-mask-image: var(--icon-tag); mask-image: var(--icon-tag); }
.em .em-icon.em-icon-ticket { -webkit-mask-image: var(--icon-ticket); mask-image: var(--icon-ticket); }
.em .em-icon.em-icon-at { -webkit-mask-image: var(--icon-at); mask-image: var(--icon-at); }
.em .em-icon.em-icon-next-circle { -webkit-mask-image: var(--icon-next-circle); mask-image: var(--icon-next-circle); }
.em .em-icon.em-icon-prev-circle { -webkit-mask-image: var(--icon-prev-circle); mask-image: var(--icon-prev-circle); }
.em .em-icon.em-icon-first-circle { -webkit-mask-image: var(--icon-first-circle); mask-image: var(--icon-first-circle); }
.em .em-icon.em-icon-last-circle { -webkit-mask-image: var(--icon-last-circle); mask-image: var(--icon-last-circle); }
.em .em-icon.em-icon-cross-circle { -webkit-mask-image: var(--icon-cross-circle); mask-image: var(--icon-cross-circle); }
.em .em-icon.em-icon-checkmark-circle { -webkit-mask-image: var(--icon-checkmark-circle); mask-image: var(--icon-checkmark-circle); }
.em .em-icon.em-icon-close { -webkit-mask-image: var(--icon-close); mask-image: var(--icon-close); }
.em .em-icon.em-icon-chevron-down { -webkit-mask-image: var(--icon-chevron-down); mask-image: var(--icon-chevron-down); }
.em .em-icon.em-icon-chevron-up { -webkit-mask-image: var(--icon-chevron-up); mask-image: var(--icon-chevron-up); }
.em .em-icon.em-icon-magnifying-glass { -webkit-mask-image: var(--icon-magnifying-glass); mask-image: var(--icon-magnifying-glass); }
.em .em-icon.em-icon-location-on { -webkit-mask-image: var(--icon-location-on); mask-image: var(--icon-location-on); }
.em .em-icon.em-icon-location-off { -webkit-mask-image: var(--icon-location-off); mask-image: var(--icon-location-off); }
.em .em-icon.em-icon-checkmark { -webkit-mask-image: var(--icon-checkmark); mask-image: var(--icon-checkmark); }
.em .em-icon.em-icon-plus { -webkit-mask-image: var(--icon-plus); mask-image: var(--icon-plus); }
.em .em-icon.em-icon-minus { -webkit-mask-image: var(--icon-minus); mask-image: var(--icon-minus); }
.em .em-icon.em-icon-compass { -webkit-mask-image: var(--icon-compass); mask-image: var(--icon-compass); }
.em .em-icon.em-icon-options-v { -webkit-mask-image: var(--icon-options-v); mask-image: var(--icon-options-v); }
.em .em-icon.em-icon-point-down { -webkit-mask-image: var(--icon-point-down); mask-image: var(--icon-point-down); }
    Plugin Author Marcus (aka @msykes)

    (@netweblogic)

    Just checked your site, looks like you did it another smart way, just copying the css and changing the svg fill color ??

    Thread Starter pardinn

    (@pardinn)

    Thank you for the CSS and for checking my site. I had a lot of work tweaking the colors one by one, but I think I’m getting in good shape now. I also pointed most of the plugin’s color variables to the ones from my theme so it is easier to change them in case I need to in the future. Also, kudos to the great plugin. You did an amazing job there!

    I would like to know how to do this as well. The solution you provided does not work at all, and it is baffling to me that this is not a simple option somewhere in the settings. I even have the Pro version, which is NOT cheap. And still there is no way to choose colors for text, or icons, etc. WHY????

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Enable Dark Mode’ is closed to new replies.

Tags