The Breakroom

More Captain Marvel Goodies

March 15, 2019

By Ged Maheux

In October, 2013 the Iconfactory released its last macOS desktop icon collection. For more than a decade prior, we had built our brand on crafting, among other things, amazing and fun Mac icons that people could use to customize their folders and hard drives. We eventually stopped creating desktop icon sets as the world turned its attention to the iPhone and away from the Mac but today we’re pleased to report we’re back with an all-new icon set created exclusively for Patreon subscribers!

Captain Marvel Icons by the Iconfactory

Inspired by the blockbuster film from Marvel Studios, our new Captain Marvel icon collection contains hard drives, folders and objects that are a great way to re-live some of the most fun moments from the movie. We’ve included objects like the retro “Fonz” lunchbox and Director Fury’s interstellar pager as well as fan-favorites like Goose’s name tag and even a cheeky Blockbuster video rental membership card.

But that’s not all.

Since Captain Marvel takes place in 1995, we thought we’d add an extra bit of retro fun to include System 7 versions of every icon in the collection. :-)

Captain Marvel System 7 Icons by The Iconfactory

Designed with love using the same 16 color palette that was in wide use on the Mac desktop at the time, these pixel-perfect icons are a nostalgic treat that are sure to bring a smile to the face of any long-time Mac addict. The best part is these 4-bit wonders may look ancient but they still work in modern macOS Mojave. We can’t wait for you to try them out!

Captain Marvel Bonus Wallpaper shown on iPhone

Finally, since the reception to our first Captain Marvel wallpaper was so positive, we’ve gone and cooked up a bonus wallpaper that we’re making free for everyone to enjoy. Head on over to our Patreon page to download it for your iPhone, iPad or desktop – even if you’re not a subscriber.

The Captain Marvel icon set is available today to Iconfactory Patreon backers at the $12 Hero level. Be sure to check out our other Patreon tiers to find one that’s right for you – and while you’re there, don’t forget to grab today’s free wallpaper release. We hope you enjoy this journey in the Wayback Machine, but stay tuned, we have lots more great goodies in store in the future!

Exclusive Captain Marvel Wallpaper

March 12, 2019

By Ged Maheux

Captain Marvel Wallpaper by the Iconfactory

Marvel Studio’s blockbuster film about Airforce pilot, Carol Danvers, turned super hero, Captain Marvel, has burst onto the scene and broken box office records around the globe. It’s a soaring adventure and a noteworthy addition to the Marvel Cinematic Universe that inspired us to craft something very special for our Patreon supporters.

This stunning wallpaper by artist Anthony Piraino, is the perfect way for fans of the film to show off their love for Marvel’s most powerful new super hero. Optimized for use on iPad, iPhone and macOS, this exclusive download is available to backers of the Iconfactory Patreon at the Hero level which includes wallpapers, avatars and even macOS desktop icons each and every month. Backers also chat with us on Discord, get special offers, discounts on Iconfactory products and services, and custom-made goodies just for you.

Become a Patron and and download Captain Marvel today!

Digital goodies just for you!

March 5, 2019

By Cheryl Cicha

Dragons Teeth WallpaperFor over 20 years The Iconfactory has been drawing icons, designing user interfaces, and building great software. We also used to create loads of free wallpapers and desktop icons just for fun, but we got busy and that tradition got lost. Before we knew it, years had gone by without any new freeware.

Let’s Do This Together
You’ve been telling us that you miss our fun releases – and we did too! Rather than sit around and reminisce, we decided it was time to do something about it. Introducing Iconfactory Patreon! Now, every month you can get social media icons, behind the scenes sneak peeks and previews, amazing wallpapers, and macOS icons for your desktop. Chat with us on Discord, get special offers, discounts on Iconfactory products and services, and custom-made goodies just for you. The fun is back! Become a Patron and come play with us!

Sketching With Linea Through Thick and Thin

February 26, 2019

By Ged Maheux

Linea instagram illustration mosaic

Today’s update of Linea for both the iPad and iPhone brings cool new features that offer increased flexibility when sketching and additional templates for musicians and designers. Combined with greater power and more options when importing and exporting, today’s update unleashes your creativity and helps make sketching in Linea even easier.

Different Strokes for Different Folks

We’ve added more flexibility when sketching with the Pen and Marker tools: you can now use variable stroke widths. Previously, the Pen drew lines with a fixed width and the Marker always varied its width based on pressure. With today’s release, we’re adding a simple control to both that lets you pick the type of stroke you want for each tool: fixed or variable.

