Colores Personalizados

Clase 20 de 36 • Curso Básico de Ionic 2018

Clase anteriorSiguiente clase

Nathaly Stefani Riaño Bejarano

student•

Gabriel Pérez Moreno

student•

si este video esta dos veces, video 20 y 21 los mismos.

Diego Forero

Team Platzi•

Gracias, vamos a revisar y solucionarlo.

Diego Forero

Team Platzi•

Ya quedo solucionado, se había creado duplicada la clase por error.

Teofilo Rosales Gama

student•

home.html

<ion-header>
  <ion-navbar color="micolor">
    <ion-title class="titulo">
      GEOCACHING
    </ion-title>
  </ion-navbar>
</ion-header>
..
..
<ion-footer>
    <ion-card>
      <ion-card-content class="footer">
          <h2>Este es el footer</h2>
      </ion-card-content>
    </ion-card>
</ion-footer>

variables.scss

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  micolor :  #134325
);

acerca.html

<ion-header>

  <ion-navbar color="micolor">
    <ion-title class="titulo">
      Acerca
    </ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-card>
    <img src="../assets/imgs/pim14.png"/>
    <ion-card-content>
      <ion-card-title>
       Teofilo Rosales Gama
      </ion-card-title>
      <p>
        Soy un estudiante de Platzi aspirante
        a desarrollador front-end.
      </p>
    </ion-card-content>
  </ion-card>
</ion-content>

RAUL FRANCISCO NAVARRO SALVO

student•

pueden cambiar los colores desde theme /variables.scss y agregar un color de manera global. en el los propios componentes

$colors: (
  primary: #488aff,
  secondary: #32db64,
  danger: #f53d3d,
  light: #f4f4f4,
  dark: #222,
  micolor: #663399
);

Juan C Felizzola

student•

Link utilizado en clase:
https://ionicframework.com/docs/components/#buttons

IONIC Theming, para más información de este vídeo:
https://ionicframework.com/docs/theming/

Curso de SASS:
https://platzi.com/clases/sass/

Luis Rodolfo Lara Espinoza

student•

Santiago Yunda Rivera

student•

compañero. como lograste cambiar el color de la barra del tab?

Cristian Florez

student•

--background: color;

Para cambiar el fondo

Juan Guillermo Perez Cardozo

student•

oooo its awesome. :)

Carlos Uriel de Jesus Sánchez González

student•

A tomar el curso de sass y css

Ricardo Asin

student•

¿Alguien sabe donde puedo encontrar mas colores?
Me refiero a mas tipos de colores como hizo el profesor con “dark”.
Ese tipo de colores donde cambia toda la pantalla.

@import "ionic.theme. … ";
Espeficificamente en esa linea.

Teofilo Rosales Gama

student•

prueba aqui : https://ionicframework.com/docs/theming/theming-your-app/

Ricardo Antonio Aragon Solis

student•

hasta aquí lo dejo, al menos hasta que salga algún curso de ionic 4

Pedro Roberto Capriles Morales

student•

Juan Pablo Cruz Pérez

student•

Ya se que van a decir "pues bien por ti"... soy neófito en la materia... a mi me han dado los errores básicos solamente... "suerte de principiante"...

Fabian Figueroa

student•

Este video esta repetido…

Fabiola Dayana Acarapi Alvarez

student•

Diego Forero

Team Platzi•

Ya quedo solucionado, se había creado duplicada la clase por error.