turns codepen site into red/night theme
codepen.io red by 4kkemi
Details
Author4kkemi
LicenseNo License
Categorycodepen.io
Created
Updated
Size14 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 2
@version 20230429.21.01
@namespace ?
==/UserStyle== */
@-moz-document domain("codepen.io") {
:root {
--editor-top-bar-background: #190000;
--tab-bg: #7D0000;
--tab-border-color: #FF0000;
--resizer-background: var(--editor-top-bar-background);
--resizer-border: #FF0000;
--cp-pen-radius: 5px;
--cp-button-bg: #7D0000;
--cp-button-color: white;
--cp-button-hover-bg: var(--cp-color-12);
--cp-button-hover-color: var(--cp-button-color);
--cp-button-hover-icon: var(--cp-button-icon);
--cp-button-active: var(--cp-color-13);
--cp-button-default-bg: var(--cp-button-bg);
--cp-button-default-color: var(--cp-button-color);
--cp-grid-item-bg: var(--cp-color-16);
--cp-grid-item-color: var(--cp-color-1);
--cp-grid-item-screenshot-bg: var(--cp-color-13);
--cp-grid-item-screenshot-color: var(--cp-color-11);
--cp-grid-item-author-color: var(--cp-color-7);
--cp-input-bg: var(--cp-color-14);
--cp-input-color: var(--cp-color-3);
--cp-input-placeholder: var(--cp-color-8);
--cp-input-focus-border: var(--cp-color-12);
--cp-input-focus-bg: var(--cp-color-13);
--cp-select-bg: var(--cp-color-14);
--cp-select-color: var(--cp-color-5);
--cp-select-hover-bg: var(--cp-color-5);
--cp-tag-bg: var(--cp-color-13);
--cp-tag-color: var(--cp-color-blue-light);
--cp-tag-fill: var(--cp-color-7);
--cp-tag-hover-bg: var(--cp-color-11);
--cp-tag-hover-color: var(--cp-color-1);
--cp-input-bg: var(--cp-color-4);
--cp-input-color: var(--cp-color-17);
--cp-input-placeholder: var(--cp-color-10);
--cp-input-focus-border: var(--cp-color-11);
--cp-input-focus-bg: var(--cp-color-1);
--cp-select-bg: var(--cp-color-4);
--cp-select-color: var(--cp-color-18);
--cp-select-hover-bg: var(--cp-color-1);
--cp-select-hover-color: var(--cp-color-16);
--cp-select-focus-border: var(--cp-color-18);
--cp-control-bar-bg: var(--cp-color-16);
--cp-control-bar-color: var(--cp-color-10);
--cp-control-bar-input-bg: var(--cp-color-14);
--cp-control-bar-input-color: var(--cp-color-3);
--cp-control-bar-input-placeholder: var(--cp-color-8);
--cp-control-bar-input-focus-bg: var(--cp-color-13);
--cp-control-bar-input-focus-color: var(--cp-color-1);
--cp-control-bar-input-focus-border-color: var(--cp-color-12);
--cp-control-bar-button-bg: var(--cp-color-13);
--cp-control-bar-button-hover-bg: var(--cp-color-11);
--cp-control-bar-button-color: var(--cp-color-1);
--cp-asset-list-item-hover-bg: var(--cp-color-14);
--cp-pen-border: var(--cp-color-15);
--cp-pen-border-hover: var(--cp-color-13);
--cp-pen-header-bg: var(--cp-color-20);
--cp-pen-header-color: var(--cp-color-1);
--cp-pen-header-color-secondary: var(--cp-color-8);
--cp-pen-header-button-bg: var(--cp-color-15);
--cp-pen-header-button-icon: var(--cp-color-10);
--cp-pen-header-button-color: var(--cp-color-8);
--cp-pen-header-button-hover-bg: var(--cp-color-13);
--cp-pen-header-button-hover-color: var(--cp-color-3);
--cp-pen-dropdown-bg: var(--cp-color-16);
--cp-pen-dropdown-color: var(--cp-color-1);
--cp-pen-dropdown-border: var(--cp-color-14);
--cp-pen-dropdown-fill: var(--cp-color-11);
--cp-pen-omnibar-bg: var(--cp-color-17);
--cp-pen-omnibar-border: var(--cp-color-14);
--cp-pen-omnibar-color: var(--cp-color-6);
--cp-pen-omnibar-color-secondary: var(--cp-color-5);
--cp-pen-omnibar-icon: var(--cp-color-13);
--cp-pen-omnibar-badge-bg: var(--cp-color-12);
--cp-pen-omnibar-badge-color: var(--cp-color-1);
--cp-pen-omnibar-placeholder: transparent;
--cp-pen-omnibar-hover-bg: var(--cp-color-15);
--cp-pen-omnibar-hover-border: var(--cp-color-15);
--cp-pen-omnibar-hover-color: var(--cp-color-4);
--cp-pen-omnibar-hover-icon: var(--cp-color-10);
--cp-pen-omnibar-hover-placeholder: var(--cp-color-10);
--cp-pen-omnibar-focus-bg: var(--cp-color-14);
--cp-pen-omnibar-focus-border: var(--cp-color-14);
--cp-pen-omnibar-focus-color: var(--cp-color-1);
--cp-pen-omnibar-focus-icon: var(--cp-color-10);
--cp-pen-omnibar-focus-placeholder: var(--cp-color-10);
--cp-pen-omnibar-focus-highlight-bg: var(--cp-color-13);
--cp-pen-omnibar-focus-highlight-color: var(--cp-color-2);
--cp-pen-sidebar-bg: var(--cp-color-20);
--cp-pen-sidebar-button-bg: transparent;
--cp-pen-sidebar-button-fill: var(--cp-color-11);
--cp-pen-sidebar-button-active-bg: transparent;
--cp-pen-sidebar-button-active-fill: var(--cp-color-1);
--cp-pen-sidebar-button-hover-bg: var(--cp-color-16);
--cp-pen-sidebar-button-hover-fill: var(--cp-color-1);
--cp-pen-panel-bg: var(--cp-color-16);
--cp-pen-panel-color: var(--cp-color-1);
--cp-pen-panel-bg-secondary: var(--cp-color-13);
--cp-pen-panel-color-secondary: var(--cp-color-7);
--cp-pen-panel-header-color: var(--cp-color-20);
--cp-pen-panel-search-bg: var(--cp-color-17);
--cp-pen-panel-search-color: var(--cp-color-4);
--cp-pen-panel-search-fill: var(--cp-color-11);
--cp-pen-panel-search-placeholder: var(--cp-color-6);
--cp-pen-panel-search-focus-bg: var(--cp-color-1);
--cp-pen-panel-search-focus-color: var(--cp-color-17);
--cp-pen-panel-search-focus-placeholder: var(--cp-color-20);
--cp-pen-panel-search-button-bg: var(--cp-color-13);
--cp-pen-panel-search-button-color: var(--cp-color-1);
--cp-pen-panel-search-button-hover-bg: var(--cp-color-10);
--cp-pen-panel-box-bg: var(--cp-color-14);
--cp-pen-panel-box-border: var(--cp-color-16);
--cp-pen-panel-box-color: var(--cp-color-1);
--cp-pen-panel-box-secondary-color: var(--cp-color-6);
--cp-pen-panel-box-input-bg: var(--cp-color-5);
--cp-pen-panel-box-input-color: var(--cp-color-14);
--cp-pen-panel-box-input-focus-bg: var(--cp-color-16);
--cp-pen-panel-box-input-focus-color: var(--cp-color-4);
--cp-pen-panel-box-button-bg: var(--cp-color-12);
--cp-pen-panel-box-button-color: var(--cp-color-1);
--cp-pen-panel-box-button-hover-bg: var(--cp-color-15);
--cp-pen-panel-box-button-hover-color: var(--cp-color-20);
--cp-pen-panel-box-button-secondary-bg: var(--cp-color-green);
--cp-pen-panel-box-button-secondary-color: var(--cp-color-20);
--cp-pen-panel-box-button-secondary-hover-bg: var(--cp-color-green-light);
--cp-pen-panel-box-button-secondary-hover-color: var(--cp-color-20);
--cp-pen-editor-header-bg: var(--cp-color-18);
--cp-pen-editor-tab-bg: var(--cp-color-16);
--cp-pen-editor-tab-color: var(--cp-color-5);
--cp-pen-editor-tab-border: var(--cp-color-14);
--cp-pen-editor-tab-changed-border: var(--cp-color-yellow);
--cp-pen-editor-tab-active-border: var(--cp-color-8);
--cp-pen-editor-button-bg: var(--cp-color-14);
--cp-pen-editor-button-icon: var(--cp-color-11);
--cp-pen-editor-button-hover-bg: var(--cp-color-12);
--cp-pen-editor-button-hover-fill: var(--cp-color-9);
--cp-pen-editor-dropdown-bg: var(--cp-color-12);
--cp-pen-editor-content-bg: var(--cp-color-17);
--cp-pen-files-active-file-bg: var(--cp-color-15);
--cp-pen-preview-header-bg: var(--cp-color-18);
--cp-pen-footer-bg: var(--cp-color-18);
--cp-pen-footer-color: var(--cp-color-10);
--cp-pen-footer-color-highlight: var(--cp-color-8);
--cp-pen-footer-button-bg: transparent;
--cp-pen-footer-button-color: var(--cp-color-8);
--cp-pen-footer-button-active-border: var(--cp-color-green);
--cp-pen-footer-button-hover-bg: transparent;
--cp-pen-footer-button-hover-color: var(--cp-color-1);
--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: var(--cp-color-17);
--cp-pen-modal-color: var(--cp-color-1);
--cp-pen-modal-content-border: var(--cp-color-15);
--cp-pen-modal-footer-bg: var(--cp-color-18);
--cp-pen-modal-alt-bg: var(--cp-color-16);
--cp-pen-modal-nav-color: var(--cp-color-8);
--cp-pen-modal-nav-active-color: var(--cp-color-1);
--cp-pen-modal-nav-active-bg: var(--cp-color-14);
--cp-pen-modal-nav-active-border: var(--cp-color-green);
--cp-pen-modal-button-bg: var(--cp-color-14);
--cp-pen-modal-button-color: var(--cp-color-4);
--cp-pen-modal-button-hover-bg: var(--cp-color-12);
--cp-pen-modal-button-hover-color: var(--cp-color-1);
--cp-pen-console-bg: var(--cp-color-17);
--cp-pen-console-input-bg: var(--cp-color-15);
--cp-blocks-top-and-bottom: var(--cp-color-7);
--cp-blocks-left-and-right: var(--cp-color-10);
background: var(--cp-color-20);
color: var(--cp-color-1);
--cp-color-1-hsl: 0deg 0% 100%;
--cp-color-1: hsl(var(
--cp-color-1-hsl));
--cp-color-2-hsl: 240deg 7.6923076923% 94.9019607843%;
--cp-color-2: hsl(var(
--cp-color-2-hsl));
--cp-color-3-hsl: 225deg 10.5263157895% 92.5490196078%;
--cp-color-3: hsl(var(
--cp-color-3-hsl));
--cp-color-4-hsl: 228deg 9.8039215686% 90%;
--cp-color-4: hsl(var(
--cp-color-4-hsl));
--cp-color-5-hsl: 226.6666666667deg 12% 85.2941176471%;
--cp-color-5: hsl(var(
--cp-color-5-hsl));
--cp-color-6-hsl: 230deg 12% 80.3921568627%;
--cp-color-6: hsl(var(
--cp-color-6-hsl));
--cp-color-7-hsl: 0,100%,74.5%;
--cp-color-7: hsl(var(
--cp-color-7-hsl));
--cp-color-8-hsl: 0,100%,74.5%;
--cp-color-8: hsl(var(
--cp-color-8-hsl));
--cp-color-9-hsl: 233.3333333333deg 9.8901098901% 64.3137254902%;
--cp-color-9: hsl(var(
--cp-color-9-hsl));
--cp-color-10-hsl: 0,100%,50%;
--cp-color-10: hsl(var(
--cp-color-10-hsl));
--cp-color-11-hsl: 0,100%,74.5%;
--cp-color-11: hsl(var(
--cp-color-11-hsl));
--cp-color-12...