Fixed width lines are great for lettering, cartoon outlining, and graphing. Variable pen widths create a more organic feel and are perfect for inking comics, illustrations, and more.

Lines and Trebles and Wearables, Oh My!

Grids and Templates are one of Linea’s most popular features. With good reason: they offer an easy way to help you sketch everything, whether it’s blueprints, interfaces, storyboards, to-do lists, or even Dungeons & Dragons mazes. Our customers love sending us suggestions for new templates, like the ones in today’s release.

Linea showing a circular grid template and an example mandala illustration

Circular grids, sheet music staves, and Apple Watch templates help you be more productive when using Linea. Whether you’re drawing mandalas, writing your next hit, or working on a wearable app, these portrait and landscape layouts will boost your creativity!

Linea showing a sheet music template with notes sketched in the staves

We’ve also added new options for existing grids like reticles (crosses) and large dot grids. To help manage this ever growing collection, sections now include group headers to help you find what you need.

Crop & Go

Crop and Export is now easier to use with presets for popular aspect ratios like 4:3, 16:9, and square. Additionally, the format, size, and position is now saved, making multiple exports of the same content simpler. We’ve also added a long-requested feature — support for PDFs. Save out your sketch in this flexible file format and send it to iOS’s Files app, email, or iMessage easily.

Linea showing the new aspect ratio options for cropping sketches

Other improvements in today’s release include the ability to merge selections into a specific layer, consistent selection undos, better placement of images dropped into Linea, new keyboard shortcuts, and a host of bug fixes.

One More Thing

We recently marked the two year anniversary of Linea on iPad. To celebrate, we’ve put the iPhone version on sale for a limited time. Linea Go is perfect for jotting down ideas or browse your existing drawings when you don’t have your iPad handy. Since sketches sync seamlessly via iCloud, they’re always with you, in your pocket, wherever you go. We think you’ll love the savings, too!

Don’t forget to check out our Tips & Tricks page for some great ways to improve your workflow as well as Sketch’s and Go’s version history pages for the complete list of what’s new.

If you aren’t using Linea yet, today’s update is a great reason to get on board! Head on over to the App Store to download Linea Sketch for iPad or Linea Go for iPhone and you’ll be creating in no time!

Advertising with Ollie

January 22, 2019

By Ged Maheux

When it comes to online advertising, the big question has always been: how do I get the most bang for the least bucks? If you’re a small developer with a limited budget (like we are), then you’re accustomed to carefully picking and choosing how and where to promote your product to reach the widest possible audience. We understand the struggle – which is why we created the Twitterrific Ad Network!

Now you can advertise your app, website, product or service directly on Twitterrific’s expansive network of tech-savvy users for just $100 a month. For that price we guarantee 1,000 tap-throughs – not impressions but actual visits – to your App Store page or website. What’s more, we take care of creating the ad for you ourselves and even provide App Analytics for iOS or Google Analytics for websites.

Signing up is as simple as sending us a few lines of text and subscribing via PayPal. We can usually get your ad up and running within 24 business hours. If you have an app, website, product or service that deserves a quality ad run for minimal cost, advertising with Twitterrific is the way to go. Head on over to our website to learn more and then get in touch. Let us help!

Artistic, Yes, but I Like It Too!

January 9, 2019

By Craig Hockenberry

For many artists, Linea is a creative tool that’s just as important as Procreate and Photoshop. It makes us happy to see the app we created for our own sketches become something that so many other designers rely on.

But recently we’ve been seeing that more technically inclined folks are also discovering Linea’s power. Whether you’re an engineer designing bridges or a podcaster who needs to push a few pixels, Linea is a wonderful development tool.

Marco Arment’s experience of annotating building plans alongside an architect and his wife gets at the heart of it: your iPad becomes a miniature whiteboard with layers that you can use to think about problems.

I made this discovery during Linea’s development and have been preaching it ever since. Here are just a few things I did with Linea last year:

These tasks are certainly creative, but not really artistic. If your work falls in similar lines, check out Linea today. You’ll thank your lucky stars!

Year in Review, 2018

December 13, 2018

By Webmaster

Iconfactory 2018 holiday illustration - the factory set against a snowy hill with Ollie the Twitterrific bird ice skating in the foreground

Our 22nd year in business was a good one for both us and our clients, and included some important anniversaries of key events in the factory’s growth. First, we paid tribute to the ten year anniversary of the iPhone SDK in March, and then the App Store a few months later. Twitterrific has been there since the very beginning of this revolutionary new kind of software!

