Exciting feature: Changing text color dynamically with Sass

Is it possible to create a mixin that sets text color based on the background? It seems straightforward with one color, but how about when there are two colors or changing the color of half of the text?

Try changing the text with a blue background..

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

This is the simple mixin I have, but it doesn't seem to work as intended:

@mixin setColor($bg) {
    @if (lightness($bg) > 50) {
        color: $dark; // Lighter background, return dark color
    } @else {
        color: white; // Darker background, return light color
    }
}

Answer №1

To achieve the desired effect, you can utilize the mix-blend-mode with the value of difference on your text.

div {
  background: linear-gradient(45deg, #fff 0%, 50%, #6ba8e5 51%);
  width: 500px;
  height: 236px;
}

span {
  mix-blend-mode: difference;
  color: #2c2c2c;
  font-size: 2em;
}
<div>
  <span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span></div>

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

Adding content after text that has been wrapped is a simple process that involves

When the report generator creates orders in html, it uses absolute positioning to ensure the exact layout from the report designer is preserved. Each order row contains a product description and price. Following the order row, there is a horizontal line o ...

What causes the z-index value to stay the same even after it has been modified using the .css() function?

The z-index property defaults to auto, as explained in the MDN documentation. Despite setting the z-index to 1 using the following code: $("body").css("z-index", 1); Upon retrieving the value of z-index with this code: $("body").css("z-index"); The re ...

jQuery Drag Drop Sorting Feature Fails to Work when Moving Items from List to Table Cell

I need assistance with creating a sortable list that can have its items dragged into a table cell, where the items can then be sorted within that cell. The process involves: Dragging a list item into the table cell. Sorting the list item in the secon ...

Having trouble aligning the form in the center?

Despite #container being centered, I am struggling to center the <form>. It is important for me to have all elements inside the form aligned horizontally and despite trying various techniques, it is not working as expected. <!-- Container Start - ...

Website experiencing a 500 internal server error

I am struggling with implementing a maintenance page on my website using PHP and MySQL. I want to display a maintenance page instead of any other page when certain functions are being added. However, after uploading the code, I encountered a 500 error. The ...

Adding query parameters to the end of every link on a webpage

Wondering how to automatically add GET values to the end of each anchor href on a webpage? For instance, if you input google.com?label=12&id=12 I want to ensure that "?label=12&id=12" gets added to the end of every single href in an anchor tag on ...

"Utilize the attr attribute to showcase an image within an HTML select element

I'm trying to showcase the flag of each country in a dropdown menu. Here is the code I attempted: <select id="slcCountry"> <option flag="https://restcountries.eu/data/afg.svg">AFG</option> <option flag="https://restcountr ...

Is it possible for JavaScript to access and read a local file from a web page hosted locally

I am interested in using html, css, and javascript to develop a user interface for configuring a simulation. This interface will be used to generate a visualization of the simulation and an output parameters file based on multiple input files. It is impor ...

Stylish CSS selector

Is there a way to target CSS path based on the style of an element? For instance, if I have two ul elements on a page - one with a style of list-style-type: lower-alpha;: <ul start="1" style="list-style-type: lower-alpha;"> and the other ul without ...

Manipulating and Parsing HTML files locally using Node.js

Hey there! I have a bit of an odd question that might be on the basic side. I'm diving into web development and front-end work, so I'm still fairly new to it all. The Scenario To give you some background, my experience with JS is mainly from usi ...

Modifying the disabled attribute of an input tag upon button click in Angular 2

I am currently working on a function in Angular 2 where I want to toggle the disabled attribute of an input tag upon button click. Right now, I can disable it once but I am looking to make it switch back and forth dynamically. Below is the HTML template c ...

What is the process for displaying a Bootstrap Icon on a webpage?

I recently started using Bootstrap and I'm in the process of creating a login screen for my app. I want to incorporate MDBIcons for Google, Twitter, and Facebook. I referred to the documentation provided at However, upon previewing my webpage, I enco ...

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

What is the best way to transfer an argument from a parsed JSON value to an onclick function?

In our dataset, we have a specific table that contains valuable information. My main objective is to transfer an argument extracted from parsed JSON data to a separate JavaScript function known as newStory(value['stories']) using the onclick meth ...

Incorporate a CSS class name with a TypeScript property in Angular version 7

Struggling with something seemingly simple... All I need is for my span tag to take on a class called "store" from a variable in my .ts file: <span [ngClass]="{'flag-icon': true, 'my_property_in_TS': true}"></span> I&apos ...

HTML input field that shows a hint text when selected

Is there a way to create a text box that shows a hint when clicked on? For example, you can see this feature by clicking on the address text box in the following link: ...

Having trouble with links, imported templates, and selections not functioning properly post file reorganization?

After setting up my jQuery to import universal template files into various parts of my website, everything was running smoothly. However, once I restructured my filing system, things took a turn for the worse. Now, not only is my SELECT dropdown malfunctio ...

What is the best way to make a prevent default function for an input field?

In the case where a user inputs numerical values, only even numbers should be displayed, with odd numbers being prevented by default. HTML: Input any number: <input type="text"> <p id="even"></p> JavaScript: function ...

What is the best way to dynamically set the default value of a select option based on a

Based on the user's location, the post language is automatically set. I want to adjust the dropdown value to match the language of the post. Below is the code that I attempted to use, but it did not work as expected: <label for="lang">Languag ...