# Anatomy of a Dark Theme: London > Anatomy of London, a dark IDE theme: dusk slate and twilight indigo for the frame, kiosk red keywords, Thames steel members and strings in fog grey. - URL: https://codigrate.com/blog/anatomy-of-the-london-theme - Published: 2026-10-18 - Category: Inspiration - Theme: [London](https://codigrate.com/theme?product=london) - Publisher: Codigrate (https://codigrate.com) The dome on top of a red London telephone box comes from a grave. In 1924 the architect Giles Gilbert Scott won the competition to design a new kiosk, and for its roof he borrowed the shallow dome of the tomb John Soane had built for his wife in St Pancras Old Churchyard. Eleven years later Scott drew the kiosk again, smaller and cheaper, for the Silver Jubilee of George V, and that one, the K6, is the box everybody pictures: cast iron, a crown over the door, a grid of small windows and that dome. Tens of thousands went up across the country. The Post Office wanted them red so they could be found, and they were painted the same red as the pillar boxes, which had themselves been green until 1874. On a clear afternoon a K6 is a postcard. On a wet evening in November it is something else: the only warm color on a street of grey stone, dark railings and wet tarmac, lit from inside, with the river somewhere behind it the color of a knife. Codigrate's London theme is that evening. What follows takes it apart color by color. It is the eleventh city in this series after [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), [Istanbul](https://codigrate.com/blog/anatomy-of-the-istanbul-theme), [Paris](https://codigrate.com/blog/anatomy-of-the-paris-theme), [Rio de Janeiro](https://codigrate.com/blog/anatomy-of-the-rio-de-janeiro-theme), [Tokyo](https://codigrate.com/blog/anatomy-of-the-tokyo-theme), [Tallinn](https://codigrate.com/blog/anatomy-of-the-tallinn-theme), [Prague](https://codigrate.com/blog/anatomy-of-the-prague-theme), [Sydney](https://codigrate.com/blog/anatomy-of-the-sydney-theme), [Vienna](https://codigrate.com/blog/anatomy-of-the-vienna-theme) and [Madrid](https://codigrate.com/blog/anatomy-of-the-madrid-theme), and the eleventh premium theme after [Ocean](https://codigrate.com/blog/anatomy-of-the-ocean-theme), [Salda](https://codigrate.com/blog/anatomy-of-the-salda-theme), Prague, Sydney, [Reynisfjara](https://codigrate.com/blog/anatomy-of-the-reynisfjara-theme), [Spring](https://codigrate.com/blog/anatomy-of-the-spring-theme), Vienna, Madrid, [Etna](https://codigrate.com/blog/anatomy-of-the-etna-theme) and [Fuji](https://codigrate.com/blog/anatomy-of-the-fuji-theme). Etna is also a dark theme with one red in it, but there the red is heat and everything around it is rock. In London the red is paint, and everything around it is weather. ## A City At Dusk The theme's own description sets the scene: London at dusk, a slate grey base washed with twilight indigo, lit by the pillar box red of a K6 telephone box and the muted steel blue of the Thames. The palette names read like a walk home. Coal Ink, Dusk Slate, Fog Indigo and Portland Shadow are the street after dark. Kerb Grey, Pavement Grey, Drizzle Grey, Fog Grey and Chalk Blue are what you walk on and what falls on you. Portland Stone is the pale limestone half the city is built from, St Paul's among it. Brick Shadow, Clay Brick, Pillar Crimson, Kiosk Red, Post Rose and Brick Rose are the reds, from the terraces to the boxes. Steel Blue, Thames Steel, Mist Blue and Slate Blue are the river and the sky over it. Lamp Amber, Signal Red, Beacon Blue and Park Green are the lights of the city, kept for the interface's warnings, errors, notes and successes. The interface takes its accents from the corner and the river. Kiosk Red [#EE4B5B](https://codigrate.com/tools/color/EE4B5B) is the accent for links, changed settings and the line under the active tab, and Thames Steel [#7FA3C6](https://codigrate.com/tools/color/7FA3C6) is its second, the color a progress bar fills with and a selected tool window button turns. In the code the same two carry the weight: the kiosk red for the keywords and the Thames steel for everything that belongs to an object. ## The Harmony: Red Against The Weather On the wheel London is two small clusters with a lot of empty space between them. The reds sit between 343 and 355 degrees: keywords, globals, tags, attributes, the accent, the caret and the line numbers. The blues and blue greys sit between 208 and 251: every background, every interface label, and in the code the fields, methods, static members, locals, parameters, annotations, comments, strings and numbers. Nothing in the theme is green, yellow or orange outside the four status colors. The two families are not opposites. Red and steel blue sit about 145 degrees apart, short of a true [complementary](https://codigrate.com/blog/harmony-in-opposites) pair, and what separates them most is [saturation](https://codigrate.com/blog/saturation). The kiosk red runs at 83 percent and the rose globals at 68, while the blues stay between 13 and 45 percent and the backgrounds below 15. So the red is not just a different hue from the rest of the window, it is a different kind of color: painted, against a city that has been rained on. That is how a red phone box works on a real street, and it is why one red word in London is easier to find than a whole line of bright colors in a busier theme. The [temperature](https://codigrate.com/blog/warm-and-cool-colors) split follows the same line. The reds are the only warm colors in the code, and they are kept for the structure: the words that open a block, the names that live outside it, the tags that hold a page together. Everything you read inside that structure is cool. ## Backgrounds, From Coal To Portland Shadow London's backgrounds are four surfaces, and each one is a little lighter than the one inside it: - Input [#17161D](https://codigrate.com/tools/color/17161D), coal ink, for search fields and dialogs. - Editor [#201F29](https://codigrate.com/tools/color/201F29), dusk slate, the page the code is written on. - Window [#2D2B36](https://codigrate.com/tools/color/2D2B36), fog indigo, for the tool windows and panels. - Surface [#3B3A45](https://codigrate.com/tools/color/3B3A45), Portland shadow, the outer frame the whole window sits in. They run from 10 to 25 percent lightness, all on the same blue violet hue and all below 15 percent saturation, so each one reads as grey until you set it beside a true neutral and see the evening in it. The frame is the lightest of them, so the code sits in the darkest part of the window, the way a street is darker than the sky above the rooftops at dusk. The borders and separators use the frame color, so the panels look set into the stone rather than outlined. Hovering a row lifts it only to [#282631](https://codigrate.com/tools/color/282631). Selections stay in the stone too. A selected row in the project tree is kerb grey [#494757](https://codigrate.com/tools/color/494757) edged in pavement grey [#7C7A90](https://codigrate.com/tools/color/7C7A90), and when the window loses focus it drops to [#363541](https://codigrate.com/tools/color/363541) with a [#555464](https://codigrate.com/tools/color/555464) edge. The red comes in exactly where the window wants your attention. The active editor tab sits on Brick Shadow [#422429](https://codigrate.com/tools/color/422429), a dark brick red, underlined in Kiosk Red, the one warm surface in the frame, and search matches in the interface light up Pillar Crimson [#D42A44](https://codigrate.com/tools/color/D42A44), as red as the boxes themselves. Inside the editor the red is held back to a stain. Selected text sits on a dark wine [#4E2F39](https://codigrate.com/tools/color/4E2F39), with the code still at about 9.8:1 on it. Search results in the code are a pale stone [#EDE9F0](https://codigrate.com/tools/color/EDE9F0) on [#4A3641](https://codigrate.com/tools/color/4A3641) edged in a dusty rose [#C9737F](https://codigrate.com/tools/color/C9737F). The word under the caret goes the other way, into the dusk: a near white [#EDEDF6](https://codigrate.com/tools/color/EDEDF6) on a twilight grey [#474457](https://codigrate.com/tools/color/474457) where it is read, and on a faint violet [#54495E](https://codigrate.com/tools/color/54495E) where it is written to. A matched brace is set in bold on a dusk violet [#463C55](https://codigrate.com/tools/color/463C55). The status colors are the city's lights: Lamp Amber [#D9A441](https://codigrate.com/tools/color/D9A441) for warnings, the sodium glow of an old street lamp; Park Green [#6FB98F](https://codigrate.com/tools/color/6FB98F) for success; Beacon Blue [#5B9BD5](https://codigrate.com/tools/color/5B9BD5) for information and visited links; and Signal Red [#D93A3F](https://codigrate.com/tools/color/D93A3F) for errors. ## One Foreground, Several Voices Code is written in a pale stone [#E9EAF3](https://codigrate.com/tools/color/E9EAF3) at about 13.6:1 against the dusk slate, and class names, function names and constants are Portland Stone [#DDDFEA](https://codigrate.com/tools/color/DDDFEA) at about 12.3:1, the same pale limestone the interface uses for its labels. So the names of things in a file are the buildings of the street, light and plain. One level down, Fog Grey [#A9ADC2](https://codigrate.com/tools/color/A9ADC2) carries hints and secondary labels at about 6.3:1 on the panels, and inline parameter hints are almost white, [#DCDDE9](https://codigrate.com/tools/color/DCDDE9), so they read clearly between the arguments. Comments are drizzle grey [#6B6F8A](https://codigrate.com/tools/color/6B6F8A) at about 3.3:1, under the 4.5:1 the [readability post](https://codigrate.com/blog/introduction-to-readability) suggests for body text. In London that is the weather: a comment is there, behind the code, the way the far side of the street is there in a light rain. Line comments and doc comments are set in italics and the tags inside doc comments in bold, while block comments stay upright, so a commented out chunk of code still looks like code. The gutter goes darker than the editor, to [#1A1922](https://codigrate.com/tools/color/1A1922), so the code sits on a raised pavement. Line numbers are a dark brick [#7A4A56](https://codigrate.com/tools/color/7A4A56), quiet at about 2.3:1, and the number on the current line turns Kiosk Red, a box lit up at the end of the road. The caret is a post rose [#E08A95](https://codigrate.com/tools/color/E08A95) over a current row [#292834](https://codigrate.com/tools/color/292834) that is barely lighter than the page. Indent guides are drawn in [#3A3847](https://codigrate.com/tools/color/3A3847), and the guide of the block you are in lifts to [#4A4858](https://codigrate.com/tools/color/4A4858). ## Syntax: Kiosk, River And Fog Open a file and the street lights up: - Keywords in kiosk red [#EE4B5B](https://codigrate.com/tools/color/EE4B5B), the red of a K6 with the light on inside. - Global variables in brick rose [#E88790](https://codigrate.com/tools/color/E88790), HTML and XML tags in post rose [#D06A73](https://codigrate.com/tools/color/D06A73), and attributes in clay brick [#9A6B78](https://codigrate.com/tools/color/9A6B78). - Instance fields and methods in Thames steel [#7FA3C6](https://codigrate.com/tools/color/7FA3C6), and JavaScript member functions in a lighter river blue [#8FB2D4](https://codigrate.com/tools/color/8FB2D4). - Static fields and methods in a deeper steel blue [#5D89B0](https://codigrate.com/tools/color/5D89B0), set in italics. - Local variables in mist blue [#9BB6CE](https://codigrate.com/tools/color/9BB6CE), and parameters in chalk blue [#B9BFD8](https://codigrate.com/tools/color/B9BFD8). - Strings, numbers and escapes in fog grey [#A9ADC2](https://codigrate.com/tools/color/A9ADC2). - Annotations in slate blue [#8790AE](https://codigrate.com/tools/color/8790AE). - Class names, function names and constants in Portland Stone [#DDDFEA](https://codigrate.com/tools/color/DDDFEA). Read a few lines and the order of it shows. The red marks the frame of the code, the keywords and the tags, and the rose marks the few things that live outside a function. Everything that moves inside one, the fields and methods, the locals, the parameters, is a blue from the river, getting paler the closer it is to the line you are on: steel for the members of an object, mist for its locals, chalk for what was passed in. And the values, the strings and numbers, are the fog that sits over all of it. ## The Final Product Here is London put back together. The slate frame holds a JetBrains IDE with one brick red tab and Sublime Text keeps the same kiosk red and Thames steel on the same dusk. Slack goes grey and indigo around the chat, Ghostty prints in reds and steel blues on the slate, and in Rhino the viewports go dark with Thames steel marking the active tab and the snaps you have turned on.
London theme in a JetBrains IDE
JetBrains
London theme in Sublime Text
Sublime Text
London theme in Slack
Slack
London theme in Ghostty
Ghostty
London theme in Rhino
Rhino
## Reading It Back Taken apart, London is a grey street with one red box on it. The backgrounds are the stone and the evening, indigo greys that get lighter toward the edge of the window so the code sits in the darkest part. The syntax is mostly the river and the fog, cool blues that pale as they get closer to the line you are working on, and the red is kept for the words that shape a file and for the one tab you have open. It is a theme for long evenings and rainy afternoons, calm and a little cinematic, with exactly one color that raises its voice. London is a premium theme: a paid plugin for JetBrains IDEs on the JetBrains Marketplace and part of the All In One bundle, a one time purchase for Xcode, Zed, Sublime Text, Ghostty, iTerm2, macOS Terminal, Claude Code, Slack, Rhino and Firefox from the Codigrate store, and a LINE theme in the LINE theme shop, all from its [theme page](https://codigrate.com/theme?product=london). ## Frequently Asked Questions ### What is the London theme? London is one of Codigrate's premium dark city themes, built around London at dusk: wet pavements, Portland stone going grey in the last light, the Thames the color of steel and a red telephone box glowing on the corner. The frame of the editor is slate grey with a wash of twilight indigo, and the code is written on a dusk slate almost black. The syntax is the street: kiosk red keywords, rose globals and tags, Thames steel fields and methods, mist blue local variables and strings in the grey of a London fog. ### Why is London so grey? Because the city is, after the sun goes down. Every background sits between 245 and 251 degrees on the wheel, a blue violet, at 9 to 14 percent saturation, so it reads as grey with a little evening in it. The input fields sit on coal ink #17161D, the editor on dusk slate #201F29, the panels on fog indigo #2D2B36 and the outer frame on Portland shadow #3B3A45, each a few steps lighter than the one inside it. With the frame that quiet, the red of a keyword stands out the way a telephone box does on a grey street. ### How are the syntax colors chosen in London? They come in two families. The reds are the street furniture: keywords in kiosk red at 354 degrees, globals in a brick rose, tags in a post box rose and attributes in a clay brick. The blues are the river and the sky: fields and methods in Thames steel at 210 degrees, static members in a deeper steel blue, local variables in mist blue, parameters in chalk blue, and strings and numbers in fog grey. Nearly all the code is the cool family, so the red lands on the words that shape a file. ### Where can I get the London theme? London is a premium theme. On JetBrains IDEs it is a paid plugin on the JetBrains Marketplace and is also part of the All In One bundle. For Xcode, Zed, Sublime Text, Ghostty, iTerm2, macOS Terminal, Claude Code, Slack, Rhino and Firefox it is a one time purchase from the Codigrate store, delivered as a download, and the LINE version is sold in the LINE theme shop. All of them are linked from the London theme page.