You Can’t Keep a Good Bird Down

We started off the year celebrating the first anniversary of Project Phoenix which brought Twitterrific back to the Mac in style. It wasn’t long however until our beloved Ollie ran afoul of some major changes at Twitter.

Back in April we saw looming problems that would affect all third-party Twitter apps and in July we were forced to start removing features from both the iOS and macOS apps. In August, Twitter removed streaming and our ability to send push notifications.

Ollie's Goldfinch custom app icon

When Halloween rolled around it seemed fitting to cut the poor bird in half to help celebrate the spooky season.

Despite all of these setbacks, we’re still adding new features and fixing bugs. In November we introduced you to Ollie’s extended family, a fun set of custom app icons you can use to give your desktop or home screen a makeover!

A Busy Year for Sketches

Another one of our favorite products had an amazing year. It all started in March when we released the second major version of Linea Sketch.

This update introduced moving and transforming parts of your sketch, image import, and added an innovative feature called ZipLine. We also integrated with all the latest iOS features to support portrait orientation, split screen mode, and drag & drop. Then in May we added ways to manage the colors in your sketches and projects while retaining Linea’s famous simplicity.

We didn’t stop there, though. Oh no.

In September we were excited to launch Linea Go for the iPhone with all the power and ease of use of Linea Sketch in a fun-sized app that fits in your pocket.

Linea Go for the iPhone

To finish up the year, we updated the whole Linea product line with powerful new fill and blend tools. We also expanded our wildly popular ZipLine feature so it can recognize geometric shapes. iCloud version history and support for the latest iPads and Pencils were also included in these comprehensive releases.

If you love what we’re doing with Linea, please take a moment and leave us a tip. This kind of rapid development comes at a cost, and the only other alternative we have to pay for this work are app subscriptions.

Public Service Announcements

Dark Sky animated windmill icon

Of course there’s more to our digital lives than just making wonderful apps. Our client work challenges our design chops and keeps the conveyor belts humming right along. Projects for the Dark Sky weather app and a fun, custom version of Apollo for iOS were two of this year’s standout clients.

We also like to keep abreast of the latest developments for macOS and iOS including Safari so we were thrilled when a new kind of “favicon” was introduced a few years ago. And even more thrilled when those same icons came to all our tabs in 2018!

In October, Craig took a deep-dive on how Safari is changing to support “dark mode”. Currently, this is limited to macOS, but we wouldn’t be surprised if this change makes its way to iOS in the coming year.

Accessibility is another topic that’s near and dear to our hearts. Making products that anyone can use is something we strive for. Back in July we posted about the importance of making your tweets more accessible by explaining how VoiceOver works with emoji and Unicode. The article is a big help for people with visual disabilities and has been shared thousands of times.

Peace Out

When we started this business back in 1996 we would never have guessed we’d still be here twenty-two years later, doing all the things we love. It’s only possible thanks to the generous support of our loyal fans, our clients both big and small and all the users around the world who purchase and love our apps. All of us here at the factory send our thanks and wish you and yours a wonderful holiday season, a Merry Christmas and a Happy New Year!

Zip Into Shape With Linea

December 3, 2018

By Webmaster

Linea Hero Illustration - Colorful woman

Today’s update for Linea on both iPad and iPhone brings an array of features that make sketching out ideas easier than ever. We’ve extended the amazing capabilities of ZipLine to draw perfect geometric shapes, added two brand new tools, included iCloud-based version histories for your documents, and a host of other refinements. This is an amazing release: you’ll wonder how you lived without it!

Get Your Fill

With just a tap, Linea’s new paint roller tool lets you quickly flood areas of a sketch with color. The tool takes all the currently visible layers, including templates and grids, and uses them as the fill boundary. You can also draw shapes by hand to quickly color a free-form area.

We’ve had a blast using it with Linea’s vast collection of guides to create some familiar and cool retro art – your creativity knows no bounds!

Blend In

Linea’s other new tool lets you soften or smudge areas of your sketch. In the first mode, you can smooth hard edges to create gradients. The other mode lets you push color around to make fluid shapes. Combined with pressure from the Apple Pencil and varying brush sizes, this tool can be used for a huge variety of effects.

One thing we love to do is change the finger action in Settings from erase to smudge. When combined with the pencil tool, it feels a lot like working with oil pastels!

ZipShapes Rule

