Use promo code SHOWHN02 for 30% off

Build your dream editor theme in minutes

Make your code editor and terminal feel like home with a beautiful theme tailored just for you. It’s never been easier.
import React, { useEffect } from 'react'

// Default values for components
const DEFAULTS = {
  timer: 2 * Math.PI,

export function Timer({ initial }: {
  initial?: number,
}) {
  initial ??= DEFAULTS.timer
  const [seconds, setSeconds] = React.useState(initial)
  const tick = () => setSeconds(seconds + 1)

  useEffect(() => {
    setTimeout(tick, 1000)
  }, [seconds])

  return <div>
    <h1 className='text-xl font-medium'>{seconds}</h1>
works with
…and 22 more

Express your creativity

With 8 knobs, it’s amazingly simple to get started, yet the possibilties are endless.


The main hue or “color”, such as red, green, or blue.

UI & background colorfulness

How colorful (vivid) backgrounds and non-highlighted text are.

Code colorfulness

How colorful (vivid) highlighted code is.

Color variety

How many different colors to use for separating parts of code.


Contrast between the background and text/code. Affects readability.


How bright colors are, including both background and text.

Separate code by contrast

How much to use contrast/brightness to separate different parts of code.

Separate code by colorfulness

How much to use colorfulness to separate different parts of code.

And more...

Balance colors

Italic font

Punctuation emphasis

Comment emphasis

Colored selection

Modified file color

Panel borders

Designer quality, personal taste

Hueflake creates themes that are readable, balanced, and just look great out of the box. And you can customize everything to your taste.

Optimized for usability

Enjoy meticulously-tuned contrast and hues by default. Color science lets you customize it while keeping it beautiful.

State-of-the-art color science

Human color vision is complicated and hard to design for. Hueflake uses sophisticated color appearance models and algorithms to model colors exactly how you see them.

Just-right contrast

Too much or not enough contrast causes eye strain. Hueflake strikes a balance by default and keeps it consistent throughout your code. Selective emphasis helps you focus on important parts of code.

Distinct hues

Hueflake uses color theory to pick distinct hues that work well with each other, so you can easily distinguish parts of code. For even more clarity, you can use distinct contrast and colorfulness.

Balanced details

Focus on making your perfect theme and let Hueflake take care of the details.

Balanced colors

Some colors are more vivid than others. Hueflake carefully balances chosen colors to make your theme coherent.

Seamless light/dark variants

We see contrast differently in light and dark modes. Hueflake compensates for this, so your theme feels the same no matter the time of day.

Semantic colors

Hueflake preserves colors with implied meanings, such as red for errors, and blends them into your theme. Or choose more flexibility for an immersive theme.

Consistent design system

With a design system under-the-hood, Hueflake’s themes are consistent across apps while having colors for each specific UI element.
Visual Studio Code diff editor, split between default Hueflake light/dark themes

Adapts to your eyes

Colorblind? Find it hard to read code with most themes? Look no further.

Separate colors by contrast

Separate different parts of code by brightness, not only hue. Choose exactly how much contrast to add.

Hue controls

Avoid hue combinations that are hard to see.

Colorblind correction

Shift color differences into ones you can see, such as different hues and shades.

Share & explore

You’re not alone! Find popular themes to download, or share your own.