vivaldi theme temas tema personalizado para name google fondo ff0202 db5945 creator content como color chrome cambiar anime and javascript css google-chrome-extension google-chrome-devtools google-chrome-theme

javascript - theme - temas para google chrome anime



Google Chrome Personalizar herramientas de desarrollador tema/esquema de color (4)

¿Cómo cambiar el esquema de color en las herramientas de desarrollo, la consola de JavaScript en Google Chrome?

Me gusta esto:

  1. Instala un tema de DevTools como Zero Dark Matrix
  2. Vaya a chrome://flags/#enable-devtools-experiments , y habilite las Developer Tools experiments .
  3. Seleccione Relaunch Now en la parte inferior de la página.
  4. F12 para abrir las herramientas del desarrollador, vaya a Settings , seleccione Experiments pestaña Experiments y marque Allow custom UI themes .
  5. F12 , Reload DevTools.

Como se indica en esta respuesta de desbordamiento de pila: https://.com/a/21210882/933951 , el método oficial recomendado para personalizar las herramientas del desarrollador de Google Chrome es crear una extensión para anular los estilos predeterminados que se aplican, usando la chrome.devtools.panels.applyStyleSheet .

El proceso de crear una extensión de Chrome para este propósito puede ser un poco tedioso para personalizar cada componente desde cero, por lo que he creado un pequeño complemento que proporciona una colección de temas incorporados y configuraciones de editor adicionales para las Herramientas para desarrolladores de Chrome. Las extensiones también brindan a los desarrolladores la capacidad de crear temas personalizados adicionales utilizando un sistema de plantillas Sass simple sin escribir su propia extensión .

  1. Instale la extensión de DevTools Author Chrome desde Chrome Web Store
  2. Habilite los experimentos de las Herramientas del desarrollador en chrome: // flags / # enable-devtools-experimentos. Reinicia Chrome para que las banderas tengan efecto.
  3. Abrir DevTools (cmd + opt + I); Configuraciones> Experimentos> marca Permitir temas de UI personalizados.

Esto proporcionará, fuera de la caja, las siguientes características:

  • La posibilidad de elegir entre +25 temas de editor personalizados.
  • Soporte de fuentes personalizadas a través de fuentes de sistema habilitadas
  • Control incremental del tamaño de fuente, desde 10px - 22px

Si desea contribuir con temas adicionales, puede seguir los siguientes pasos:

Bifurque el repositorio de GitHub y luego siga los pasos a continuación. La extensión de Devtools Author para Chrome se ha creado utilizando NodeJS y GruntJS .

Instalación:

$ git clone [email protected]:micjamking/devtools-author.git $ cd devtools-author $ npm install

Desarrollo:

$ grunt serve

  1. Una vez que se esté ejecutando grunt, para instalar la extensión de desarrollo en Chrome, abra Configuración > Más herramientas> Extensiones y haga clic en el botón Cargar extensión desempaquetada ... (También habilite Allow incognito continuación si lo desea).
    • (Desactive DevTools Author si tiene la extensión instalada desde Chrome Web Store).
    • Asegúrate de que los experimentos de las Herramientas de desarrollador estén habilitados y de los temas de UI personalizados.
  2. Reinicie DevTools. Encuentro que la manera más rápida de ver que los cambios surtan efecto es desacoplar DevTools en una ventana separada y luego abrir una ventana de DevTools posterior ( cmd + opt + I mientras la ventana de DevTools actual está enfocada) después de que se hayan guardado los cambios y Grunt recargue los activos. Luego deberá volver a cargar (cerrar y volver a abrir) la ventana de DevTools posterior después de realizar los cambios.
Creando temas adicionales
  1. Haga una copia de una de las plantillas de app/styles/themes/templates/ y cambie el nombre del archivo a su nombre de tema sin el guión bajo , es decir. Si su tema se llama aloha , dentro de app/styles/themes/ , copie templates/_theme-template.scss y cambie su nombre por aloha.scss
  2. Agregue valores de color para la paleta según las variables del resaltador de sintaxis de código en su archivo scss.
    • Si desea una orientación más específica para su tema que la que se soporta de forma predeterminada, puede agregar esos estilos al final de su archivo de tema, después de los @include styles() .
  3. Agregue su objeto de paleta de colores (nombre y matriz de colores) a los themes.json en app/scripts/
  4. En DevTools, seleccione su paleta de temas en el panel Configuración de autor .
  5. Previsualiza y ajusta tus colores según sea necesario. Ver Desarrollo - Paso 2 .
  6. ¡Confíe y presione sus cambios en su repositorio, luego cree una solicitud de extracción para su nuevo tema una vez que esté listo!