Dark mode coloration of command bar

[andrewtavis]

Terms

• I have searched open and closed design issues
• I agree to follow Scribe-Android's Code of Conduct

Description

This issue corrects a few issues with the command UI for the keyboards in dark mode:

1. The Scribe key icon should be white instead of black as shown below

2. The X to cancel the command selection or a command should also be white instead of black as is shown below
3. The color of the command keys should match the Scribe key and both should be dark Scribe blue (now the command keys are a bit lighter as shown below)

4. The command bar should be the same color as the rather than white as shown below
   • The color should be 2E2E2E, the same color as the special keyboard keys in dark mode like delete, shift, etc

Contribution

Lots to do in this issue, and totally fine to do more than one PR for the various changes! 🎃 Happy to support as needed and review PRs as they come 😊

[indra057]

hello sir can u please assign me this issue so i can get started .. and if i need any help can i message here?

[andrewtavis]

Sure thing, @indra057! Please let us know if you need any assistance and we'll do our best to help 😊

[indra057]

sir i didnt find the code exactly where do i need to fix the issue can u please guide me..or give me some more hints...

[indra057]

@andrewtavis sir please reply

[andrewtavis]

Hi sorry, @indra057. A lot has come up recently between work and another program starting. @angrezichatterbox, would you be able to support here and direct @indra057 to where the change would need to happen for the command bar coloration?

[indra057]

sorry @andrewtavis sir i am new to android development and i can't support that much as i didn't even understand the codebase and what is exactly happening i am just looking for simple issues that i can fix

where should i change the commands exactly so that i can fix the issue of the coloration of the toolbar

[andrewtavis]

@angrezichatterbox will provide some guidance here today or tomorrow, @indra057 :) Again sorry that I can't look for you right now.

[angrezichatterbox]

@indra057, don’t worry if you’re new to Android development! I’ll give you a basic overview of how our codebase is structured, specifically regarding the keyboard functionality that you will be dealing with in this issue.

Currently, we’re focusing on three main files:

• Services Directory: This contains the core functionality of the keyboard. Here, you'll find the logic for various key actions, like what happens when the Enter key is pressed or how different keys respond to user interactions. This directory is organized by language, with each language having its own set of actions defined.
• MyKeyboard.kt (in the Helpers Directory): This file serves as a helper that supports the main keyboard functionalities. It acts as a bridge, connecting the service logic with the UI elements.
• MyKeyboardView.kt (in the Views Directory): This file is responsible for the keyboard's visual design. It defines how the keyboard appears to the user and handles the layout of UI elements.
  You’ll also find that we can modify some UI elements directly from the Services Directory. For example, when a specific action occurs on the keyboard, we might want to update the UI accordingly.

Now, regarding the specific issue you’re working on, I recommend exploring the switchToToolbar function within the individual language services. Currently, this function changes the color of the top divider; you could also try adjusting the command bar color. In the individual keyboard IME, you’ll find how the colors are set for the translate and other buttons.

If anything I’ve mentioned isn’t clear, please don’t hesitate to ask. I’m here to help!