Transform the colors of rich text content to match dark mode, similar to the feature in MS

Seeking a solution to convert rich text content colors into dark mode without relying on the filter:invert(1) CSS option. Microsoft Outlook manages this conversion effectively, unlike the current method that turns magenta color into green in dark mode.

Outlook Light Mode:

https://i.sstatic.net/GSjFu.png

Outlook Dark Mode:

https://i.sstatic.net/0f8TQ.png

The goal is to understand how to perform the calculation for converting rich text background and text colors in dark mode, as an alternative to using the filter:invert approach. Previous attempts at implementing this did not yield the expected outcome.

[JavaScript functions and jQuery code snippets provided]

javascripthtmlcssoutlookcolors

Answer №1

It is uncertain whether MS Outlook supports this feature, but in modern browsers, you have the option to utilize the prefers-color-scheme media query to implement specific styles for users in dark mode.

  @media (prefers-color-scheme: dark) {
    body {
      color: #eee;
      background: #121212;
    }

    a {
      color: #809fff;
    }
  }

Answer №2

let message;
let isToggled = false;
function toggleColors() {
  if (isToggled === false) {
    isToggled = true;
    message.style.color = 'white';
  } else {
    isToggled = false;
    message.style.color = 'black';
  }
}

Implement this code into a toggle function

Answer №3

Give this a shot

<style>
   body{
        filter: invert(1) hue-rotate(180deg);
    }
</style>

If you have images on your site

    <style>
       body{
            filter: invert(1) hue-rotate(180deg);
        }
       img{
          filter: invert(1) hue-rotate(180deg);
       }
    </style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is It Acceptable for CSS Code to Contradict Default CSS Code?

Imagine if my CSS looks like this: div { margin: 0; overflow: auto; padding: 1%; text-align: center; word-wrap: break-word; } This is supposed to be the default styling for all div elements. But what happens if there's another div with conflicting c ...

htmlcss

Adjustable dimensions and proportions for the following image

I'm currently working on a blog page using next.js and I've encountered an issue with displaying images. Each post has a main image of varying dimensions and aspect ratios, making it difficult to maintain consistency when scaling for smaller scre ...

cssnext.js

A customizable and adaptable Tetris-inspired CSS design perfect for any screen size

If we imagine having a block like this: <div class="block"></div> There are different sizes of the block: <div class="block b1x1"></div> <div class="block b2x1"></div> <div class="block b1x2"></div> For i ...

javascriptjqueryhtmlcssresponsive-design

How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

I'm currently working on a menu overlay that expands to fill the screen when a user clicks a button in the corner. I'd like the menu items to fade in one by one, similar to the effect used on this website: Most of the functionality is there, but ...

htmlcsscss-transitionsopacitycubic-bezier

What is the best way to create an Office Script autofill feature that automatically fills to the last row in Excel?

Having trouble setting up an Excel script to autofill a column only down to the final row of data, without extending further. Each table I use this script on has a different number of rows, so hardcoding the row range is not helpful. Is there a way to make ...

javascriptexceltypescriptoffice-scripts

Utilize JavaScript to establish an object with key and value pairings

Wanting to loop through and create an object that contains key => [value], if the key already exists, simply add the value. Here is what I have tried so far: let dataName = []; let obj = {}; checkboxes.forEach(checkbox => { if (checkbox.che ...

javascript

Having trouble running a form due to the inclusion of JavaScript within PHP code

My PHP code includes a form that connects to a database, but when I add JavaScript to the same file, the form does not execute properly. (I have omitted the insert code here.) echo '<form action="$_SERVER["REQUEST_URI"];" method="POST">'; ...

javascriptphp

Add and alter a script tag within the Vue template

I am currently working on integrating a payment service into my platform. The payment service has provided me with a form that includes a script tag. This question is a follow-up to a previous query on inserting a script tag inside a Vue template. Here i ...

javascriptvue.jsvuejs2

What is the best way to show a macOS progress pie loading icon alongside files?

While using macOS, a pie loading icon appears next to a file during downloading or transferring. To illustrate, here is an example of a file being downloaded from Chrome: https://i.sstatic.net/8jS4X.png I am interested in implementing a similar feature i ...

javascriptnode.jselectronprogress-bar

Set up two separate tables with sufficient space in between each other

Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out. &l ...

htmlcsshtml-table

working with JSON array information

I have a JSON array retrieved from a database that I need to manipulate. Currently, it consists of 8 separate elements and I would like to condense it down to just 2 elements while nesting the rest. The current structure of my JSON looks like this: { "i ...

javascriptarraysjson

Upload an image converted to `toDataURL` to the server

I've been attempting to integrate the signature_pad library, found at signature_pad, but I am struggling to grasp its functionality. Can someone guide me on how to retrieve an image value and send it to my server? Edit: I have experimented with dec ...

javascriptajaxposttodataurl

How can we convert unpredictable-length JSON user input into well-structured HTML code?

Welcome to the world of web development! I am currently embarking on a project where I aim to transform JSON data into HTML structures. Specifically, I am working on creating a dynamic menu for a restaurant that can be easily updated using a JSON file. The ...

javascriptjqueryhtmlarraysjson

Previewing Jquery script with live interactive effect using Javascript

Looking to create a page where a sentence can be written and displayed in a well-designed format on the right using Jquery live preview. However, currently the design only loads after writing and reloading the page. Any suggestions on how to generate the ...

javascriptjqueryhtmlcss

Is it possible to divide a text string into distinct arrays using spaces?

One method I am familiar with for splitting a string involves using the .split() method, like so: function split(txt) { return txt.split(' '); } When executed, this function would return ['hello', 'world'] if provided wi ...

javascriptarrays

JavaScript: Changing the names of all object keys

As a beginner, I am struggling to rename some objects in my key using a map function. Below is my current array: "platforms": [ { "id": 6, "name": "PC (Microsoft Windows)" }, { "id": 11, "na ...

javascriptarraysreactjsdatabase

Utilizing jQuery to send AJAX requests and display the results on separate lines within a textarea

My form includes a text area where users can enter keywords, one per line. I would like to implement the following functionality: upon clicking a button, an ajax request will be sent to the server to retrieve the result for each keyword entered. The resul ...

javascriptphpjqueryajax

After a loop, a TypeScript promise will be returned

I am facing a challenge in returning after all calls to an external service are completed. My current code processes through the for loop too quickly and returns prematurely. Using 'promise.all' is not an option here since I require values obtain ...

javascriptnode.jsangulartypescriptpromise

Guide to creating intricate designs on an HTML5 Canvas, one pixel at a time

Imagine a scenario where there is a 900x900 HTML5 Canvas element involved. In this case, there is a function named computeRow, which takes the row number as a parameter and returns an array of 900 numbers. These numbers represent colors ranging from 0 to ...

javascripthtmlperformancecanvashtml5-canvas

In JavaScript, find a value in an array and substitute it with the value from the

One of my tasks involves manipulating a string variable in the following manner: domNodes += '<a href="javascript: void(0);" data-role="node_jump" data-node="'+this.tagName.toLowerCase()+'">'+this.tagName + "</a>" + " & ...

javascriptarraysreplacetagname