¿Cómo cambiar el color primario de arranque?

¿Es posible cambiar el color primario de arranque para que coincida con el color de la marca? Estoy usando el tema de papel de bootswatch en mi caso.

hay dos formas en que puedes ir a

http://getbootstrap.com/customize/ 

y cambie el color en estos ajustes y descargue el progtwig de arranque personalizado.

O puede usar sass con esta versión https://github.com/twbs/bootstrap-sass e importar en sus activos de sass / stylesheets / _bootstrap.scss, pero antes de importar esto puede cambiar los colores variables predeterminados

 //== Colors // //## Gray and brand colors for use across Bootstrap. $gray-base: #000 !default; $gray-darker: lighten($gray-base, 13.5%) !default; // #222 $gray-dark: lighten($gray-base, 20%) !default; // #333 $gray: lighten($gray-base, 33.5%) !default; // #555 $gray-light: lighten($gray-base, 46.7%) !default; // #777 $gray-lighter: lighten($gray-base, 93.5%) !default; // #eee $brand-primary: darken(#428bca, 6.5%) !default; // #337ab7 $brand-success: #5cb85c !default; $brand-info: #5bc0de !default; $brand-warning: #f0ad4e !default; $brand-danger: #d9534f !default; //== Scaffolding // //## Settings for some of the most global styles. //** Background color for ``. $body-bg: #fff !default; //** Global text color on ``. $text-color: $gray-dark !default; //** Global textual link color. $link-color: $brand-primary !default; //** Link hover color set via `darken()` function. $link-hover-color: darken($link-color, 15%) !default; //** Link hover decoration. $link-hover-decoration: underline !default; 

y comstackr el resultado

Actualización 2018 para Bootstrap 4

Para cambiar el color principal o alguno de los colores del tema en Bootstrap 4 SASS, establezca las variables apropiadas antes de importar bootstrap.scss . Esto le permite a su scss personalizado anular los valores predeterminados …

 $primary: purple; $danger: red; @import "bootstrap"; 

Demostración: https://www.codeply.com/go/f5OmhIdre3


En algunos casos, es posible que desee establecer un nuevo color a partir de otra variable Bootstrap existente . Para esto, importe las funciones y variables primero para que puedan ser referenciadas en las personalizaciones …

 /* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables"; $theme-colors: ( primary: $purple ); /* finally, import Bootstrap */ @import "bootstrap"; 

Demostración: https://www.codeply.com/go/lobGxGgfZE


También vea esta respuesta , o esta respuesta para cambiar el color del botón en (CSS o SASS)


También es posible cambiar el color primario con CSS solamente, pero requiere una gran cantidad de CSS adicional, ya que hay muchas variaciones primarias (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary , etc …) y algunas de estas clases tienen ligeras variaciones de colores en bordes, vuelo estacionario y estados activos. Por lo tanto, si debe usar CSS, es mejor usar el componente de destino uno, como cambiar el color del botón principal .

Cualquier elemento con la etiqueta ‘primay’ tiene el color @ brand-primary. Una de las opciones para cambiarlo es agregar un archivo css personalizado como se muestra a continuación:

 .my-primary{ color: lightYellow ; background-color: red; } .my-primary:focus, .my-primary:hover{ color: yellow ; background-color: darkRed; } a.navbar-brand { color: lightYellow ; } .navbar-brand:hover{ color: yellow; } 
  

Using the default primary


Using customized color

Usando SaSS
cambiar el color de la marca

 $brand-primary:#some-color; 

esto cambiará el color primario a través de toda la IU.

Usando css-
supongamos que quiere cambiar el color primario del botón. Así que

 btn.primary{ background:#some-color; } 

busque el elemento y agregue una nueva regla css / sass en un nuevo archivo y adjúntelo después de cargar el bootstrap css.

  • No puede cambiar el color en el archivo cdn.
  • Descargue el archivo de arranque.
  • Buscar el archivo bootstrap.css.
  • abra este archivo (bootstrsap.css) y busque ‘primario’.
  • cámbielo al color que desee.

Esta es una solución muy fácil.

 

Renew your Membership

reemplace la clase bg-dark, con bg-custom .

En CSS

 .bg-custom { background-color: red; } 

Desde Bootstrap 4 puede cambiar fácilmente el color primario de su Bootstrap descargando un archivo CSS simple en BootstrapColor.net . No necesita saber SASS y el archivo CSS está listo para su sitio web. Puede elegir el color que desee, como azul, índigo, violeta, rosa, rojo, naranja, amarillo, verde, verde azulado o cian.

Sí, sugiero abrir el archivo .css, inspeccionar la página y encontrar el código de color que desea cambiar y Buscar todo y reemplazar (según su editor de texto) con el color que desee. Haz eso con todos los colores que quieras cambiar