I am currently working on a website that has the option to switch between light and dark mode, and I need my logo to adjust accordingly. The black elements of my logo should appear black in dark mode and light in light mode. I attempted using the CSS code
svg { fill:="currentColor"}You have the ability to include CSS directly in your SVG code. Here is an example that utilizes the browser's light and dark settings:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<style>
path {
fill: black;
}
@media (prefers-color-scheme: dark) {
path { fill: white; }
}
</style>
<path d="..."/>
</svg>
IMPORTANT NOTE: The next section of my response has not been tested and may not be compatible with an .svg file used within an <img> tag, or even within an <svg> tag. If anyone tests this, please leave a comment below so I can update my answer if necessary.
If you are utilizing another method to switch to the dark theme, you can modify the media query accordingly, such as using a global class:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<style>
path {
fill: black;
}
body.dark-theme path {
fill: white;
}
</style>
<path d="..."/>
</svg>
Consider updating your CSS to the following:
svg { fill=currentColor }
Your icons may be disappearing because they blend in with the background color. Make sure they use the fill property instead of stroke. Share your SVG code if needed.
Remember, you can also utilize the prefers-color-scheme CSS media query for this. Learn more from the resources below.
To easily implement this feature, you can use a CSS class. Simply add the CSS class to the body element when dark mode is activated, for example, darkMode, and then adjust the fill colors accordingly.
function toggleDarkMode() {
document.querySelector("#body").classList.toggle('darkMode');
}.darkMode{
background: black;
height: 100vh;
}
svg{ fill: black;}
.darkMode svg {fill: white;}<div id="body">
<svg height="100" width="100>
<circle cx="50" cy="50" r="40"/>
</svg>
<br>
<button onclick="toggleDarkMode()">Toggle Dark Mode</button>
</div>Is there a way to make an SVG figure rotate around its center? I have been trying to calculate the rotation center and scale it based on the viewBox. It seems to work perfectly fine in Chrome, Firefox, and Safari, but I just can't seem to get it to wo ...
How can a parent component pass multiple ng-templates to a child component? For example, the parent component includes multiple ng-templates: <app-childcomponent> <ng-template>Item A</ng-template> <ng-template>Item B</n ...
In implementing JavaScript, I wish to define two objects stored in a file named file.txt, and utilize them within my code. For instance, I have included the following snippet in my index.php: var counter = Number(localStorage.getItem('rans')) ...
After coding some jQuery, I noticed that the animation is working properly in Chrome but not in IE (version 11.0) or Firefox (32.0.3). Additionally, I found that if I omit 'opacity: 1;' from my animation class, the element will revert back to it ...
I'm facing a challenge with centering a material-ui Simple Breadcrumbs component within a footer as opposed to having it aligned to the left. Even though I'm new to this, I thought it would be straightforward but I can't seem to figure it ou ...
I'm facing a challenge in developing an app that allows me to input event information and then display it on a map. I'm encountering difficulties at the initial stage when it comes to saving the data. Even though Chrome's Inspect tool indica ...
Looking for a way to rearrange a table with 2 columns after every 2 rows so that the lines continue on the right side? Check out the example below: [1][2] [1][2][5][6] [3][4] => [3][4][7][8] [5][6] [7][8] Wondering if this can be achieved using o ...
Currently in the process of developing an application that utilizes Bootstrap Table and its extension, Filter Control. One feature I've incorporated is individual search fields for each column to enhance user experience. The challenge I'm facing ...
I'm striving for a seamless CSS transition. The concept of transition had me puzzled. Even though I utilized the setTimeout method in JavaScript to make my CSS functional, it lacks that SMOOTH feel! Check out my code below. function slideChange( ...
Currently, I am utilizing scrapy to extract content from a website specifically located within a particular <td> tag. The guide provided demonstrates downloading all the information, however, I only require the data from one individual <td>. As ...
I am working on achieving a specific layout as shown in the screenshot below. If both SPAN and B fit within the box, they should be displayed one after another. If they do not fit, SPAN should have an ellipsis while B is fully displayed (never larger tha ...
I’m looking to have my images fully fill the CardMedia component. However, because they are of varying sizes, some end up being cropped like this: https://i.stack.imgur.com/JHIrT.png Additionally, when resizing the images, some get cut off as well: ht ...
I'm interested in transforming SVG elements into the main SVG element. For example, let's say the black square represents the main SVG element. I want to change elements 1, 2, and 3 to different SVG elements using JavaScript code. However, I am u ...
My web-hosted server has a PHP file in a specific folder. I want to send data from an HTML form using Jquery AJAX and view those variables in the PHP code on the server side. Here is my Jquery AJAX code: function sendtoServer() { $.ajax({ ur ...
Summary: Exploring the frontend world for the first time. Attempting to integrate custom components within p-tags for a website, but facing challenges in making them dynamically changeable based on user interaction. Greetings all! As a newbie in front-end ...
I need to dynamically add multiple form fields when a button is pressed, and I want all the fields to be displayed in a table format (each field should have its own space in a <td>field</td> structure). Currently, I am facing an issue where if ...
I am a beginner, so please go easy on me. I am looking to style variables like $product_name, $author, and $details. I was thinking of styling the echos, but in this scenario, the only echo is: <?php // Establish connection with the MySQL database ...
How can I make it so that when an image is hovered over, it automatically scrolls to the bottom of the image? I have a couple of questions: How can I ensure the image scrolls to the end when hovered over? Currently, when I hover over the image, it doe ...
I am trying to retrieve data from a URL http://localhost:3000/share/user=sampleuser to display objects with an author value that matches the one in the URL. However, I encountered an error when attempting to call a function that extracts the value from t ...
In a specific scenario, I am trying to change the border color from black to red in a div by appending a class using ng-class when clicked. However, when clicking a button, the modal opens but the class is not being appended as expected. <div ng-class ...