Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Avatar colored background code example

Abierto
#306 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
angular, typescript

Línea de trabajo

Comienza con la aplicación de ejemplo y la plantilla de avatar mostrada en el issue; después, revisa la referencia enlazada sobre colores accesibles. El trabajo estará completo cuando la aplicación de ejemplo demuestre un fondo de avatar coloreado dinámicamente y una guía de ejemplos de código documente ese uso.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

enhancement theming-v2

Add this to sample app, and create a code example guide:

Avatar: If possible, add a random color for the avatar’s bg. You can find 16 accessible colors here.

Implementation idea: create a custom avatar that users the default avatar component but sets background color dynamically

<ng-template
  #avatarTemplate
  let-name="name"
  let-imageUrl="imageUrl"
  let-size="size"
  let-user="user"
  let-channel="channel"
>
  <stream-avatar
    style="--str-chat__avatar-background-color: customColor"
    [name]="name"
    [imageUrl]="imageUrl"
    [size]="size"
    [user]="user"
    [channel]="channel"
  ></stream-avatar>
</ng-template>
Lenguaje dominante
TypeScript
Estrellas
67
Forks
34
Métricas de merge de PR
Sin PR fusionados en 30 d

Preparar el entorno

Aún no hemos revisado los archivos de configuración de este proyecto. Empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de GetStream/stream-chat-angular

Todos los issues de GetStream/stream-chat-angular

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.