a style to change the colors of your codepen.io
just open the extension and click on the gear icon to switch the colors you want
CodePen.io Colored by 4kkemi
Details
Author4kkemi
LicenseNo License
Categorycodepen.io
Created
Updated
Size15 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name CodePen.io Colored
@namespace github.com/openstyles/stylus
@version 1.0.0
@description A new userstyle
@author 4kkemi
@advanced color corPrincipal "Cor Principal" #FF0046
@advanced color corEscura "Cor Escura" #1A0007
@advanced color segundaEscura "Segunda Cor Escura" #4D0014
@advanced color corClara "Cor Clara" #FF96C3
@advanced color segundaClara "Segunda Cor Clara" #FF5591
@advanced color branco "Substituto do Branco" #fff
==/UserStyle== */
@-moz-document domain("codepen.io") {
:root {
--editor-top-bar-background: /*[[corEscura]]*/;
--tab-bg: /*[[segundaEscura]]*/;
--tab-border-color: /*[[corPrincipal]]*/;
--resizer-background: var(--editor-top-bar-background);
--resizer-border: /*[[corPrincipal]]*/;
--cp-pen-radius: 5px;
--cp-button-bg: /*[[segundaEscura]]*/;
--cp-button-color: /*[[branco]]*/;
--cp-button-hover-bg: /*[[segundaClara]]*/;
--cp-button-hover-color: var(--cp-button-color);
--cp-button-active: /*[[segundaEscura]]*/;
--cp-button-default-bg: /*[[segundaEscura]]*/;
--cp-button-default-color: var(--cp-button-color);
--cp-grid-item-bg: /*[[segundaEscura]]*/;
--cp-grid-item-color: var(--cp-button-color);
--cp-grid-item-screenshot-bg: /*[[segundaEscura]]*/;
--cp-grid-item-screenshot-color: /*[[segundaClara]]*/;
--cp-grid-item-author-color: /*[[segundaClara]]*/;
--cp-input-bg: /*[[segundaEscura]]*/;
--cp-input-color: /*[[branco]]*/;
--cp-input-placeholder: /*[[segundaClara]]*/;
--cp-input-focus-border: /*[[segundaClara]]*/;
--cp-input-focus-bg: /*[[segundaEscura]]*/;
--cp-select-bg: /*[[segundaEscura]]*/;
--cp-select-color: /*[[branco]]*/;
--cp-select-hover-bg: /*[[branco]]*/;
--cp-tag-bg: /*[[segundaEscura]]*/;
--cp-tag-color: /*[[corPrincipal]]*/;
--cp-tag-fill: /*[[segundaClara]]*/;
--cp-tag-hover-bg: /*[[segundaClara]]*/;
--cp-tag-hover-color: /*[[branco]]*/;
--cp-input-bg: /*[[branco]]*/;
--cp-input-color: /*[[corEscura]]*/;
--cp-input-placeholder: /*[[corPrincipal]]*/;
--cp-input-focus-border: /*[[segundaClara]]*/;
--cp-input-focus-bg: /*[[branco]]*/;
--cp-select-bg: /*[[branco]]*/;
--cp-select-color: /*[[corEscura]]*/;
--cp-select-hover-bg: /*[[branco]]*/;
--cp-select-hover-color: /*[[segundaEscura]]*/;
--cp-select-focus-border: /*[[corEscura]]*/;
--cp-control-bar-bg: /*[[segundaEscura]]*/;
--cp-control-bar-color: /*[[corPrincipal]]*/;
--cp-control-bar-input-bg: /*[[segundaEscura]]*/;
--cp-control-bar-input-color: /*[[branco]]*/;
--cp-control-bar-input-placeholder: /*[[segundaClara]]*/;
--cp-control-bar-input-focus-bg: /*[[segundaEscura]]*/;
--cp-control-bar-input-focus-color: /*[[branco]]*/;
--cp-control-bar-input-focus-border-color: /*[[segundaClara]]*/;
--cp-control-bar-button-bg: /*[[segundaEscura]]*/;
--cp-control-bar-button-hover-bg: /*[[segundaClara]]*/;
--cp-control-bar-button-color: /*[[branco]]*/;
--cp-asset-list-item-hover-bg: /*[[segundaEscura]]*/;
--cp-pen-border: /*[[segundaEscura]]*/;
--cp-pen-border-hover: /*[[segundaEscura]]*/;
--cp-pen-header-bg: /*[[corEscura]]*/;
--cp-pen-header-color: /*[[branco]]*/;
--cp-pen-header-color-secondary: /*[[segundaClara]]*/;
--cp-pen-header-button-bg: /*[[segundaEscura]]*/;
--cp-pen-header-button-icon: /*[[corPrincipal]]*/;
--cp-pen-header-button-color: /*[[segundaClara]]*/;
--cp-pen-header-button-hover-bg: /*[[segundaEscura]]*/;
--cp-pen-header-button-hover-color: /*[[branco]]*/;
--cp-pen-dropdown-bg: /*[[segundaEscura]]*/;
--cp-pen-dropdown-color: /*[[branco]]*/;
--cp-pen-dropdown-border: /*[[segundaEscura]]*/;
--cp-pen-dropdown-fill: /*[[segundaClara]]*/;
--cp-pen-omnibar-bg: /*[[corEscura]]*/;
--cp-pen-omnibar-border: /*[[segundaEscura]]*/;
--cp-pen-omnibar-color: /*[[branco]]*/;
--cp-pen-omnibar-color-secondary: /*[[branco]]*/;
--cp-pen-omnibar-icon: /*[[segundaEscura]]*/;
--cp-pen-omnibar-badge-bg: /*[[segundaClara]]*/;
--cp-pen-omnibar-badge-color: /*[[branco]]*/;
--cp-pen-omnibar-placeholder: transparent;
--cp-pen-omnibar-hover-bg: /*[[segundaEscura]]*/;
--cp-pen-omnibar-hover-border: /*[[segundaEscura]]*/;
--cp-pen-omnibar-hover-color: /*[[branco]]*/;
--cp-pen-omnibar-hover-icon: /*[[corPrincipal]]*/;
--cp-pen-omnibar-hover-placeholder: /*[[corPrincipal]]*/;
--cp-pen-omnibar-focus-bg: /*[[segundaEscura]]*/;
--cp-pen-omnibar-focus-border: /*[[segundaEscura]]*/;
--cp-pen-omnibar-focus-color: /*[[branco]]*/;
--cp-pen-omnibar-focus-icon: /*[[corPrincipal]]*/;
--cp-pen-omnibar-focus-placeholder: /*[[corPrincipal]]*/;
--cp-pen-omnibar-focus-highlight-bg: /*[[segundaEscura]]*/;
--cp-pen-omnibar-focus-highlight-color: /*[[branco]]*/;
--cp-pen-sidebar-bg: /*[[corEscura]]*/;
--cp-pen-sidebar-button-bg: transparent;
--cp-pen-sidebar-button-fill: /*[[segundaClara]]*/;
--cp-pen-sidebar-button-active-bg: transparent;
--cp-pen-sidebar-button-active-fill: /*[[branco]]*/;
--cp-pen-sidebar-button-hover-bg: /*[[segundaEscura]]*/;
--cp-pen-sidebar-button-hover-fill: /*[[branco]]*/;
--cp-pen-panel-bg: /*[[segundaEscura]]*/;
--cp-pen-panel-color: /*[[branco]]*/;
--cp-pen-panel-bg-secondary: /*[[segundaEscura]]*/;
--cp-pen-panel-color-secondary: /*[[segundaClara]]*/;
--cp-pen-panel-header-color: /*[[corEscura]]*/;
--cp-pen-panel-search-bg: /*[[segundaClara]]*/;
--cp-pen-panel-search-color: /*[[branco]]*/;
--cp-pen-panel-search-fill: /*[[segundaClara]]*/;
--cp-pen-panel-search-placeholder: /*[[branco]]*/;
--cp-pen-panel-search-focus-bg: /*[[branco]]*/;
--cp-pen-panel-search-focus-color: /*[[segundaClara]]*/;
--cp-pen-panel-search-focus-placeholder: /*[[segundaClara]]*/;
--cp-pen-panel-search-button-bg: /*[[segundaEscura]]*/;
--cp-pen-panel-search-button-color: /*[[branco]]*/;
--cp-pen-panel-search-button-hover-bg: /*[[corPrincipal]]*/;
--cp-pen-panel-box-bg: /*[[segundaEscura]]*/;
--cp-pen-panel-box-border: /*[[segundaEscura]]*/;
--cp-pen-panel-box-color: /*[[branco]]*/;
--cp-pen-panel-box-secondary-color: /*[[branco]]*/;
--cp-pen-panel-box-input-bg: /*[[branco]]*/;
--cp-pen-panel-box-input-color: /*[[segundaEscura]]*/;
--cp-pen-panel-box-input-focus-bg: /*[[segundaEscura]]*/;
--cp-pen-panel-box-input-focus-color: /*[[branco]]*/;
--cp-pen-panel-box-button-bg: /*[[segundaClara]]*/;
--cp-pen-panel-box-button-color: /*[[branco]]*/;
--cp-pen-panel-box-button-hover-bg: /*[[segundaEscura]]*/;
--cp-pen-panel-box-button-hover-color: /*[[corEscura]]*/;
--cp-pen-panel-box-button-secondary-bg: /*[[corPrincipal]]*/;
--cp-pen-panel-box-button-secondary-color: /*[[corEscura]]*/;
--cp-pen-panel-box-button-secondary-hover-bg: /*[[branco]]*/;
--cp-pen-panel-box-button-secondary-hover-color: /*[[corEscura]]*/;
--cp-pen-editor-header-bg: /*[[corEscura]]*/;
--cp-pen-editor-tab-bg: /*[[segundaEscura]]*/;
--cp-pen-editor-tab-color: /*[[branco]]*/;
--cp-pen-editor-tab-border: /*[[segundaEscura]]*/;
--cp-pen-editor-tab-changed-border: /*[[corClara]]*/;
--cp-pen-editor-tab-active-border: /*[[segundaClara]]*/;
--cp-pen-editor-button-bg: /*[[segundaEscura]]*/;
--cp-pen-editor-button-icon: /*[[segundaClara]]*/;
--cp-pen-editor-button-hover-bg: /*[[segundaClara]]*/;
--cp-pen-editor-button-hover-fill: /*[[corClara]]*/;
--cp-pen-editor-dropdown-bg: /*[[segundaClara]]*/;
--cp-pen-editor-content-bg: /*[[corEscura]]*/;
--cp-pen-files-active-file-bg: /*[[segundaEscura]]*/;
--cp-pen-preview-header-bg: /*[[corEscura]]*/;
--cp-pen-footer-bg: /*[[corEscura]]*/;
--cp-pen-footer-color: /*[[corPrincipal]]*/;
--cp-pen-footer-color-highlight: /*[[segundaClara]]*/;
--cp-pen-footer-button-bg: transparent;
--cp-pen-footer-button-color: /*[[segundaClara]]*/;
--cp-pen-footer-button-active-border: /*[[corPrincipal]]*/;
--cp-pen-footer-button-hover-bg: transparent;
--cp-pen-footer-button-hover-color: /*[[branco]]*/;
--cp-pen-modal-bg-hsl: 0deg 0% 0%;
--cp-pen-modal-bg: hsl(var(--cp-pen-modal-bg-hsl));
--cp-pen-modal-border-hsl: 228deg 11.6279069767% 16.862745098%;
--cp-pen-modal-border: hsl(var(--cp-pen-modal-border-hsl));
--cp-pen-modal-bg: /*[[corEscura]]*/;
--cp-pen-modal-color: /*[[branco]]*/;
--cp-pen-modal-content-border: /*[[segundaEscura]]*/;
--cp-pen-modal-footer-bg: /*[[corEscura]]*/;
--cp-pen-modal-alt-bg: /*[[segundaEscura]]*/;
--cp-pen-modal-nav-color: /*[[segundaClara]]*/;
--cp-pen-modal-nav-active-color: /*[[branco]]*/;
--cp-pen-modal-nav-active-bg: /*[[segundaEscura]]*/;
--cp-pen-modal-nav-active-border: /*[[corPrincipal]]*/;
--cp-pen-modal-button-bg: /*[[segundaEscura]]*/;
--cp-pen-modal-button-color: /*[[branco]]*/;
--cp-pen-modal-button-hover-bg: /*[[segundaClara]]*/;
--cp-pen-modal-button-hover-color: /*[[branco]]*/;
--cp-pen-console-bg: /*[[corEscura]]*/;
--cp-pen-console-input-bg: /*[[segundaEscura]]*/;
--cp-blocks-top-and-bottom: /*[[segundaClara]]*/;
--cp-blocks-left-and-right: /*[[corPrincipal]]*/;
background: /*[[corEscura]]*/;
color: /*[[corClara]]*/;
--cp-color-1-hsl: /*[[branco]]*/;
--cp-color-1: hsl(var(
--cp-color-1-hsl));
--cp-color-2-hsl: /*[[branco]]*/;
--cp-color-2: hsl(var(
--cp-color-2-hsl));
--cp-color-3-hsl: /*[[branco]]*/;
--cp-color-3: hsl(var(
--cp-color-3-hsl));
--cp-color-4-hsl: /*[[branco]]*/;
--cp-color-4: hsl(var(
--cp-color-4-hsl));
--cp-color-5-hsl: /*[[branco]]*/;
--cp-color-5: hsl(var(
--cp-color-5-hsl));
--cp-color-6-hsl: /*[[branco]]*/;
--cp-color-6: hsl(var(
--cp-color-6-hsl));
--cp-color-7-hsl: /*[[segundaClara]]*/;
--cp-color-7: hsl(var(
--cp-col...