custom colours with default icon

  • Resolved mrbehemo

    (@mrbehemo)


    10 months ago

    Hi Erik! Love the plugin – it’s really useful in it’s simplicity.

    I’ve set it up to use an alternate colour scheme by swapping the light and the dark parts of the palette, following the Customization instructions. So far so good!

    I’d like to keep the default icon and its switching animation – it’s perfect. But… since I’m not too familiar with CSS, I can’t figure out how to use my custom colours alongside the default icon. Am I missing something?

    Cheers!

    • This topic was modified 10 months ago by mrbehemo.
    • This topic was modified 10 months ago by mrbehemo.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Erik

    (@codekraft)

    10 months ago

    Ciao @mrbehemo! I am glad you liked it!

    there are varius options, choose the one that fits better to you:
    – here you can find the css code here, (it’s minified)…
    – if you need to change something this is the plain css:

    .dark-mode-switch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  transition: 0.5s;
  cursor: pointer;
  background-color: transparent;
  box-shadow: inset -0.3rem -0.3rem 0 0.1rem #334;
}
.dark-mode .dark-mode-switch {
  background-color: #cf5e12;
  box-shadow: inset -0.2rem -0.2rem 0 #dd7600;
}

    And if you need there is also the playground 😇
    https://codepen.io/erikyo/pen/zYeBrMP

    Thread Starter mrbehemo

    (@mrbehemo)

    10 months ago

    That’s great, thanks! Big help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘custom colours with default icon’ is closed to new replies.