Identify the discrepancy in CSS for theme-specific styles

In my current project, the CSS is being generated from Sass using webpack. Within the project, I have defined some Sass variables for theming purposes such as $color-primary, $color-bg, and more.

My goal is to have both a light theme and a dark theme. While compiling to two separate CSS files like app-light.css and app-dark.css is not an issue, the challenge lies in the fact that these files share many styles that are not theme-specific.

I am looking for a solution to identify and extract all selectors and properties that are theme-specific to be saved in app-dark.css. This way, app-dark.css will only include data that is relevant to the particular theme.

For example, when comparing app-light.css and app-dark.css side-by-side, the desired output would be:

https://i.sstatic.net/2mwrc.png

I am seeking a tool or method to automatically generate app-dark.css with only the theme-aware properties and selectors, like h1 { color:#fff; }, as shown in the diff.

csswebpacksass

Answer №1

To achieve a clean separation, utilize global Sass variables along with a mixin.

If you currently have two distinct files and some Sass partials being imported and compiled in these files, follow these steps:

Begin by assigning specific values in each file:

/* In app-bright.scss */
$sharedTheme: bright !global;

/* In app-dim.scss */
$sharedTheme: dim !global;

Create a @mixin that will display content only if the global variable AND the mixin argument match either bright or dim:

/* @mixin showOnlyInTone() */
@mixin showOnlyInTone($tone: null) {
    @if (global-variable-exists(sharedTheme)) {
        @if ($tone == bright and $sharedTheme == bright) {
            @content;
        }
        @if ($tone == dim and $sharedTheme == dim) {
            @content;
        }
    } @else {
        @warn "Global $sharedTheme variable is missing. No mixin available!";
    }
}

You can now define different styles for each theme, ensuring they are only compiled into the respective file. See an example below:

p {
    font-weight: 300; 
    margin: 0 0 2rem;

    @include showOnlyInTone(bright) {
        color: #333;
    }

    @include showOnlyInTone(dim) {
        color: #666;
    }
}

This method should provide the desired differentiation between the two files.

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 considered standard practice to include the class attribute directly in the component declaration tag in Vue.js (3)?

<MyCustomComponent class="additional class from the parent" /> Within the MyCustomComponent file : <style language= "scss" scoped> .my-custom-component{ font-size:1rem; } This method is functional, but is it conside ...

cssvue.jsnuxt.jsvue-component

Tooltip not appearing in designated spot as designed

I seem to be having an issue with the positioning of my custom tooltip on a graph. The arrow mark in the tooltip is not displaying where it should be. Can anyone help me figure out what I'm doing wrong? If you'd like to see exactly what I mean, ...

css

Increase the vertical distance between rows in a table

Having some issues with customizing a data grid that I developed. Is there a way to eliminate the header bottom border and insert spacing between each row in the table? View Demo Example Code: <dx-data-grid style="margin-top:50px" class="table" [dat ...

htmlcssangulartypescriptdatagrid

The color of CSS links appears inconsistent when viewed on the homepage of the root URL

When I hover over the links in my drop-down menu, they are supposed to turn light blue. This works perfectly on my index.html page. However, when I visit the root URL of my website, the color change does not happen and stays as the standard color. I have t ...

htmlcss

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

I'm currently working on the design for a homepage where I want to showcase the same image repeated 4 times in a row, creating a decorative banner effect. Each image is set to occupy 25% of the screen width, which should theoretically fit perfectly si ...

csstwitter-bootstrap

When I toggle the div to close on mobile, I want it to show on desktop

My attempt at creating a toggle button to hide and show content was not successful. I struggle with coding in Javascript/Jquery. In the desktop view, the description displays perfectly (see image here), but in mobile view, there is a button to toggle hidi ...

javascriptjqueryhtmlcss

Is there a way to implement jwt.verify() from jsonwebtoken in a React application?

Every time I attempt to use the jwt.verify() or jwt.decode() function in my React project, it keeps throwing a multitude of errors. The errors that I encounter are: ERROR in ./node_modules/jwa/index.js 5:13-30 Module not found: Error: Can't resolve ...

javascriptnode.jsnpmwebpackjwt

How should image dimensions for a background image be properly specified in CSS?

In my CSS file, I have defined styles for mini icons like this: /* Total counts - mini icons */ span.count-facebook { background: #fff url(../images/mini-icons/facebook.png) no-repeat 1px center; } span.count-plusone { background: #fff url(../images/mini- ...

css

What causes delays in transition for 'margin' and 'padding' in webkit browsers?

I attempted to use CSS transition effects on the margin and padding properties. The goal was to create an illusion of a larger background upon hovering. To achieve this, I increased the padding and decreased the margin correspondingly on hover, ensuring t ...

cssgoogle-chromewebkitcss-transitions

Utilizing JavaScript to implement an interactive :hover pseudo-class dynamic effect

After reviewing a question on adding a hover class to an element, I am now curious about how to do the opposite. I already have a main class for a button I am planning to create, where I will customize the background for each button using myButton.style.b ...

javascripthtmlcsspseudo-class

The latest version of Node Sass, version 6.0.0, does not work well with versions ^4.0.0 or ^5.0.0 of

I attempted to add sass-loader for compiling scss files, but encountered a version compatibility issue. Even after downgrading the version and trying various solutions, the problem persists. Details of my environment: React version- 17.0.2 Node versi ...

reactjssasscreate-react-appnode-sasssass-loader

I'm wondering why using display flex with justify-content center and align-items center is not properly centering the elements both horizontally and vertically. Can anyone explain this?

As I delve into the world of JavaScript, I find myself coding simple JS, HTML, and CSS snippets to enhance my learning experience. These exercises help me grasp the concepts well enough to create various JS web elements and projects. My goal is to eventual ...

htmlcssflexboxcentering

Why isn't ::before working? What could possibly be causing this issue?

Is there a way to add a background image to a container and ensure it displays properly? CSS CODE .headerandmain::before { background-image: url(Images/HomeImg2.jpg); } HTML CODE <section class="headerandmain"> <header> ...

htmlcss

CSS rule for targeting an element that does not have any child elements

I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...

csscss-selectors

Is it possible to use columns in the Bootstrap 4 grid system to create text that wraps around an image?

I have been searching for a solution all day without success. Can anyone help me figure out how to wrap text around an image using d-flex or flex-wrap in Bootstrap 4's grid layout with columns and rows? Below, I have shared my code and included two im ...

cssflexboxgridbootstrap-4word-wrap

Is there a way to fade just the div element without affecting the text?

Is there a way to apply fade in/out effect only to the background of the div, without affecting the text inside? You can view my code snippet here: https://jsfiddle.net/tc6fq235/3/ <div class="fade">Hover over me.</div> .fade { background- ...

htmlcssfade

What are some ways to keep the text within the boundaries of the input box?

How can I prevent the letters from extending beyond the bar when typing a lot of characters? Your assistance in resolving this issue is greatly appreciated. <div id="tasks-container"> <div id="tasks-header"> ...

javascripthtmlcss

Choose the span element that is contained within multiple div elements

Is there a way to target a specific span tag and change the text color to white without using IDs? I am trying to modify the CSS of the friend section on a page but cannot add any IDs. This is for the friend section on the website younow. <div id="left ...

javascriptjqueryhtmlcss

Having trouble applying CSS styles to an element using JavaScript

Hello, I have an unordered list with some list elements and I am trying to apply a CSS style to highlight the selected list element. However, the style is not taking effect as expected. function HighlightSelectedElement(ctrl) { var list = document.ge ...

javascripthtmlasp.netcss

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

javascriptjqueryhtmlcssnode.js