Modify the variable to encompass a multitude of hues - scss

Hello, I am looking to modify the background of a page for dark mode.

This is the current background styling:

$orangeLight:#FFA500!default;
$redLight:#FA8072!default;
$blueLight:#B0C4DE!default;
$greenLight:#90EE90!default;

$list2: $blueLight 0%,$blueLight 25%,$greenLight 25%,$greenLight 50%, $orangeLight 50%, $orangeLight 75%, $redLight 75%, $redLight 100%!default;

 .three {
    @include gradient(to top, $list2);
 }

 <ion-content [class.dark-theme]="dark" class="three">
   some content
 </ion-content>

I want to apply the "three" class to dark mode. My idea was to redefine the $list2 variable like this:

.dark-theme{
 $orangeLight:#FF8C00;
 $redLight:#8B0000;
 $blueLight:#00008B;
 $greenLight:#006400;

 $list2: $blueLight 0%,$blueLight 25%,$greenLight 25%,$greenLight 50%, $orangeLight 50%,      $orangeLight 75%, $redLight 75%, $redLight 100%;

ion.content{
 background-image: $list2;
}

What are your thoughts on this approach?

csssass

Answer №1

When it comes to managing themes, CSS variables are a better option compared to Sass variables. This is because CSS variables can be accessed and manipulated directly at the javascript level. While the declaration of CSS variables may not look pretty, it offers greater flexibility with vanilla JavaScript.

To demonstrate this, consider a scenario where you have two themes - default theme and dark theme. By storing these themes as state control and toggling between them using a button click event, you can easily update the theme dynamically.

const themes = {
defaultTheme: [
['--orangeLight', '#FFA500'],
['--redLight', '#FA8072'],
['--blueLight', '#B0C4DE'],
['--greenLight', '#90EE90'],
],
darkTheme: [
  ['--orangeLight', '#FF8C00'],
  ['--redLight', '#8B0000'],
  ['--blueLight', '#00008B'],
  ['--greenLight', '#006400'],
  ]
}

let theme = 'defaultTheme'

const button = document.querySelector('#color-changer')

button.addEventListener('click', function() {
theme = theme === 'defaultTheme' ? 'darkTheme' : 'defaultTheme'
console.log(theme)
updateTheme(theme)
})

function updateTheme(theme) {
themes[theme].forEach(setCssVariable)
}

function setCssVariable ([variable, value]) { document.body.style.setProperty(variable, value) }
html { 
font-size:62.5%;
--orangeLight: #FFA500;
--redLight: #FA8072;
--blueLight: #B0C4DE;
--greenLight: #90EE90;
}

button {
margin: 4px;
padding: 4px;
background: yellowgreen;
}

.container {
width: 300px;
  padding: 12px;
  background: var(--greenLight);
}

.header {
padding: 8px;
background: var(--orangeLight);
}

.content {
padding: 8px;
margin: 2px;
  color: #fff;
  font-weight: 600;
background: var(--blueLight);
}
<div class="container">
<div class="header>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</div>

<button id="color-changer">Change Theme</button>

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

Arrange the bootstrap columns in a grid layout both vertically and horizontally adjacent to one another

I need help with displaying my columns in this specific layout https://i.stack.imgur.com/2hzju.jpg Code <div class="row"> <div id="id-orders-stats" class="col-md-6 col-sm-6"> </div> <div class="col-md-6 col-sm-6 stats-box"&g ...

csstwitter-bootstrap

Radiant Curvature Background Gradient

On my website, I'm trying to replicate the unique background gradient found here. Unlike a basic linear gradient that can be easily repeated as an image to fill any length, this one poses a challenge. Can anyone share a technique or method to help me ...

htmlcssradial-gradients

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

htmlcsssvg

What is the reason behind Chrome's automatic scrolling to ensure the clicked element is fully contained?

Recently, I have observed that when performing ajax page updates (specifically appends to a block, like in "Show more comments" scenarios) Chrome seems to automatically scroll in order to keep the clicked element in view. What is causing this behavior? Wh ...

javascripthtmlcsschromium

The BottomNavigation component in MUI has a minimum size limit of 400px when it displays 5 items

My issue involves a bottom navigation bar with 5 elements. When the window is resized to less than 400px, the bottom navigation does not shrink, instead maintaining a minimum width of 400px and causing a scrollbar to appear on the x-axis. You can view a m ...

javascripthtmlcssreactjsmaterial-ui

"Adjusting the height of a div element while considering the

I have 2 elements with different heights and I want to make them equal: var highestEl = $('#secondElement').height(); $('.element').first().height(highestEl); I understand that the second element is always taller than the first one. W ...

javascriptcsshtmlheight

Modify the background color of the entire page when the main div is clicked

I am attempting to alter the background color of my entire page when the div with id main is clicked. You can view the code here: $(document).ready(function() { var color = 1; $('#main').click(function(){ if (colo ...

javascriptjqueryhtmlcss

What could be causing the CSS not to load on my WordPress website?

In an effort to improve my page speed score, I decided to install several plugins. Unfortunately, after installing w3 total cache, my website stopped loading CSS properly. Check out this image of the website ...

htmlcsswordpressplugins

Tips for eliminating the gap between Bootstrap 4 columns

Is there a way to eliminate the spacing between Bootstrap columns? I have three columns set up using Bootstrap but no matter what I do, I can't seem to get rid of the space between them. <!doctype html> <html lang="en> <head> ...

javascripthtmlcssbootstrap-4

What is the most effective way to align a thumb to the left and content to the right?

What is considered the optimal method for positioning an image to the left with two text fields to the right of it? Is using floats or positioning better? <li> <a href=""> <img src=""THUMB HERE /> </a> <a href=""> TITLE </ ...

css

Addressing see-through box styling in CSS

When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this? .parent { display: inline-block; ...

htmlcssdjangoopacity

Align two separate unordered lists together in the center

Would it be possible to align two separate UL elements next to each other horizontally? Here is the code that I am currently working with: <div id="container"> <ul id="list1"> <li></li> <li></li> ...

htmlcsshtml-listscentering

Issue with SideNav function in MaterializeCss following recent update

After updating the css/js files of the Materializecss design in my project from v0.97.5 to v0.97.8, I noticed that my SideNav isn't functioning correctly anymore. When I try to click on the menu, it slides out but the dark overlay covers the entire sc ...

javascripthtmlcssmaterialize

Having issues with image hover and click functionality

My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with ...

javascripthtmlcsswordpress

Experience a seamless transition as the background gently fades in and out alongside the captivating text carousel

I have a concept that involves three background images transitioning in and out every 5 seconds. Additionally, I am utilizing the native bootstrap carousel feature to slide text in synchronization with the changing background images. Solving the Issue ...

javascripthtmljquerycssbootstrap-4

In Laravel, the text-overflow:ellipsis property fails to function properly when trying to display unescaped data

Encountering an issue with the property text-overflow:ellipsis. The ellipsis at the end of the truncated text is not showing up as expected. To maintain formatting without escaping data in ckeditor, I am using: {!! $treatment->description !!} speci ...

htmlcsslaravellaravel-8laravel-9

What strategies can I use to divide lengthy words in my Django application?

My username on the site is causing overflow outside of the content box, as shown here I tried adding h1, h2, h3, h4, h5, h6 { color: #44444; overflow-wrap: break-word;}, but it didn't work. Here is the code for the profile page: All CSS styles for ...

htmlcssdjango

Leveraging the power of HTML5's details element for optimized printing

The <details> HTML5 element is used to provide a simple show/hide functionality. While this feature works well on-screen, it poses an issue when printing as any closed <details> elements disappear in the printed version. I attempted to fix th ...

cssprinting

The primary content division is trapped behind the side navigation bar

Why is my sidebar fixed on the left of the screen overlapping with the main content? I want the main content to be displayed next to the navbar and scroll up and down while keeping the nav bar in place, but no matter what styling I apply, it doesn't w ...

cssreactjs

Tips for positioning a solitary md-tab component to the right

Can a single md-tab element be aligned to the right of md-tabs while keeping the rest of the tabs in their original position? ------------------------------------------------------------------------- | Tab 1 | Tab 2 | Tab 3 | ...

cssangularjstabsangular-material