ZipLine was a revelation: a simple and effective way to draw straight lines. We loved it so much, we extended it to any shape you can imagine!

Simply draw a rough circle, square, rectangle, oval, or polygon and hold at the end. After a configurable delay, ZipShape will activate and transform your rough version into a clean, precise shape. It works with all of Linea’s drawing tools – including the new fill tool.

You don’t have to be perfect – after the shape is generated, there are transform handles you can use to tweak its final position and appearance. No rulers or stencils required!

But That’s Not All

Today’s update includes other great features that will help unleash your creativity while working faster and smarter:

  • Want to go back in time and fix a mistake or take a different creative direction? Tap Select in the Project view, choose a sketch, then tap Versions in the Actions (⋯) menu. Linea presents you with a list of edits and allows you to revert or create a copy.
  • Double-tap on the new Apple Pencil can be configured to switch tools, change interface state, enter selection mode, or modify tool sizes.
  • There are new settings for what your finger does while an Apple Pencil is in use: erase, blend, draw, move the canvas, or ignore.
  • We added a fun new mid-tone paper background called Mulberry.
  • New template for full-screen tablet with a minimal bezel which matches the 11″ iPad Pro aspect ratio.

Don’t forget to check out our Tips & Tricks page for some great ways to improve your workflow as well as Sketch’s and Go’s version history pages for the complete list of what’s new.

If you aren’t using Linea yet, today’s major update is a great reason to try it out! Head on over to the App Store to download Linea Sketch for iPad or Linea Go for iPhone and you’ll be creating in no time!

Meet Ollie’s Extended Family

November 6, 2018

By Ged Maheux

Today we’re pleased to offer Twitterrific updates for both macOS and iOS with several new custom application icons to change how Twitterrific appears on your macOS Dock or your iOS home screen. There are three new Ollie variants including Raven, Cardinal and Goldfinch which bring a new splash of color and make Twitterrific really stand out in a sea of boring, flat pixels.

The various custom Twitterrific icons that are available in today's macOS and iOS update

On the iOS side we’ve also added two additional variants that include a pure black background for all of you iPhone X and XS users out there that want to show off that gorgeous OLED screen. These new black-background icons blend right into the home screen and help make your favorite Twitter client feel brand new.

Twitterrific's Preferences showing the new color-coded tweets option turned off

That’s not all! Twitterrific has always color-coded mentions, replies and your own tweets so they are quick to spot when scrolling through your timeline. We personally enjoy the clarity of color-coded tweets, but we also realize that not everyone does. If you’d rather they all looked the same, we now have a new presentation option for you.

Today’s cross-platform update includes other improvements like visual tweaks for Apple’s awesome new iPads, profiles that show the date the user first joined Twitter, and several important bug fixes. Be sure to check the macOS and iOS App Stores for the latest and update your copy today. Enjoy!

Dark Mode and CSS

October 25, 2018

By Craig Hockenberry

The new Dark Mode in macOS Mojave provides users with a new way to customize their desktop environment. It also presents a lot of new situations where developers need to adapt content in their apps and websites.

While these changes are currently limited to native macOS apps, the arrival of Marzipan next year makes it likely that iOS developers will be confronted with similar changes in UIKit. A dark user interface would be a reality on all of Apple’s platforms, including tvOS and watchOS.

These changes also ripple out to web developers who are creating apps or site content that can look out of place when surrounded with dark interface elements. Some sites are using switchable themes: MacStories is a great example (use the contrast icon in the upper-right corner.)

So let’s take a moment to see where things are now, where they’re headed in the near future, and look at strategies for adapting content presentation.

Code Changes

Dark Mode has been on developers’ minds since its introduction at WWDC 2018. And since it’s an extension of the dark and light AppKit appearances that debuted in Yosemite, the consequences of this new user interface are already well understood.

For more information on what these changes mean from a Mac developer’s point of view, I recommend Dark Side of the Mac by Kuba Suder and Supporting Dark Mode by Daniel Jalkut.

Both these series cover the changes you’ll be making in the views, controls, and images throughout your app. UIKit developers can consider this information a preview of WWDC 2019 :-)

Enter WebKit

Apps on macOS have been able to embed WebKit since its introduction. Adding web content to native apps was one of its major design goals: an app called Safari was the the first one to use the new framework.

Over the years many developers, both on macOS and iOS, have taken advantage of this framework for one simple reason: HTML and CSS are a great combination for presenting content.

