Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Credit to https://css-tricks.com/css-switch-case-conditions/ for idea -->

<div class="container">
  <section class="scheme">
    <h1>Using Animation Keyframes for Color Schemes</h1>
    <h2>Light Scheme (Default)</h2>
    <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Praesent adipiscing, urna eget fermentum vulputate, sapien lorem laoreet nulla, sed laoreet nisl felis eget urna. Aliquam eu massa pretium, imperdiet ipsum et, ultricies velit. Pellentesque lorem justo, venenatis a massa eget, semper eleifend odio. Praesent eget consequat felis. In pulvinar a nisl ac viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer erat felis, blandit vitae nisi id, ultrices rhoncus diam. Maecenas ornare massa eu leo cursus, eu sagittis ipsum fringilla. Duis molestie eu diam eu varius.</p>
    <input type="text" placeholder="input">
    <hr>
    <blockquote>
      Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla.
    </blockquote>
  </section>
  <section class="scheme scheme--dark">
    <h2>Dark Scheme</h2>
    <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Praesent adipiscing, urna eget fermentum vulputate, sapien lorem laoreet nulla, sed laoreet nisl felis eget urna. Aliquam eu massa pretium, imperdiet ipsum et, ultricies velit. Pellentesque lorem justo, venenatis a massa eget, semper eleifend odio. Praesent eget consequat felis. In pulvinar a nisl ac viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer erat felis, blandit vitae nisi id, ultrices rhoncus diam. Maecenas ornare massa eu leo cursus, eu sagittis ipsum fringilla. Duis molestie eu diam eu varius.</p>
    <input type="text" placeholder="input">
    <hr>
    <blockquote>
      Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla.
    </blockquote>
  </section>
  <section class="scheme scheme--primary">
    <h2>Primary Scheme</h2>
    <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Praesent adipiscing, urna eget fermentum vulputate, sapien lorem laoreet nulla, sed laoreet nisl felis eget urna. Aliquam eu massa pretium, imperdiet ipsum et, ultricies velit. Pellentesque lorem justo, venenatis a massa eget, semper eleifend odio. Praesent eget consequat felis. In pulvinar a nisl ac viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer erat felis, blandit vitae nisi id, ultrices rhoncus diam. Maecenas ornare massa eu leo cursus, eu sagittis ipsum fringilla. Duis molestie eu diam eu varius.</p>
    <input type="text" placeholder="input">
    <hr>
    <blockquote>
      Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla.
    </blockquote>
  </section>
  <section class="scheme scheme--secondary">
    <h2>Secondary Scheme</h2>
    <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Praesent adipiscing, urna eget fermentum vulputate, sapien lorem laoreet nulla, sed laoreet nisl felis eget urna. Aliquam eu massa pretium, imperdiet ipsum et, ultricies velit. Pellentesque lorem justo, venenatis a massa eget, semper eleifend odio. Praesent eget consequat felis. In pulvinar a nisl ac viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer erat felis, blandit vitae nisi id, ultrices rhoncus diam. Maecenas ornare massa eu leo cursus, eu sagittis ipsum fringilla. Duis molestie eu diam eu varius.</p>
    <input type="text" placeholder="input">
    <hr>
    <blockquote>
      Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla.
    </blockquote>
  </section>
  <section class="scheme scheme--accent">
    <h2>Accent Scheme</h2>
    <p>Lorem ipsum dolor sit amet, consectetur <a href="#">adipiscing elit</a>. Praesent adipiscing, urna eget fermentum vulputate, sapien lorem laoreet nulla, sed laoreet nisl felis eget urna. Aliquam eu massa pretium, imperdiet ipsum et, ultricies velit. Pellentesque lorem justo, venenatis a massa eget, semper eleifend odio. Praesent eget consequat felis. In pulvinar a nisl ac viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer erat felis, blandit vitae nisi id, ultrices rhoncus diam. Maecenas ornare massa eu leo cursus, eu sagittis ipsum fringilla. Duis molestie eu diam eu varius.</p>
    <input type="text" placeholder="input">
    <hr>
    <blockquote>
      Phasellus sodales, erat vitae elementum pulvinar, diam est iaculis ipsum, eget egestas eros sem at dolor. Pellentesque ut magna hendrerit, dapibus urna vitae, eleifend nulla.
    </blockquote>
  </section>
  <section class="scheme scheme--dark">
    <h2>These can be <span class="text-accent">nested</span></h2>
    <section class="scheme scheme--secondary">
      <h2>Like <span class="text-accent">this</span></h2>
    </section>
    <section style="--scheme: var(--primary-scheme)">
      <h2>Or <span class="text-accent">this</span></h2>
    </section>
  </section>
  <section>
    <h2>Why do this?</h2>
    <p>As you make your color schemes more complicated – adding active states, additional properties (like "link-color" and "link-underline-color"), rules for nesting, etc. – the number of custom properties involved balloon up to dozens, maybe hundreds. Everytime you want to "set" a scheme, you have to define all of these custom properties.</p>
    <p>Using this new animation method I learned from css-tricks, you can set a color scheme on an element in just one line. You can even set a scheme inline using the style attribute, as I did in the previous example. This means smaller stylesheets, less dependency on preprocessors, and more applications for color schemes that would've previously been too cumbersome.</p>
    <p>While working on this, I realized this same technique could be used to create "typography sets" that changed the fonts, spacing, and sizing of h2/h2/h3/p tags all at once, and this could be used side by side with the color scheme helpers if you tweaked the CSS. I think that this points towards a need for reusable rulesets in native CSS. The ability to treat a group of custom properties as one logical property is integral to the patterns emerging in CSS.</p>
  </section>
