Menü
Reference for project color tokens to avoid hardcoded hex values and keep themes consistent.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | Color Tokens |
| description | Reference for project color tokens to avoid hardcoded hex values and keep themes consistent. |
| last_verified | "2026-01-23T00:00:00.000Z" |
| applicable_sdk | Android 8+ (API 26+) |
Last Verified: 2026-01-23 Applicable SDK: Android 8+ (API 26+) Implementation Files:
app/src/main/res/values/colors.xml - Color definitionsapp/src/main/res/values/themes.xml - Theme attributesThis skill provides a comprehensive list of color tokens used in the project, following the snake_case naming convention. Use these tokens instead of hardcoded hex values to maintain UI consistency and support theme switching.
Related Skills:
app_background_dark, shadow_light)_dark, _light, _on, _off, _pressed, _selected are used to indicate state or theme.black: #FF000000white: #FFFFFFFFapp_background_dark: Main app backgroundcard_background_dark: Background for clock cardscard_text_dark: Text color on clock cardssettings_background_dark: Background for settings menusettings_text_primary_dark: Main text in settingssettings_text_secondary_dark: Secondary/hint text in settingssettings_section_dark: Section headers in settingssettings_icon_dark: Icons in settingscard_background_light: Background for clock cardscard_text_light: Text color on clock cardssettings_background_light: Background for settings menusettings_text_primary_light: Main text in settingssettings_text_secondary_light: Secondary/hint text in settingssettings_section_light: Section headers in settingssettings_icon_light: Icons in settingsshadow_light: Generic light shadowcard_shadow_fill_dark: Shadow fill for dark mode cardscard_shadow_fill_light: Shadow fill for light mode cardsknob_shadow_light: Shadow for knob in light modeknob_shadow_dark: Shadow for knob in dark modeglass_cover_inner_shadow: Generic inner shadow for glass coversglass_cover_inner_shadow_light: Inner shadow for light mode glass coversglass_cover_inner_shadow_dark: Inner shadow for dark mode glass coversfrosted_pill_inner_shadow_light: Inner shadow for frosted pill in light modebutton_background_interactive_dark: Hover/pressed state background for dark buttonsripple_color_white: White ripple effect (for dark backgrounds)ripple_color_black: Black ripple effect (for light backgrounds)button_background_settings_dark: Background for settings button (dark)button_background_settings_light: Background for settings button (light)button_group_pill_background_dark: Persistent pill container background (dark)button_group_pill_background_light: Persistent pill container background (light)button_group_pill_background: Themed pill container backgroundfrosted_pill_bg_light: Background for frosted pill in light modefrosted_pill_border_light: Border for frosted pill in light modepressed_overlay_color: Overlay for pressed statesknob_pressed_overlay: Overlay for pressed knobcontrol_default_dark: Default state for radio/controls (dark)control_default_light: Default state for radio/controls (light)control_selected_dark: Selected state for radio/controls (dark)control_selected_light: Selected state for radio/controls (light)control_pressed_dark: Pressed state for radio/controls (dark)control_pressed_light: Pressed state for radio/controls (light)toggle_bg_on: Toggle background when ONtoggle_bg_off: Toggle background when OFFtoggle_stroke_on: Toggle border when ONtoggle_stroke_off: Toggle border when OFFtoggle_glow_on: Glow effect when toggle is ONtoggle_glow_off: No glow when toggle is OFFtoggle_icon_on: Icon color when toggle is ONtoggle_icon_on_pressed: Icon color when toggle is ON and pressedtoggle_icon_off: Icon color when toggle is OFFstate_toggle_off: Base color for toggle in OFF statestate_toggle_on: Base color for toggle in ON stateaction_red: Standard red for actions (e.g., reset, delete)on_action_red: Text/icon color on top of action redaction_red_transparent: Transparent version of action redtext_tertiary_red: Tertiary text in redglow_on: Neon/active glow colorglow_off_dark: Inactive glow color (dark)glow_off_light: Inactive glow color (light)light_button_glow_inner: Inner glow for light buttonlight_button_glow_outer: Outer glow for light buttonglass_cover_halo: Halo effect for active glass coverglass_cover_bezel_lit: Lit state for glass cover bezelrim_light_color: Rim light effectknob_background: Main knob colorknob_tick_unselected: Tick color when not selectedknob_tick_selected: Tick color when selectedknob_indicator: Main indicator colorcolor_knob_base_light: Base color for knob in light modecolor_knob_base_dark: Base color for knob in dark modeknob_tick_normal: Standard tick colorknob_tick_light: Light tick colorknob_tick_active: Active tick colorknob_tick_active_light: Active tick color (light)knob_tick_highlight: Highlight on tickknob_indicator_normal: Normal indicator stateknob_indicator_active: Active indicator stateknob_bevel_light: Bevel highlightknob_bevel_shadow: Bevel shadowknob_border_dark: Knob border (dark)knob_glow_light: Knob glow (light)knob_glow_dark: Knob glow (dark)knob_indicator_shadow: Shadow under knob indicatorknob_indicator_red_bright: Bright red for indicatorknob_indicator_red_deep: Deep red for indicatorknob_indicator_green_bright: Bright green for indicatorknob_indicator_green_deep: Deep green for indicatorknob_indicator_highlight: Highlight on indicatorglass_cover_lens_off_light: Lens color when OFF (light)glass_cover_lens_off_dark: Lens color when OFF (dark)glass_cover_lens_on_edge: Lens edge color when ONglass_cover_bezel_off_light: Bezel color when OFF (light)glass_cover_bezel_off_dark: Bezel color when OFF (dark)glass_cover_bezel_on_light: Bezel color when ON (light)glass_cover_bezel_on_dark: Bezel color when ON (dark)glass_cover_spill_white: Light spill effectglass_cover_core_center: Center of the lit coreglass_cover_core_edge: Edge of the lit coretimer_track_light: Track color in light modetimer_track_dark: Track color in dark modetimer_progress_light: Progress colorcountdown_text_color: Text color for countdownoverlay_text_color: Text color for overlaystext_tertiary_dark: Tertiary text in dark themewidget_text_color: Primary widget textwidget_white_text: Text for white widget variantwidget_glass_text_color: Text for glass widget variantwidget_text_secondary: Secondary widget textshortcut_background_dark: Dark background for shortcutsshortcut_background_light: Light background for shortcutsshortcut_background_settings: Settings background for shortcutswidget_background_dark_gray: Dark gray widget backgroundwidget_white_divider: Divider for white widgetAlways reference these colors using @color/token_name:
<View
android:background="@color/app_background_dark"
android:textColor="@color/card_text_dark" />
Access via ContextCompat.getColor(context, R.color.token_name):
val backgroundColor = ContextCompat.getColor(context, R.color.app_background_dark)
Guidance for creating effective modular skills for Claude. Use when creating or refining skills to ensure they are concise, follow progressive disclosure patterns, and provide appropriate degrees of freedom.
Guidelines for ensuring smooth and race-condition-free theme transitions in Android, specifically regarding icon tinting and state management.
Best practices for effective human-AI pair programming and communication
Clarify touch-target vs visual size when users ask to resize buttons without changing icons.
Choose whether the outer container acts as the touch proxy or remains a layout placeholder to control hit targets.
Best practices for 60fps custom View rendering with zero allocation in onDraw