Add css variable for controlling chatbot user message border accent

[freddyaboulton]

Description

We got some feedback that the border color of user messages in the default theme is a bit hash.

Added chatbot_user_message_border_color_accent and chatbot_user_message_border_color_accent_dark variables to the theme class to control this. Defaults to border_color_accent so there shouldn't be any noticeable changes except for default theme.

Before

After

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

Tests & Changelog

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up your Gradio environment locally and run the tests: bash scripts/run_all_tests.sh

2. You may need to run the linters: bash scripts/format_backend.sh and bash scripts/format_frontend.sh

3. Unless the pull request is labeled with the "no-changelog-update" label by a maintainer of the repo, all pull requests must update the changelog located in CHANGELOG.md:

Please add a brief summary of the change to the Upcoming Release section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by [@myusername](link-to-your-github-profile) in [PR 11111](https://github.com/gradio-app/gradio/pull/11111)".

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
gradio	✅ Ready (Inspect)	Visit Preview	Jul 20, 2023 8:08pm

[gradio-pr-bot]

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-4989-all-demos

---

You can install the changes in this PR by running:

pip install https://gradio-builds.s3.amazonaws.com/f8e5bfa2d4b3950d2e51e25c040a08163303befd/gradio-3.37.0-py3-none-any.whl

[freddyaboulton]

Trying with a previously created theme

import gradio as gr
import random
import time

with gr.Blocks(theme="freddyaboulton/dracula_revamped") as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    clear = gr.ClearButton([msg, chatbot])

    def respond(message, chat_history):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
        chat_history.append((message, bot_message))
        time.sleep(2)
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])

if __name__ == "__main__":
    demo.launch()

[gradio-pr-bot]

🎉 Chromatic build completed!

There are 27 visual changes to review.
There are 0 failed tests to fix.

• Storybook Preview
• Build Review

[abidlabs]

Tested all of our built-in themes. Looks good @freddyaboulton!

[abidlabs]

cc @gary149

[freddyaboulton]

Thanks @abidlabs !!

[gary149]

Nice!