</div>
              
            
!

CSS

              
                /**
 * Light color: #FAFAFA
 * Dark color: #333
 * Primary color: #4D5382
 * Secondary color: #CEE397
 * Accent color: #D8315B
 */

@keyframes schemes {
  0% {
    /* Light scheme */
    --background-color: #FAFAFA;
    --text-color: #333;
    --heading-color: #000;
    --accent-color: #D8315B;
    --input-color: rgba(0,0,0,0.1);
  }
  10% {
    /* Dark scheme */
    --background-color: #333;
    --text-color: #eee;
    --heading-color: #fff;
    --accent-color: #D8315B;
    --input-color: rgba(0,0,0,0.25);
  }
  20% {
    /* Primary scheme */
    --background-color: #F5E5FC;
    --text-color: #444;
    --heading-color: #000;
    --accent-color: #D8315B;
    --input-color: rgba(0,0,0,0.1);
  }
  30% {
    /* Secondary scheme */
    --background-color: #CEE397;
    --text-color: #444;
    --heading-color: #111;
    --accent-color: #a92d4c;
    --input-color: rgba(255,255,255,0.5);
  }
  40% {
    /* Accent scheme */
    --background-color: #D8315B;
    --text-color: #eaeaea;
    --heading-color: #fff;
    --accent-color: #000;
    --input-color: rgba(0,0,0,0.25);
  }
  /* room for 6 more */
}

/* Define aliases for schemes and set the default */

:root {
  --default-scheme: var(--light-scheme);
  --light-scheme: -0s;
  --dark-scheme: -1s;
  --primary-scheme: -2s;
  --secondary-scheme: -3s;
  --accent-scheme: -4s;
  --set-scheme: 10s schemes paused;
}

/* Use value of --scheme to set which frame of the (paused) "animation" to show */

:root,
.scheme,
[style*="--scheme:"] {
  /* Turns into 10s schemes paused var(--scheme, var(--default-scheme)) */
  /* Which becomes something like 10s schemes paused -1s, or the schemes animation 1s in and not playing */
  animation: var(--set-scheme) var(--scheme, var(--default-scheme));
  background: var(--background-color);
  color: var(--text-color);
}

/* Create helpers to set --scheme */

.scheme--reset {
  --scheme: initial;
}

.scheme--light {
  --scheme: var(--light-scheme);
}

.scheme--dark {
  --scheme: var(--dark-scheme);
}

.scheme--primary {
  --scheme: var(--primary-scheme);
}

.scheme--secondary {
  --scheme: var(--secondary-scheme);
}

.scheme--accent {
  --scheme: var(--accent-scheme);
}

/* Scheme-agnostic css! */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
}

a {
  color: var(--accent-color);
}

blockquote:before {
  content: open-quote;
  font-size: 2rem;
  color: var(--accent-color);
}

blockquote:after {
  content: no-close-quote;
}

hr {
  border-color: var(--accent-color);
}

input {
  width: 100%;
  background: var(--input-color);
  color: inherit;
  padding: 6px;
  border-color: currentColor;
  border-style: solid;
  border-width: 0 0 2px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

input::placeholder {
  color: currentColor;
  opacity: 0.5;
}

input:focus {
  border-color: var(--accent-color);
  outline: none;
}

.text-accent {
  color: var(--accent-color);
}

/* Structural things unrelated to schemes */

.container {
  max-width: 1200px;
  width: calc(100% - 48px);
  margin: auto;
}

section {
  padding: 24px;
}
              
            
!

JS

              
                
              
            
!
999px

Console