So it would make sense that all this cool new Dark Mode stuff would be available in WebKit, right? Nope, and making it happen is more difficult than you’d initially suspect.

Sometimes You Feel Like a Nut

Web content has to exist in many different contexts. In applications you want content that matches the surrounding native frame. With apps like the App Store, it’s hard to tell where the native code ends and the web code starts. In this situation, you want web content to respect the user’s theme choice in System Preferences.

The last post in Daniel’s series addresses the issue of adapting WebKit to an app’s needs. You’ll see how he’s watching for system changes and adapting the markup for an about box.

While this proposed solution works great for a small amount of markup, injecting code into HTML won’t scale well for richly styled content. His approach also makes it difficult for a designer: they can’t work directly with HTML and CSS files.

Sometimes You Don’t

This adaptability has a downside for the majority of web content: the environment created inside the main browser frame usually exists on its own and wants to ignore Dark Mode. For example, you wouldn’t want a dark form control to suddenly appear on Wikipedia because of a system preference change. And where is the boundary between content and chrome: should a scrollbar color match the markup or the browser where it’s presented?

Before you answer, consider these diverse viewpoints. The question is simple, the answer is not.

A New Standard

Luckily the standards groups have been debating this issue for the past several months and have settled on a new media query called prefers-color-scheme. It’s not available in any shipping browser yet, but thanks to the WebKit team, it just landed in the new Safari Technology Preview.

After downloading Release 68 and making sure that Dark Mode CSS Support is turned on in the Develop > Experimental Features menu, you can do this in your CSS:

div {
  background-color: pink;
}

@media (prefers-color-scheme: light) {
  div {
    background-color: yellow;
  }
}

@media (prefers-color-scheme: dark) {
  div {
    background-color: purple;
  }
}

As you switch in and out of Dark Mode, the div will change color. If you need a more interactive approach, say to show a theme-switching control at page load, you can use JavaScript to check the media query string:

var inDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

A related standard for supported-color-schemes is still being worked out. The idea behind this new meta tag is to give authors control over how colors switch automatically for form controls, scrollbars, and system colors like ButtonText. Its current implementation in WebKit looks like this:

<meta name="supported-color-schemes" content="light dark">

Whether this stays as a meta tag or becomes a CSS property is still being debated. It’s definitely something you want to keep an eye on if you use native controls on your site.

With these changes, Dark Mode now becomes another aspect of responsive web design. As with device dimensions or color, the user’s environmental choices must be taken into account. Instead of adapting elements to viewport changes, you’ll be changing designs to match the user interface chrome outside that viewport.

Semantic Style

The problem now becomes logistical: there are a lot of color and image properties in our CSS. Do you really want to duplicate all those definitions for a dark theme? Or make changes in two places? Hell no.

The solution is to start thinking about color differently.

One of the things that made the switch to Dark Mode easier in macOS was its semantic treatment of color. There are variables like labelColor, windowBackgroundColor, and controlTextColor used to represent color values. Without knowing anything about macOS development, you can probably guess what these definitions look like. You’ve just started thinking semantically.

When you’re dealing with light and dark variations of a color, it’s a lot easier to think of “text color” and not worry about whether it’s currently rgb(0,0,0) or rgb(255,255,255). It also helps when you’re dealing with a site’s branding: I can remember “Iconfactory branding color” but never rgb(229,36,30).

This, of course, can be extended to images. If you’ve got a button image that changes depending on context, just call it “refresh icon” and forget about the url().

Variables to the Rescue

Luckily, a new CSS feature that’s starting to see wide browser adoption is available to make this dream a reality. Hello CSS variables.

There are a lot of options, but start with the :root pseudo-element as a container for your variables. This is what it looks like:

:root {
  --branding-color: rgb(229, 36, 30);
}

And once you have that variable defined, you can use it anywhere in your CSS:

header {
  background-color: var(--branding-color);
}
footer {
  background-color: var(--branding-color);
}

You’re not limited to using just colors, either. These variables can be used for font lists, URLs, and any other property type.

Pretty awesome, especially when marketing decides they want to change your branding color, logo, and font face!

Picking Out the Pieces

There’s nothing preventing you from having more than one container for your variables, so we can extend this facility to support themes. First, we’ll use two CSS files. One called dark.css:

:root {
  --text-color: white;
  --page-background-color: black;
}

And another called light.css where we switch the colors around:

:root {
  --text-color: black;
  --page-background-color: white;
}

In a shared.css file, you use these definitions as needed:

body {
  color: var(--text-color);
  background-color: var(--page-background-color);
}

To switch themes, you tell the DOM which theme file to use. You might do this server-side by looking at a preference setting in a cookie and emitting the right <link> element. But the user experience is probably better if you use JavaScript to manage the stylesheet:

<link id="theme" href="style/light.css" ... />

<script type="text/javascript">
  function switchThemes() {
    var e = document.getElementById('theme');
    if (e.getAttribute('href') == 'style/light.css') {
      e.setAttribute('href', 'style/dark.css');
    }
    else {
      e.setAttribute('href', 'style/light.css');
    }
  }
</script>

<button onclick="switchThemes();">Switch</button>

If needed, the browser can switch themes according to the user’s system preference. When the media query becomes available, use it to wrap your variable definitions and you’re good to go:

@media (prefers-color-scheme: light) {
  :root {
    --text-color: black;
    --page-background-color: white;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: white;
    --page-background-color: black;
  }
}

Note that if you need to support themes on older browsers, you can use tools like Sass or Less to accomplish something similar. Variables are used to generate multiple CSS files which can then be switched using the <link> URL.

In our experience, the two hardest parts of all this are coming up with semantic names and colors that work well in both dark and light settings. It’s more of a design problem than a technology issue. If you need help, we’re here to help. We’ve been dealing with these issues for years, both in apps and on the web, and want to share our experience making award-winning products.

Adding Polish

This is already pretty great, but we can make it even sexier with CSS animation. In the browser it adds a level of finish; in an app it lets you match the animation in AppKit layers.

To make the job easier, we’ll again rely on CSS variables. Making the animation configurable ensures that animations stay in sync and lets you experiment or debug with ease. Here’s an example of the variables you might use:

:root {
  --duration: 1.0s;
  --timing: ease-in-out;
}

And they’re used to animate color changes in the document:

body {
  transition: color var(--duration) var(--timing),
              background-color var(--duration) var(--timing);
}

Note that transitions only apply to the element where they’re defined or inherited. If you set colors on another element, like a <button>, you’ll need to create a transition on that element, too. Thanks to color variables that start with two dashes, it’s easy to search for them in your markup.

Pesky Scrollbars

This whole treatise got its start with some Halloween decorations. Every year we do something fun at the Iconfactory and this year I noticed a problem. The scrollbars looked bad in the new macOS Dark Mode, so I worked around it with CSS to make them scary.

Scrollbars have been customizable in WebKit for almost 10 years. Unfortunately, this mechanism never saw standards acceptance and has retained the “-webkit-” vendor prefix.

The ::-webkit-scrollbar pseudo-elements used to configure the scrollbars still work in Chrome and Safari, but they’re buggy. They don’t animate along with the content and don’t hide when the user has a trackpad or other physical scrolling mechanism. I don’t recommend using them, and neither does the CSS working group:

The WebKit implementation of pseudo-elements for scrollbar is considered to be a feature mistakenly exposed to the web.

After deploying our decorations, I showed one of the members of the WebKit team the screenshot below and asked what was going on.

The white-belt-with-dark-pants look at Daring Fireball is something being worked on – some of the changes in WebKit require an update to the scrollbars that AppKit provides. This problem can only be addressed by a macOS update.

My earlier question about who owns the scrollbars at the boundary between web content and a native app is indeed a difficult one.

The good news is another new standard called scrollbar-color has been proposed. It includes four choices: auto, dark, light, and custom. The choice of auto lets the browser decide what’s best, or you can use light and dark to adapt them to the content you’re presenting.

The custom option lets you specify two colors: the first is for the scrollbar thumb, the second is for the track. There’s also a scrollbar-width in the proposal that allows you to size the scrollbar. Here’s an example using CSS variables:

section div.container {
  scrollbar-color: var(--thumb-color) var(--track-color);
  scrollbar-width: var(--width);
}

These features are still in flux, but it’s clear to me that the standards bodies are aware of the problem that web authors are currently facing with scrolling content.

Putting it All Together

We’ve covered a lot of topics in this piece, but these thousands of words are indeed worth a picture: in a simple demo. (You saw a preview in the animation at the top of this post.)

The page itself isn’t remarkable: just a single new meta tag and some simple JavaScript. The good bits are in the CSS file that uses the theme variables. There are a lot of comments and links, so take your time going over the source code.

As always, remember that we’re here to help, either with design or development services. We love making great looking products, no matter if they’re dark or light!