remix-nlux/packages/css/themes/src/dev/colors.css

Remix IDE NLUX integration. Remix IDE is the leading IDE for building and deploying smart contracts on Ethereum. NLUX is a JavaScript and React library for building conversational AI experiences.

/*
    🎨 CSS variables to control the colors of your theme.
*/
.nlux-AiChat-root.nlux-theme-dev {

    /** 👇 Welcome message */
    --nlux-WelcomeMessage-Avatar--BorderColor: darkgoldenrod;
    --nlux-WelcomeMessage-Avatar--BackgroundColor: lightgrey;

    /** 👇 Loader */
    --nlux-ChatRoom-Loader--Color: red;

    /** 👇 Exceptions box ( displayed when an error occurs ) */
    --nlux-Exceptions--BackgroundColor: tomato;
    --nlux-Exceptions--BorderColor: darkred;
    --nlux-Exceptions--TextColor: white;

    /** 👇 Conversation starters */
    --nlux-ConversationStarter--BackgroundColor: yellow;
    --nlux-ConversationStarter--BorderColor: red;
    --nlux-ConversationStarter--TextColor: darkgreen;

    /** 👇 Conversation content color */
    --nlux-ChatRoom--BackgroundColor: lavender;
    --nlux-ChatRoom--BorderColor: darkgoldenrod;
    --nlux-ChatRoom--TextColor: black;

    /** 👇 Participant info in chat */
    --nlux-ChatItem-ParticipantName--Color: darkblue;

    /* 👇 User message in chat */
    --nlux-HumanMessage--BackgroundColor: lemonchiffon;
    --nlux-HumanMessage--BorderColor: darkkhaki;
    --nlux-HumanMessage--TextColor: black;

    /** 👇 Assistant message in chat */
    --nlux-AiMessage--BackgroundColor: dimgrey;
    --nlux-AiMessage--BorderColor: black;
    --nlux-AiMessage--TextColor: white;

    /** 👇 Divider between composer and messages */
    --nlux-ChatRoom-Divider--Color: red;

    /** 👇 Prompt container */
    --nlux-composer-container--BackgroundColor: transparent;

    /** 👇 Prompt input colors */
    --nlux-PromptInput--BackgroundColor: honeydew;
    --nlux-PromptInput--BorderColor: mediumseagreen;
    --nlux-PromptInput--TextColor: black;

    --nlux-PromptInput-Active--BackgroundColor: white;
    --nlux-PromptInput-Active--BorderColor: limegreen;
    --nlux-PromptInput-Active--TextColor: black;

    --nlux-PromptInput-Disabled--BackgroundColor: lightgrey;
    --nlux-PromptInput-Disabled--TextColor: grey;
    --nlux-PromptInput-Disabled--BorderColor: darkgrey;

    --nlux-PromptInput-Placeholder--TextColor: darkseagreen;
    --nlux-PromptInput-Focus-Outline--Color: blue;

    /** 👇 Submit button colors */
    --nlux-SubmitButton--BackgroundColor: honeydew;
    --nlux-SubmitButton--BorderColor: mediumseagreen;
    --nlux-SubmitButton--TextColor: mediumseagreen;

    --nlux-SubmitButton-Active--BackgroundColor: white;
    --nlux-SubmitButton-Active--BorderColor: limegreen;
    --nlux-SubmitButton-Active--TextColor: limegreen;

    --nlux-SubmitButton-Disabled--BackgroundColor: lightgrey;
    --nlux-SubmitButton-Disabled--BorderColor: darkgrey;
    --nlux-SubmitButton-Disabled--TextColor: grey;

    --nlux-SubmitButton-Focus-Outline--Color: blue;

    /** 👇 Code block in parsed markdown */
    --nlux-CodeBlock--BackgroundColor: gold;
    --nlux-CodeBlock--BorderColor: deeppink;
    --nlux-CodeBlock--TextColor: black;
    --nlux-CodeBlock-Hover--BackgroundColor: lightgoldenrodyellow;

    /** 👇 Code block copy button */
    --nlux-CodeBlock-CopyButton--BackgroundColor: darkgoldenrod;
    --nlux-CodeBlock-CopyButton--BorderColor: darkred;
    --nlux-CodeBlock-CopyButton--TextColor: white;

    --nlux-CodeBlock-CopyButton-Clicked--BackgroundColor: greenyellow;
    --nlux-CodeBlock-CopyButton-Clicked--BorderColor: limegreen;
    --nlux-CodeBlock-CopyButton-Clicked--TextColor: black;

    /** 👇 Inline code in markdown */
    --nlux-InlineCode--BackgroundColor: chartreuse;
    --nlux-InlineCode--BorderColor: darkgreen;
    --nlux-InlineCode--TextColor: black;
}