58 themes. 28 families.
Each family in a dark and a light variant, plus a high contrast pair for Coherence.
Drawn from things that actually make color.
58 themes for VS Code and Open VSX.
Palettes placed by hand, every color measured on the surface it sits on. 28 families, each dark and light, plus a high contrast pair.
VS Code 1.99 or later, and the editors built on it · Free, MIT License
code --install-extension tuguidragos.tapetum
Almost every animal that hunts at night carries a mirror behind its retina. Light that would have passed straight through is thrown back for a second pass, so almost none of it is wasted. The mirror is called the tapetum lucidum, and every animal throws back its own color.
Green in cats, blue in horses, red in alligators, white in spiders. You also spend your nights looking at light. This is a collection of ways to throw it back.
Get the highlights.
Contrast, measured.
Every syntax color clears 4.5 to 1 against its own background, and comments clear 4.0.
Ways of coloring code.
Grammar, provenance, borrow, effect, signal and tone.
Color keys, covered.
Every key VS Code 1.140.0 registers, chat and agents included, but the few it reads as switches.
No 2 alike.
The closest pair of families still averages 12 dE apart.
Placed by hand.
Every palette was placed by hand, and the interface colors follow from it by rules that measure them.
Editors, checked.
VS Code and 9 editors built on it, from VSCodium and Cursor to Positron and Kiro.
Families
Every family has a source.
Each one is drawn from something in the physical world that emits or bends light. Pick one to read where it comes from, and see it on real code, dark and light.
Selenium toning. Hue rotates as tone drops
Selenium
grammar schemeSelenium toning shifts the blacks of a silver print toward purple and stretches the tonal range at the same time. The result is an image that is warm in the shadows and cool in the highlights at once. So this family does not pick 6 separate hues. It picks a ladder of lightness and lets the hue rotate as the ladder descends.
- background
#14131A - foreground
#D6DEEC - keyword
#B1A2D0 - function
#BDD4E0 - string
#A7BBDE - type
#BD86AD - number
#D17F90 - tag
#D58075 - comment
#807A8A
- background
#F5F2F0 - foreground
#1E1C22 - keyword
#60537D - function
#31454F - string
#3A506E - type
#865277 - number
#9F5263 - tag
#A7564E - comment
#736C7C
The depth at which each color dies underwater
Hadal
grammar schemeWater eats color by depth. Red is gone by 5 meters, orange by 20, yellow by 50, green by 100, and below 200 there is only blue. Hadal makes that the rule: the colors that survive deepest get the most light and the most saturation, and the ones that die shallow are left faded on purpose. The red is almost gray, and it should be.
- background
#04131C - foreground
#C6DCE1 - keyword
#97CCF2 - function
#0FCDD2 - string
#0CC681 - type
#B69F4B - number
#CB8661 - tag
#CA828B - comment
#768B90
- background
#F6FAFC - foreground
#152225 - keyword
#0A587B - function
#0E6365 - string
#0A6D46 - type
#76630E - number
#915431 - tag
#9F5B66 - comment
#586C71
Which code touches the world and which only computes
Effect
effect schemePure code and code that touches the world look identical in every theme. Here they do not. Await, async, throw, catch and every mutation burn. Functions that only compute, the types, and the data stay cold. It is the same idea a type system uses to track effects, except you can see it without reading a signature.
- background
#07100D - foreground
#C6D2CC - keyword slot
#6E8079 - function slot
#5FD8C0 - string slot
#93B4CA - type slot
#8E9CBE - number slot
#FF5C4D - tag slot
#FFA03C - comment slot
#6E7B76
- background
#F3F8F5 - foreground
#1D2622 - keyword slot
#5E6E68 - function slot
#0A6E5E - string slot
#2E5C78 - type slot
#3E4E80 - number slot
#C22A18 - tag slot
#9A5200 - comment slot
#65736E
The effect scheme decides what each slot paints, so a slot’s name is not the role it colors here.
A dichroic filter. 2 hues in the whole of the code
Dichroic
grammar schemeA dichroic filter absorbs nothing. It splits. What passes through has one color and what reflects has exactly its complement, and there is no third. Structure travels through the filter and takes the teal, data reflects back and takes the magenta. That is the whole palette. The terminal is the one place that breaks the rule, because red and green have to stay red and green.
- background
#07110F - foreground
#C4D2CE - keyword
#3FE8BE - function
#14BFA0 - string
#FA7DC8 - type
#31A892 - number
#F658AE - tag
#E968AB - comment
#728781
- background
#F5EEF3 - foreground
#1E2321 - keyword
#065246 - function
#076659 - string
#850752 - type
#097869 - number
#AC136E - tag
#BD327F - comment
#606F6B
Carminic acid, the first real scarlet Europe had
Cochineal
grammar schemeCochineal is a scale insect that lives on cactus, and carminic acid is what it makes to keep ants away. It gave Europe its first true scarlet, worth close to silver by weight, and it took about 70000 insects to make a pound of dye. The background is the crimson sunk into the cloth, the syntax is the same dye at different strengths.
- background
#1C0A0F - foreground
#EDD6DA - keyword
#F98794 - function
#FFA6B6 - string
#E8B54A - type
#8FC9A4 - number
#FF8A5C - tag
#B49BE8 - comment
#9A7A82
- background
#FBF2F3 - foreground
#2A161B - keyword
#B01238 - function
#8A2050 - string
#8A5A00 - type
#1E6A46 - number
#A64414 - tag
#5B48A0 - comment
#7C6268
Rayleigh scattering. Blue reflected, amber transmitted
Aerogel
grammar schemeAerogel is 99 percent air and scatters short wavelengths the same way the sky does. Look at a block against a dark background and it is blue. Hold it up to a lamp and the light that gets through is amber. Same material, 2 colors, so the dark variant is the reflection and the light variant is the transmission. This is the only pair here that comes from 1 physical fact rather than 2.
- background
#0A0D12 - foreground
#C6D8DF - keyword
#F2A47A - function
#54B2F2 - string
#0ED8D8 - type
#A187E9 - number
#F27884 - tag
#66A567 - comment
#75888F
- background
#FBF6EC - foreground
#251C18 - keyword
#913E0A - function
#0F638F - string
#0B5A5A - type
#6D57B4 - number
#C40A43 - tag
#39773D - comment
#74645D
Interference on anodized titanium
Anodise
grammar schemeAnodized titanium has no pigment in it at all. The color is an oxide layer a few hundred nanometers thick, and which color you get depends only on the voltage: bronze around 20 volts, violet at 30, blue at 40, gold at 70. The metal underneath never changes. Anodise is the quietest family, all interference and no dye.
- background
#0C0C0D - foreground
#E2E2E4 - keyword
#E8B54A - function
#75ADE2 - string
#46C7C2 - type
#39B871 - number
#E07A45 - tag
#C77DD8 - comment
#7E7E82
- background
#F8F8F9 - foreground
#1D1D20 - keyword
#8A5A00 - function
#2A5FA8 - string
#0E6E8A - type
#22683F - number
#B0501F - tag
#8A3D9E - comment
#66666A
Whether a thing can change, and where it is written to
Borrow
borrow schemeRust made a whole language out of one question: can this change, and who is allowed to change it. Borrow puts that question on the colors. Constants and anything read only are cold. Reassignable variables are warm. Parameters are borrowed, so they are green and italic. And at the exact point where you write into a variable, the name lights up. You stop looking for mutation and start seeing it.
- background
#12151A - foreground
#C8CDD6 - keyword slot
#64AEF9 - function slot
#EAECF0 - string slot
#66C070 - type slot
#A585EC - number slot
#F09A18 - tag slot
#FA6362 - comment slot
#767D89
- background
#F5F6F9 - foreground
#22262E - keyword slot
#0C5FA8 - function slot
#141820 - string slot
#2C6620 - type slot
#6A2FC0 - number slot
#9A5A00 - tag slot
#C00A18 - comment slot
#6B7280
The borrow scheme decides what each slot paints, so a slot’s name is not the role it colors here.
Sonoluminescence, the flash of a collapsing bubble
Cavitation
grammar schemeDrive a bubble in water with sound and it collapses in under a nanosecond, reaching temperatures people still argue about, and emits a flash of light. Nobody fully agrees why. The flash is blue white and almost too fast to measure. Cavitation is the quietest palette in the collection, cold and low in chroma, with 1 hot color for the core.
- background
#05070B - foreground
#C3D4DB - keyword
#40D0ED - function
#7CACDD - string
#5CB8A5 - type
#CE8C54 - number
#F955AB - tag
#D0A4DB - comment
#72858C
- background
#F8FAFD - foreground
#162227 - keyword
#0C5B6A - function
#3C709E - string
#0B6355 - type
#8F5621 - number
#CC0C82 - tag
#724A7D - comment
#5A6C73
A reactor pool. No warm color in the code
Cherenkov
grammar schemeA particle moving faster than light does in water drags a shockwave of light behind it, and that is the blue glow in a reactor pool. The intensity rises as 1 over lambda squared, so the shorter the wavelength the stronger it gets, which is why it looks violet blue. There is not a single warm color in the code, because the physics does not produce one. The terminal keeps its red and yellow, and so do the error and warning marks, because those have to mean what they have always meant.
- background
#061527 - foreground
#CADEE6 - keyword
#EE7DFA - function
#3AB2F8 - string
#0DE6D6 - type
#4FBE6F - number
#15C6EC - tag
#BCC2F2 - comment
#798C93
- background
#F5F8FD - foreground
#152125 - keyword
#B61CCB - function
#0C75A9 - string
#0A3934 - type
#0C7638 - number
#0D6377 - tag
#0B4496 - comment
#586B71
Mineral pigments ground before synthetic chemistry
Cinnabar
grammar schemeBefore synthetic chemistry, color was something you dug up and ground. Cinnabar is mercury sulfide and gave the vermilion of Pompeii. Orpiment is arsenic and was the only clean yellow for 1000 years, poisonous enough that painters avoided mixing it with lead. Malachite, azurite and lapis came out of the same kind of rock. Warm and heavy, because pigment is.
- background
#100C09 - foreground
#DED2CD - keyword
#F28F83 - function
#47AFFA - string
#0CCEA0 - type
#F2BA24 - number
#FA54AC - tag
#9C86F5 - comment
#90827B
- background
#FAF7F0 - foreground
#251D19 - keyword
#BC0D22 - function
#0A699D - string
#0C644C - type
#674D0A - number
#CB0B82 - tag
#6254D1 - comment
#72655E
6 lines from 1 argon and krypton ion laser
Coherence
grammar schemeA mixed argon and krypton ion laser puts out 6 visible lines from 1 tube at once, which is what a white laser actually is. Argon gives 457.9, 488.0 and 514.5 nm, krypton gives 413.1, 568.2 and 647.1. Every color in the code is one of those lines. There is no magenta anywhere in it, because magenta is not a spectral color and no laser can emit one, so the terminal's magenta slot carries the krypton violet instead. The interface falls to true black so the only thing emitting on the screen is the code.
- background
#040406 - foreground
#C9CED6 - keyword
#16DFF4 - function
#C891F9 - string
#0EF477 - type
#F4D00C - number
#F46B57 - tag
#4E97F4 - comment
#7D8189
- background
#FDFDFE - foreground
#16181C - keyword
#0A5B64 - function
#7C39C4 - string
#0A6830 - type
#716008 - number
#CF151A - tag
#0C67B5 - comment
#63676E
- background
#000000 - foreground
#FFFFFF - keyword
#12EBFF - function
#E9C3FF - string
#10FF7D - type
#FFE20E - number
#FFA05C - tag
#BAD2FF - comment
#9F9F9F
- background
#FFFFFF - foreground
#000000 - keyword
#00616C - function
#6F00F5 - string
#006727 - type
#695500 - number
#B50005 - tag
#0059A6 - comment
#686868
A silicon wafer and real LED emission peaks
Epitaxy
grammar schemeA polished silicon wafer is a dark mirror with a violet cast, and that is the background. The syntax colors are the real emission peaks of the materials grown on top of it: GaN at 405 nm, InGaN at 450 and 505, GaP at 555, AlGaInP at 590, AlGaAs at 660. The light variant is lit the way a cleanroom is lit, in yellow, because photoresist cannot see that end of the spectrum.
- background
#15151C - foreground
#D7DCE5 - keyword
#77ABF9 - function
#13C5B5 - string
#F2C17A - type
#60D53D - number
#F2726E - tag
#C771F8 - comment
#838A96
- background
#FBF9F0 - foreground
#251F19 - keyword
#0A66B2 - function
#0C6A61 - string
#6E4C0A - type
#1F660B - number
#CF0B30 - tag
#9841CD - comment
#71675E
Absorption lines in sunlight
Fraunhofer
grammar schemeIn 1814 Joseph von Fraunhofer pointed a prism at the sun and found hundreds of dark gaps in the spectrum. They are elements in the sun's own atmosphere eating their own colors on the way out. He labeled the strongest with letters and those letters are still in use. Fraunhofer is the brightest family here, built around the sodium D line, the hydrogen alpha and the magnesium triplet.
- background
#080A10 - foreground
#DDE1E8 - keyword
#AF9CF9 - function
#4FC3F7 - string
#7CE85C - type
#00E5C0 - number
#FFC93C - tag
#FA6245 - comment
#727A88
- background
#FBFAF6 - foreground
#1B1D22 - keyword
#3A2FC9 - function
#0D6FA8 - string
#3D7A1F - type
#007A66 - number
#9A6A00 - tag
#C13A1A - comment
#6A6C70
Compressed glacier ice. Nothing in it is black
Glacier
grammar schemeGlacier ice is blue because pressure squeezes the air bubbles out, the light path gets long, and red is absorbed on the way through. The older and more compressed the ice, the deeper the blue. Nothing in this family drops to black, not one surface, because nothing in a crevasse does either. The warm colors are the sun on the surface and the rock band running through it.
- background
#1A2733 - foreground
#DCEAF2 - keyword
#0ECCCB - function
#9BD0F6 - string
#6BECBE - type
#AEA0F0 - number
#F6B464 - tag
#F67F87 - comment
#8AA0B0
- background
#F2FAFD - foreground
#18262F - keyword
#0A6B6C - function
#0B5475 - string
#094B30 - type
#5461AD - number
#804E08 - tag
#BB4355 - comment
#5E7382
The temperature scale of hot steel
Incandescence
grammar schemeHeat steel and it tells you its temperature. Dull red around 600 degrees, cherry at 750, orange at 900, amber at 1000, almost white by 1300. Blacksmiths read it by eye and still do. In this family lightness is temperature, so the ladder is not an aesthetic choice, it is the scale. The 1 cold color is the blue at the base of the forge flame.
- background
#0C0806 - foreground
#DDCFCD - keyword
#E8CC6A - function
#F2A854 - string
#F88A63 - type
#F7616A - number
#F95A93 - tag
#12A3E0 - comment
#907F7D
- background
#FAF6F2 - foreground
#251C1B - keyword
#574A0A - function
#7A4B0A - string
#AE350A - type
#D40B3B - number
#D30B6B - tag
#0F6A92 - comment
#746461
Light made by living things
Noctiluca
grammar schemeLiving light is nearly always blue green, because that is what travels furthest through seawater. Dinoflagellates glow at 480 nm and turn a breaking wave into a line of fire. Jellyfish green fluorescent protein sits at 509 and won a Nobel prize for being useful. Fireflies are further toward yellow. The red is the rarest thing here: 1 Brazilian beetle larva, the railroad worm, is the only land animal known to make it.
- background
#04090C - foreground
#C4D5D4 - keyword
#11D9A9 - function
#AEBD0F - string
#3AB2F2 - type
#9291F2 - number
#FA6051 - tag
#1BA4AF - comment
#728786
- background
#F5FAFA - foreground
#172221 - keyword
#0C5E48 - function
#565D0B - string
#0C658E - type
#3657DD - number
#D70E21 - tag
#0F737B - comment
#5A6C6B
A scraped and rewritten manuscript
Palimpsest
signal schemeA palimpsest is a parchment scraped clean and written over, with the old text still faintly readable underneath. Keywords, imports, punctuation and type annotations are the scraped layer here, pushed back toward the background. The names you chose and the data you wrote are the new text. Roughly 2 thirds of the screen recedes on purpose.
- background
#191612 - foreground
#E8E1D2 - keyword slot
#8A8173 - function slot
#F5EEDE - string slot
#D9A94A - type slot
#A19788 - number slot
#D9A94A - tag slot
#D68164 - comment slot
#837A6C
- background
#EDE4CE - foreground
#2A241A - keyword slot
#6B6352 - function slot
#16120C - string slot
#7E5B0E - type slot
#6A6250 - number slot
#7E5B0E - tag slot
#8A3A22 - comment slot
#716A58
The signal scheme decides what each slot paints, so a slot’s name is not the role it colors here.
The mat around a framed photograph
Passepartout
grammar schemeA passepartout is the card mat around a framed photograph. It is not decoration, it is what makes the eye fall on the picture. Every theme puts the interface at the same brightness as the editor or darker. This one inverts it: the mat is far lighter than the plate, and the editor sits inside it as the print.
- background
#08080A - foreground
#DEDCD6 - keyword
#D8A83C - function
#E4DFD2 - string
#B8A88C - type
#A8B0A0 - number
#D89A6A - tag
#C0A0B8 - comment
#83807A
- background
#FDFDFB - foreground
#1F1E1A - keyword
#8A5F12 - function
#26241E - string
#5A5038 - type
#3E5040 - number
#8A4A18 - tag
#6A3E62 - comment
#6E6A60
Oscilloscope phosphor decay
Persistence
grammar schemeOscilloscope phosphors are graded by how long they keep glowing after the beam has moved on. P1 is the willemite green everyone pictures, P7 goes blue then fades to a long yellow ghost, P11 is the blue used for photographing traces. Persistence is the green one, and the warmer colors are the ghost that P7 leaves behind.
- background
#0A0B09 - foreground
#DCE0D8 - keyword
#7FE33F - function
#8FB8FF - string
#FFB742 - type
#4ECFC0 - number
#FF6B4A - tag
#B79BFF - comment
#7C8178
- background
#F7F8F4 - foreground
#1C1F1A - keyword
#3D7A14 - function
#1A6E96 - string
#8A5A00 - type
#00786B - number
#B8402A - tag
#6B3FA8 - comment
#676A63
Where each symbol came from
Provenance
provenance schemeEvery theme in the world colors by grammar. This one colors by where a symbol came from. What you defined here is gold and bold. What the language handed you is cyan and italic. What cannot change any more is violet. The rest of your own code is a single color, and the keywords are deliberately dimmed, because you already know that function is a function. Open a file and you see instantly what is yours and what is borrowed.
- background
#191B20 - foreground
#C6C8CC - keyword slot
#8E939E - function slot
#F0B75A - string slot
#9EB096 - type slot
#A8B8A0 - number slot
#B9A6E8 - tag slot
#6FC7E0 - comment slot
#7C808A
- background
#F4F2ED - foreground
#2E3036 - keyword slot
#6A6E76 - function slot
#855606 - string slot
#4A5C42 - type slot
#5A6C52 - number slot
#5B48A0 - tag slot
#0F6480 - comment slot
#70747C
The provenance scheme decides what each slot paints, so a slot’s name is not the role it colors here.
Emission lines of heated gases
Quantum
grammar schemeHeat a gas and it does not glow across the spectrum, it glows at a handful of exact wavelengths and nothing in between. Hydrogen gives you 4 visible lines, neon gives you a fistful of reds, mercury a violet and a green so specific they are still used to calibrate instruments. Quantum takes its violet, blue and teal from that idea: a small set of exact positions rather than a smooth range.
- background
#0B0E1A - foreground
#C8D3F5 - keyword
#CD8FF9 - function
#8AB4FF - string
#4DE0D0 - type
#6EE7A8 - number
#FF9F45 - tag
#FF6E9C - comment
#6E769E
- background
#FAFBFF - foreground
#24294A - keyword
#7B2CBF - function
#2B5FD9 - string
#0A7570 - type
#06704A - number
#C25100 - tag
#C42B7B - comment
#6D7291
The 6 spot inks you can order for a duplicator
Riso
grammar schemeA Riso duplicator does not mix color. It pulls 1 pass per ink and lays them over each other, slightly out of register. The inks come from a fixed catalog you order by name, and the fluorescent pink is impossible to mistake for anything else. These are 6 of them, printed on kraft.
- background
#16130E - foreground
#E8E2D4 - keyword
#FA80BB - function
#FFEE3C - string
#3FC97E - type
#5FBCC4 - number
#FF7F42 - tag
#A289DB - comment
#847C6C
- background
#F5F0E4 - foreground
#211E16 - keyword
#C4157E - function
#7A6000 - string
#0A6E42 - type
#0E6068 - number
#B4470E - tag
#5A4694 - comment
#7C7462
A darkroom under an OC filter
Safelight
grammar schemePhotographic paper cannot see the deep amber of an OC filter, which is why it is the only light you are allowed to switch on in a darkroom. You learn to read everything from one color and how bright it is. Safelight works the same way: the code is a single amber in 4 intensities, and the only real color in it is the red of the filter itself, kept for literals.
- background
#2A1A0D - foreground
#F0DCBE - keyword
#FFF6E4 - function
#EBD3AE - string
#FA8D6A - type
#CFB48A - number
#FF9463 - tag
#B39970 - comment
#9C8665
- background
#EDE6D6 - foreground
#2C2318 - keyword
#1A130A - function
#463A26 - string
#A83A16 - type
#6A5A3E - number
#8A3D12 - tag
#706043 - comment
#75664A
A silver stylus on prepared paper. Gray code, hue kept for signals
Silverpoint
tone schemeSilverpoint is drawing with a silver stylus on prepared paper. There is no color, only line and tone, and no way to erase. Leonardo and Durer worked in it. This family keeps hue out of the syntax: 6 grays, plus weight and italic doing the work that color usually does. Hue is left for signals: errors and warnings, the 2 sides of a merge conflict, every third bracket level, and the single silver blue accent that helps you find your cursor.
- background
#1A1A1C - foreground
#D2D2D6 - keyword slot
#AAAAB0 - function slot
#F0F0F4 - string slot
#BEBEC4 - type slot
#AAAAB0 - number slot
#C8C8CE - tag slot
#97979D - comment slot
#7E7E84
- background
#E8E6E1 - foreground
#26262A - keyword slot
#5E5E64 - function slot
#141418 - string slot
#3E3E44 - type slot
#4E4E54 - number slot
#2C2C32 - tag slot
#64646A - comment slot
#6C6C72
The tone scheme decides what each slot paints, so a slot’s name is not the role it colors here.
Sedimentary layers. Color sits on nesting depth
Stratum
tone schemeA road cut through sediment is read by depth, not by content. Each band is a different million years. Stratum takes the color off the syntax entirely and puts it on nesting depth: the code itself is 1 sandstone in 6 tones, and its 3 real colors are spent on bracket levels and indent guides. You see how deep you are without counting.
- background
#14110D - foreground
#E4DACA - keyword slot
#BFA77B - function slot
#F5E9CE - string slot
#D8C298 - type slot
#A7946E - number slot
#D2BC94 - tag slot
#A69574 - comment slot
#7F7667
- background
#EFE9DC - foreground
#241F16 - keyword slot
#5C4E32 - function slot
#1E1808 - string slot
#3E3418 - type slot
#6E6040 - number slot
#31280F - tag slot
#6F6141 - comment slot
#77705E
The tone scheme decides what each slot paints, so a slot’s name is not the role it colors here.
Transition metals dissolved in water
Valence
grammar schemeDissolve a transition metal and the water takes its color. Permanganate is a violet so intense a few grains stain a liter, dichromate is orange, copper is sky blue, nickel green, cobalt chloride a deep blue that turns pink when it picks up water. These are transmission colors, not emission, which is why they read deeper and heavier than the rest of the collection.
- background
#0B090E - foreground
#D4D1DC - keyword
#F976E7 - function
#12B6E8 - string
#20D12E - type
#F2B486 - number
#F46469 - tag
#6E90FA - comment
#85828F
- background
#FCFBFD - foreground
#222128 - keyword
#B70CA8 - function
#0B6886 - string
#0B6912 - type
#81440A - number
#D20B38 - tag
#0C68DF - comment
#6B6874
What copper turns into as it corrodes
Verdigris
grammar schemeCopper does not corrode into one color, it corrodes into a catalog. Verdigris is the blue green of an old roof, malachite the deeper green of the ore, azurite the blue, cuprite the brick red of the first oxide layer, bornite the purple tarnish that gives peacock ore its name. Brass sits underneath as the metal before any of it happened.
- background
#0D0B08 - foreground
#DBD2CE - keyword
#0FCBB7 - function
#B09BFA - string
#E4BF39 - type
#41BF76 - number
#F46577 - tag
#2AA2C8 - comment
#8F817D
- background
#F7F4ED - foreground
#211B18 - keyword
#0C6157 - function
#6354B0 - string
#5F4E0B - type
#0B6A3A - number
#BE2A49 - tag
#0C728F - comment
#70635F
picker.tsx · tapetum
picker.tsxfamilies.ts
1// Every family is a dark and a light variant.
2import { useState } from "react";
3
4type Variant = "dark" | "light";
5interface Family { name: string; source: string; themes: number }
6
7const families: Family[] = [
8 { name: "Hadal", source: "deep water", themes: 2 },
9 { name: "Coherence", source: "an ion laser", themes: 4 },
10];
11
12export async function load(name: string): Promise<Family> {
13 const reply = await fetch(`/families/${name}.json`);
14 if (!reply.ok) throw new Error(`No family called ${name}`);
15 return reply.json();
16}
17
18export function Picker({ family }: { family: Family }) {
19 const [variant, setVariant] = useState<Variant>("dark");
20 return (
21 <button className="chip" onClick={() => setVariant("light")}>
22 {family.name} {variant}
23 </button>
24 );
25}
mainTapetum Selenium
Colored by each theme’s own file, the way VS Code paints a file before a language server answers. Provenance, Borrow and Effect also read the language server, so in VS Code they show more.
In VS Code
The real thing.
Screenshots of 6 families in VS Code, with two editors side by side, the source control view, and the chat.
Tapetum Hadal
Light variants
Not inversions of the dark ones.
A color that reads clearly on black is often unreadable on white, and the reverse holds just as firmly, so every light palette was placed by hand and measured on its own ground. Same families, same sources, different physics.
Aerogel is blue against a dark background and amber held up to a lamp, so its dark variant is the reflection and its light variant the transmission.
Schemes
6 ways of coloring code.
Almost every theme answers a single question: what kind of symbol is this. Tapetum ships that one and 5 others, and the answer is a property of the theme, so changing theme changes the question.
Grammar
22 families
What kind of symbol it is. The classic, and what nearly every theme does.
Provenance
1 family
Where the symbol came from. Gold and bold for what you wrote here, cyan and italic for what the language handed you, violet for what cannot change. Keywords are dimmed, because you already know
functionis a function.Borrow
1 family
Whether a value can change. Cold for frozen, warm for mutable, green and italic for borrowed parameters, and a name lights up at the exact point you write to it.
Effect
1 family
Whether a line touches the outside world.
await,async,throwand every mutation burn. Pure computation stays cold.Signal
1 family: Palimpsest
Signal against boilerplate. Keywords, imports, punctuation and type annotations are scraped back toward the background. Only the names you chose and the data you care about stay lit.
Tone
2 families: Silverpoint and Stratum
Nothing at all. No hue in the code, only 6 tones plus weight and italic.
3 of these, provenance, borrow and effect, read the semantic tokens of your language server, and fall back to grammar rules when none is running.
Checked
Placed by hand.
Measured by machine.
Color is a judgment call, so every palette was placed by hand. What a machine is good for is catching what a person misses, on all 58 variants.
Contrast
Every syntax color against its own background, and interface text against the surfaces VS Code’s stylesheets pair it with. Syntax clears 4.5 to 1, comments and struck-through deprecated symbols 4.0, and interface text 4.5.
Separation
CIEDE2000 between every pair of colored roles, and between every pair of families, so no 2 look like each other.
Coverage
All 987 color keys VS Code 1.140.0 registers and has not deprecated, including chat, agents, inline edits and the modern tab surfaces, except the few it reads as switches.
Editors
Verified on the current VSCodium, Cursor, Devin, code-server, Positron, Kiro, Trae and Antigravity, on the last Void build, and on VS Code 1.140.0 for macOS, Linux and Windows.
-
node tools/analyze.mjs - # all 58, against the real pairs
-
node tools/audit.mjs - # structure, schemes, manifest, files and the README
-
node tools/paint-check.mjs - # every rule painted as written, with VS Code’s own tokenizer
-
node tools/compare.mjs - # against every theme Microsoft ships
Install
One command.
Or install it from the VS Code Marketplace, or from Open VSX, the gallery VSCodium, Kiro, Trae, Antigravity and code-server install from, and Positron through its mirror. Cursor and Devin run galleries of their own.
code --install-extension tuguidragos.tapetum
Choose a family
Press Cmd K then Cmd T, or Ctrl K then Ctrl T on Windows and Linux, and type a family name to filter.
Dark or light
Each dark variant is named Tapetum and its family, like Tapetum Hadal, and each light one adds Light, like Tapetum Hadal Light.
High contrast
Set
workbench.to Tapetum Coherence High Contrast to keep Tapetum when the system asks for high contrast.preferredHighContrastColorTheme
Make one your own
Change any color.
Any color can be overridden per theme in your settings, without forking anything.
{
"workbench.colorCustomizations": {
"[Tapetum Quantum]": {
"editor.background": "#080B14"
}
},
"editor.tokenColorCustomizations": {
"[Tapetum Quantum]": {
"comments": "#7580AD"
}
}
}Questions.
What is Tapetum?
Tapetum is a free collection of 58 color themes for Visual Studio Code and the editors built on it: 28 families, each in a dark and a light variant, plus a high contrast pair for Coherence. Every palette was placed by hand, and every color is measured on the surface it sits on.
How do I install Tapetum?
Run code --install-extension tuguidragos.tapetum, or install it from the VS Code Marketplace or Open VSX. Then press Cmd K then Cmd T, or Ctrl K then Ctrl T on Windows and Linux, and type a family name.
Which editors does Tapetum work in?
VS Code 1.99 or later on macOS, Linux and Windows, and the editors built on it. It is checked one by one on the current VSCodium, Cursor, Devin (formerly Windsurf), code-server, Positron, Kiro, Trae and Antigravity, and on the last Void build.
Are the light themes inverted dark themes?
No. A color that reads clearly on black is often unreadable on white, and the reverse holds just as firmly, so every light palette was placed by hand and measured on its own ground.
Does Tapetum have a high contrast theme?
Yes, Coherence comes in a high contrast pair. When the system asks for high contrast, VS Code switches to a high contrast theme of its own; set workbench. to Tapetum Coherence High Contrast and workbench. to Tapetum Coherence High Contrast Light to keep Tapetum.
Why do Provenance, Borrow and Effect look different on my code?
They read the semantic tokens your language server emits, not only the grammar. They fall back to grammar rules when no server is running, so open a real file rather than a scratch buffer the first time you try one.
Can I change a color in a Tapetum theme?
Yes. Any color can be overridden per theme in your settings, with workbench.colorCustomizations and editor.tokenColorCustomizations, without forking anything.
Can I turn italics off?
Yes. The README has a block for your settings that switches italic off in all 58 themes at once, and says what stays in each scheme once italic is gone.
Is Tapetum free?
Yes. Tapetum is free and open source under the MIT License.
Get Tapetum.
Free and open source, under the MIT License.
code --install-extension tuguidragos.tapetum