mgr.Markdown and mgr.Chatbot are not picking up gr.Block theme

[liwalayouni]

Hello, I'm wondering how can I pass the gr.block theme to the mgr.Mardown. In the following example, you will notice that when displaying normal text in mgr. Mardown the theme's css got transfered successfully. however, when displaying a tables or accordions, the background will mach the default dark theme and not the custom one. Any chance we can transfer the gr.block theme to downstream components (mgr.Chatbot and mgr.Markdown)

see sniped code to reproduce:

import gradio as gr

import modelscope_studio as mgr
my_theme = gr.Theme.from_hub("freddyaboulton/test-blue")

with gr.Blocks(theme=my_theme) as demo:

    mgr.Markdown("""
hello, this a chatbot assistant.\n
Notice: the backround is mutching the theme.

-----------------------------------------
"""
    )

    mgr.Markdown("""
|    | age_bracket   |   customer_count |
|---:|:--------------|-----------------:|
|  0 | 19-30         |                3 |
|  1 | 31-45         |                7 |
|  2 | 46-60         |                6 |
|  3 | 61+           |                4 |
"""
    )

    mgr.Markdown("""
<accordion>

::accordion-title[Using `tool`]

\```json
{"text": "glorious weather", "resolution": "1024*1024"}
\```

</accordion>
""")

if __name__ == "__main__":
    print(demo.theme_css)
    demo.queue().launch()

see screenshot of what I'm referring too:

[Col0ring]

Yep...the custom theme is not working because we are not using all the css variables provided by gradio, we have only implemented some basic support for modifying the primary color. If you want to use it in more complex cases, you need to inject custom CSS.

And for your sample code, you can fix it like this (just a partial example):

app.py

# your code
with open(os.path.join(os.path.dirname(__file__), './theme.css')) as f:
    theme_css = f.read()

with gr.Blocks(theme=my_theme, css=theme_css) as demo:

# your code

theme.css

.ms-markdown {
  color: inherit !important;
}

/* dark mode */
.dark .ms-markdown table tr {
  background-color: transparent !important;
}

.dark .ms-markdown table th,
.dark .ms-markdown table td {
  border-color: var(--body-text) !important;
}

.dark .ms-markdown pre {
  background-color: var(--code-background-fill) !important;
}

.dark .ms-markdown :not(pre) code {
  background-color: var(--code-background-fill) !important;
}

.dark .ms-markdown .ms-markdown-code .ms-markdown-code-header {
  background-color: transparent !important;
}

.dark .ms-markdown .ms-markdown-code > div:nth-child(2) {
  background-color: transparent !important;
}

.dark .ms-markdown .ant-collapse {
  border-color: transparent !important;
}

.dark .ms-markdown .ms-markdown-accordion .ant-collapse .ant-collapse-content {
  background-color: transparent !important;
}

/* other custom css code  */

[liwalayouni]

Thank you @Col0ring for the hint! Yes I had to adjust the theme.css to adopt the custom themes and it did the trick.