Dark Mode Caused by CSS Overriding Accordion

I'm currently using an accordion feature from Flowbite, but I am facing issues with it defaulting to dark mode upon page load. Upon inspecting the element, I discovered that there is some dark mode CSS included in the Flowbite package. In an attempt to resolve this, I extracted the CSS file and manually removed the dark mode CSS that was indicated by the inspection tool. However, even after doing so, the accordion remains in dark mode. On the Flowbite website, you have the option to copy code in either light or dark mode, and I have double-checked multiple times to ensure that I selected the correct setting. I have meticulously reviewed the CSS file, my HTML code, and inspected the element, yet the issue persists.

My goal is for the accordion to maintain its light gray color scheme upon loading, similar to how it is displayed in the provided screenshot. Below are some screenshots for reference:

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

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

https://i.sstatic.net/8vauy.png

<div id="accordion-open" data-accordion="open" class="mx-auto mt-6 mb-10">
                         <h2 id="accordion-open-heading-1">
                           <button type="button" class=" flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 bg-gray-100 " data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
                             <span class="flex items-center">Activity Diagram (click to open/close)</span>
                             <svg data-accordion-icon="" class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                           </button>
                         </h2>
                         <div id="accordion-open-body-1" class="" aria-labelledby="accordion-open-heading-1">
                           <div class="p-5 font-light border-b-2 border-gray-200 border border-b-3 border-gray-200 rounded-b-xl focus:ring-4 focus:ring-gray-200">
                            <img class="pt-6 object-scale-down h-full w-full mx-auto px-28" src="">     
                         </div>
                         </div>
                       </div>
htmlcsscomponentstailwind-cssflowbite

Answer №1

I encountered a similar issue,

After setting the darkMode to class in my tailwindcss.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.html", "./js/**/*.js"],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

I then included the following code in the head section of my html page:

<meta name="color-scheme" content="light">

Suddenly, the issue with grey text appearing on my accordions after expanding one disappeared...

It took me a while to realize that the color change in the accordion text was actually caused by my Mac automatically switching to dark mode in the evenings... Flowbite detected this system setting even though I had not explicitly enabled dark mode in my project using Tailwind CSS.

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

What is the proper way to justify text alignment in HTML?

I want to align the text to the right like the first row, but the second row keeps overflowing below the image. How can I ensure that the text is properly aligned regardless of the number of rows? <a href="javascript:;" id="A_3"><i id="I_4">&l ...

htmlcssalignment

Begin an unnumbered hierarchical list commencing at 1.2.1

I am trying to create a nested unordered list with specific numbering. My goal is for the list to start at "1.2.1, 1.2.2, etc." Please refer to the attached fiddle for reference. The desired outcome is shown in the following image: https://i.stack.imgur ...

htmlcss

Center flex items along the vertical axis

IMAGE <div className="d-flex align-items-center"> <img src={member.user_profile_image} width="41" height="41" alt="" ...

htmlcsstwitter-bootstrapbootstrap-5

Get the HTML file converted to a DOCX format that is compatible with Mac Pages

I am currently working on a Next.js application using TypeScript, and I want to give users the ability to download a page as a DOCX file. Initially, I was excited to discover that this could be easily accomplished by following this method. However, after ...

htmltypescriptmacosdownload

How can a new <li> element be created without being influenced by certain CSS styles?

I am attempting to enhance my menubar by adding a signup/login item aligned on the right without affecting the other center-aligned items. Essentially, I have an entry named "Login/Sign Up" that should maintain its own unique style while seamlessly blendin ...

javascripthtmlcss

Show a 1920x1170 / 183KB image as the background using CSS styling

I need help with displaying a background image that is 1920x1170 pixels and has a file size of 183KB. Here is the code I am using: .bground{ height:auto; left:0; position:fixed; top:0; width:100%; } <div class="bgrou ...

css

Images are not being shown on the desktop carousel display

I am encountering an issue with my carousel. When I attempt to decrease the height of the carousel, the entire image is not being displayed properly (on desktop), although it works fine on mobile devices. My goal is for the carousel not to take up the ent ...

