What is the process for modifying the heading color in Bootstrap's dark mode?

If you want to enable dark mode according to the Bootstrap documentation instructions, follow these steps:

<html lang="en" data-bs-theme="dark">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>

<body>
  <h1>Hello, world!</h1>
</body>

</html>

However, it seems that the titles appear in a different shade of white compared to the dark mode shown in the official Bootstrap documentation:

Color modes

Bootstrap now offers color modes or themes starting from version 5.3.0. You can explore the default light color mode and the newly introduced dark mode or customize your own theme using Bootstrap styles.

To achieve the same color scheme as Bootstrap's documentation, how can I make this adjustment?

htmlcssbootstrap-5darkmode

Answer №1

Upon inspecting the element on the documentation page, you will find the following snippet from the custom stylesheet of that particular site:

.bd-content>h2,.bd-content>h3,.bd-content>h4 {
  --bs-heading-color: var(--bs-emphasis-color)
}

If you delve further and click on the --bs-emphasis-color custom property, it reveals its definition in _root.scss:

--bs-emphasis-color: #fff;

You have the ability to override custom properties in your own custom stylesheet as well. In this example, a specific class on the body element is being utilized for selector specificity. Moreover, leveraging existing variable properties like emphasis color adds a level of dynamism to the design (thus enhancing maintainability).

[data-bs-theme=dark] .brighter {
  --bs-heading-color: var(--bs-emphasis-color);
}
<html lang="en" data-bs-theme="dark">

<head>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd9c2dfc2dc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>

<body class="brighter">
  <h1>Hello, world!</h1>
</body>

</html>

For more information on customization, check out: https://getbootstrap.com/docs/5.3/customize/overview/#overview

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

Modify an HTML document using a PHP script

I am creating a website that automatically generates an HTML template with some customizable text through a form. However, I want the ability to retrieve that text in the form after pressing a button or taking some action, so it can be edited. I've ...

phphtml

Is there a way to turn off predictive text for reCAPTCHA on my mobile device?

Using reCAPTCHA on a sign-up form can get frustrating on mobile devices, with constant dictionary word suggestions while typing. I am aware of how to disable this feature for normal input fields by adding attributes through JavaScript, but shouldn't ...

javascripthtmlmobilerecaptcha

Switch the design and save it in the browser's cache

Exploring the possibility of having two themes, "dark" and "light," that toggle when a checkbox is clicked. To implement the theme change, I used the following JavaScript code: document.documentElement.setAttribute('data-theme', 'dark&apos ...

javascriptcsslocal-storage

iOS users are currently experiencing issues with the embedded playlist feature

Since October 17th, 2013, Embedded Playlists no longer function on iOS devices such as iPad and iPhone. This issue has been confirmed on an iPad2 running iOS6 and an iPhone4s running iOS7, with various playlists. Many others have also experienced the same ...

ioshtmlyoutubeyoutube-apiplaylist

Working with PHP and CodeIgniter to highlight active nav-link in Bootstrap for a subdirectory

Just starting out with Bootstrap and running into a little issue. Spent some time on it but can't seem to figure it out. Perhaps it's something simple that I'm overlooking. Essentially, my goal is to keep the nav-link active when navigating ...

phphtmlcsstwitter-bootstrapcodeigniter

The Bootstrap modal-backdrop dilemma requiring JavaScript intervention

I am encountering some problems with the Bootstrap modal. When I try to open a modal, everything looks good, but when I close it, the screen turns completely black. Upon closer inspection, I found that every time I click on the X to close the modal, there ...

javascriptphphtmlbootstrap-modal

The TextBox will alter its color following an incorrect submission

I am struggling to create a bootstrap form that will change the color of the borders to red after incorrect submission. The issue I am facing is that the textbox always remains in red. Does anyone have any suggestions for setting the textbox borders to red ...

javascripthtmlcssbootstrap-4

Use jQuery.ajax() to submit data in separate rows of a table

At the moment, I have no issues submitting my form as long as it contains only one row in the table. However, when I add a second row, an error occurs and the submission fails. My goal is to be able to post the data from each table row separately with just ...

jqueryhtmlajax

Oops! You can't switch to `multiple` mode on a select dropdown once it has already

Here's where the issue lies: This is the code I am referring to: <div fxFlex.gt-lg="100" fxFlex="100" *ngIf="requestAction == 'add'"> <div class="pb-1"> <md2-select plac ...

htmlangularangular2-templateangular2-formsangular4-forms

Javascript isn't being executed by Internet Explorer as expected

I'm currently working on a web application that requires backend processing while simultaneously showing the information on the screen. AJAX seems like the ideal solution, so I've implemented it in my project. However, before initiating the AJAX ...

javascripthtmlajaxinternet-explorer

Guide to populating a dropdown list using an array in TypeScript

I'm working on a project where I have a dropdown menu in my HTML file and an array of objects in my TypeScript file that I am fetching from an API. What is the best approach for populating the dropdown with the data from the array? ...

htmlangulartypescript

Using jQuery to send a post request to a PHP script using either JavaScript or PHP

Just a quick question for those with experience. I am working on a page where I have implemented a jQuery AJAX post to another PHP page that contains JavaScript. My concern is, will the JavaScript code also be executed? Another scenario to consider is if ...

phpjavascripthtmlajax

Sliding divider across two div containers with full width

Seeking a JavaScript/jQuery function for a full page slider functionality. The HTML structure I'm working with is as follows: My objectives are twofold: Both slide1 and slide2 should occupy the full width of the page. Additionally, I am looking for ...

javascriptjqueryhtmlcssfullpage.js

What could be causing the issue with the pseudo-class :first-of-type not functioning correctly?

How come this piece of code executes successfully, querySelector("p + p"); while the following code snippet results in null? querySelector("p ~ p:first-of-type"); ...

csscss-selectors

Safari browser is experiencing issues with the custom file upload script

My custom upload script allows users to easily select images for upload by clicking or dragging them into the designated box. A preview of the chosen image should appear, and this functionality works smoothly in Firefox and Chrome. However, I've encou ...

javascripthtmlcssfile-uploadinput

What could be causing the bullet not to appear in Internet Explorer 6

It is visible in Firefox, but not in IE (specifically IE6). <style type="text/css"> li { list-style-type:disc; } </style> <div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;"> <ul style="margin: 0; ...

cssinternet-explorerhtml-lists

What is the best way to retrieve the targeted style directly from CSS, rather than relying on the computed style of the element?

Although similar questions have been posed before, such as this one, I haven't found a working solution. Is there a way for me to retrieve the width attribute value from a CSS class and then write it to a div? I'm looking to access the exact va ...

jquerycss

Changing the content of a DOM element containing nested elements using JavaScript/jQuery

Need some help with a DOM element that looks like this: <span>text</span> <b>some more text</b> even more text here <div>maybe some text here</div> How can I replace text with candy to achieve this result: <span> ...

javascriptjqueryhtml

Strip the quotes from MVEL's @foreach when iterating over a string array

I am currently using the @foreach Orb notation within MVEL to loop through a string array. someArrayPartOfAJSONObject = ["Item 1", "Item 2"] <ul> @foreach{item: someArrayPartOfAJSONObject} <li>@{item}</li> </ul> However, when ...

htmlmvel

Bootstrap container with added page border

Allow me to explain the issue to the best of my ability: I have a design that needs to be implemented using bootstrap. I prefer to use only CSS and avoid JS/jquery. The content is contained within a bootstrap container that has two columns. The left gre ...

htmlcssbootstrap-5