make tqdm bar dark in VSCode Jupyter notebook

Question

I am using Jupyter notebooks in Visual Studio Code with dark mode enabled. I visualize progress bars with tqdm, but it does not show up dark. See the image:

According to this issue on GitHub, this is not a problem with the Jupyter, ipywidget or tqdm itself, and it is related only to VSCode.

Is there any workaround to fix this?

The workaround which is a bit hacky consists of doing both of these things: (1) Setting the default pywidgets background color to black in vscode: See [Link](https://stackoverflow.com/a/73826994/5659969) and (2) Setting the widgets style for text color as an IPython pre cell run event (to get white text): See [Link](https://stackoverflow.com/a/67745989/5659969) — omasoud, Dec 21 '22 at 18:48

score 0 · Answer 1 · answered Apr 10 '23 at 10:24

you can pass the tqdm-bar_format argument to tqdm with a custom format that uses ANSI escape codes to set the color.

something like this:

from tqdm import tqdm
import time

# Custom format with ANSI escape codes for dark green color
dark_green = "\033[1;32;40m"
bar_format = f"{dark_green}{{l_bar}}{{bar:50}} [{{elapsed}}]{{r_bar}}"

# Create tqdm progress bar with custom format
for i in tqdm(range(100), bar_format=bar_format):
    time.sleep(0.01)

Also, This-Post can be helpful.

score 0 · Answer 2 · answered May 19 '23 at 21:52

I had the same issue and my search revealed that entering the following alone in a cell cured the background display issue but the text being dark could be a problem still on dark background. I set mine to a peach color page as a compromise (see screenshot):

%%html
<style>
.cell-output-ipywidget-background {
   background-color: transparent !important;
}
.jp-OutputArea-output {
   background-color: transparent;
}  
</style>

make tqdm bar dark in VSCode Jupyter notebook

2 Answers2