jqueryhtmlcsstwitter-bootstrap-3carousel

Identifying shifts in offsetTop

In my design, I have a page where scroll bars are not allowed, meaning all content must be visible at once. The image below shows the basic layout of the screen to give you an idea. The layout consists of two blocks - Block 1 and Block 2. Block 1 is expan ...

javascripthtmlcssangular

How to Keep PHP Include Visible within the div using Bootstrap 4

I utilized PHP include to add the information inside the modals for the albums, but it is not hidden as specified in the div class where it is included. You can check out the music page on . However, here is the code snippet for the music page where I in ...

phpajaxhtmlbootstrap-4

Switch the scroll direction in the middle of the page and then switch it back

Yesterday, while browsing online, I stumbled upon this website and was amazed by the unique scroll direction change from vertical to horizontal mid-page. I'm curious about how they managed to achieve that effect. Does anyone have insight into the pro ...

javascripthtmlcssscroll

The button activation functionality in jQuery seems to be malfunctioning

Here I am updating the user information and handling the update function via an AJAX call. My aim is to disable the modify button when no updates are done, and enable it when we click on the text boxes for update. I have used Keyup and focus but none of ...

phpjqueryhtml

Tips for consistently showing the addition symbol in my search bar

I created a code snippet that showcases a search box with CSS animations and jQuery toggling functionality. One issue I encountered is ensuring that the plus icon remains visible at all times, whether the search box is expanded or contracted. How can I ac ...

jqueryhtmlcsssearch

Issue in Ionic 3 where ion-list does not scroll vertically on iOS devices when ion-items are dynamically generated using ngFor within the ion-list

When using Ionic v3 to develop a hybrid app, I encountered an issue where ion-items within an ion-list generated using *ngFor are not scrollable on iOS devices. Strangely, this problem does not occur on Android devices. Here is the HTML code snippet: < ...

ioscssionic-frameworkscrollionic3

How can I output HTML code using php echo without using quotation marks?

My issue involves printing out HTML code that is not stored as a simple string, requiring me to decode it before echoing. The problem arises when I echo the decoded value and unwanted quotes appear, disrupting the output. Here's an example: <div> ...

phphtmldecoding

Implementing the linking of a URL to an HTML hidden button that is dynamically displayed through a Javascript program

I'm currently developing a basic webpage that has a feature allowing users to download the final result as an image file in the last step. To achieve this, I've added a hidden HTML button for downloading the result image and used CSS to set its ...

javascripthtmlbutton

"Converting an angular date-picker into a popup-date-picker: A step-by-step

I am currently working on a project in Plunker and I would like to implement an Angular date-picker-popup similar to the one in my design. Any suggestions or ideas on how to achieve this? Thank you in advance! ...

angularjshtmlangular

The PNG logo will display with white borders when viewed on Internet Explorer 9

My current project involves developing an asp.net mvc web application. In the upper top navigation bar, we have a blue area where I am trying to display our logo using the code snippet below: <a class="brand" href="~/Home/Index/"> <img alt="Group ...

htmlcsslayout

Guide on how to align an element (such as a drop-down menu item) directly beneath the parent menu

Is there a way to position a dropdown menu item underneath its parent menu? I want the child dropdown menu to only appear when the parent menu is hovered over. I tried positioning the child elements using position:absolute and adjusting the top and left c ...

php.nethtmlcss

What is the best way to alter the header in Django when a user is authenticated?

In my project, I have two headers: header.html and headersuccess.html. When a user is logged in, I need to change the header from header.html to headersuccess.html. How can I implement that? Here is an excerpt from my views.py file where I render loginsuc ...

javascriptpythonhtmldjangovue.js

Prevent HTML Characters from Rendering in Preformatted Text Tag

After setting up a syntax highlighter, I found out that for it to function properly, the tags need to be indicated as &lt; and &gt;. My task now is to switch all <'s with &lt; and >'s with &gt;, but only within the PRE tag. ...

phphtmlreplacepre