Forums » Plugin: Dark Mode Block » emojis

  • Resolved snoop23

    (@snoop23)


    Hi there,

    Thanks for the dope plugin. Been waiting for something like this.

    Any chance we can prevent emojis from being inverted? They look rather spooky once the magic has been enabled. ; )

    Thanks for looking into it!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Erik

    (@codekraft)

    Ciao @snoop23, have you tried the styling method that you can find in the plugin readme under the section “Customization”? In the basic version the plugin works by inverting the colors, but I suggest to make a css sheet on purpose with the two colors to be inverted (background and the text color), If you have a “standard” template it should have the two css color vars that allow you to do it easily. If not let me see the site I’ll try to give you some advice on how to proceed

    The emoji that you mention are contained in an html element of what type? Currently only these are reversed (img, video, svg) but maybe i have miss some

    Thread Starter snoop23

    (@snoop23)

    Ciao Erik! Thanks for the quick response.

    I’m no coder unfortunately, but have this theme running: https://wordpress.org/themes/hey/

    Everything looks great inverted, except for the emojis used.

    However, I realize the issue is of rather lower priority, so feel free to just close the ticket. I don’t have that many emojis added. ; )

    Plugin Author Erik

    (@codekraft)

    No thanks, let’s leave this issue open until it is fixed… and thanks for the bug report!

    I figured out the issue, the emojis are an unicode character and are treated exactly like plain text (e.g. <p>😀</p>). It can be fixed, it’s just a matter of find a css selector that allows to “pick” that character range, soon I’ll try to do something to fix.

    Thread Starter snoop23

    (@snoop23)

    Cool. Thanks so much for looking into it. Much appreciated.

    Plugin Author Erik

    (@codekraft)

    Hello 👋 sorry for the delay but it took me a while to find a solution…
    Unfortunately I tried doing as I said, i.e. creating another set of fonts for the range of the emoji unicode, but it gets a bit complex and difficult to make it work with every theme.

    Anyhow i have another solution, checkout this:
    https://gist.github.com/erikyo/a39142908137ad89aaf0383702b1394c

    I basically use a regex to select and wrap all the emoji on the page inside a span with the “dark” class, and I also add a style to the page that extends the functionality to everything with the dark class.

    it’s a patch, however I suggest you do what is described in the readme, to override my style and create your own that, when the “.dark-mode” class is enabled, inverts the text colour with the background colour. As I say in the plugin readme all the themes for WordPress are very varied and I can’t go for it, using the revert is just a demonstration that the plugin works but I warmly suggest to use a custom style for a better result.

    This does not exclude that if I come up with something better I will include it in future releases, but for the moment this is the best I could do! 😅

    Plugin Author Erik

    (@codekraft)

    Ciao @snoop23, in the CSS style of latest version (v0.1.1), there is a new class called “no-dark”, that prevents the element from being filtered by the invert effect. I have also updated the gist, thereby eliminating unnecessary and duplicated styles.

    Please let me know if this solution works for you. Additionally, feel free to provide feedback on whether you find it reasonable to add this code yourself or if you would expect it to be automatically included within the plugin. Just a curiosity to know what users want

    Thread Starter snoop23

    (@snoop23)

    Hey there,

    Sorry for the late response. Not sure how I missed that.

    I’m no coder, but have tried adding in the snippet via WP Code. Unfortunately, that didn’t help.

    Also, after the latest update, the issue still seems to persist though.

    But no worries. It’s really just an edge case. Feel free to close the ticket.

    Thanks a lot for your assistance though. Really appreciate the attentiveness here.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.