# Anatomy of a Light Theme: Madrid > Anatomy of Madrid, a light IDE theme: a saffron frame around a page of sunlit limestone, sangria keywords, flamenco red values and azulejo blue comments. - URL: https://codigrate.com/blog/anatomy-of-the-madrid-theme - Published: 2026-10-15 - Category: Inspiration - Theme: [Madrid](https://codigrate.com/theme?product=madrid) - Publisher: Codigrate (https://codigrate.com) Every year on 15 May, Madrid celebrates San Isidro, the farmer who became the city's patron saint. People walk down to the meadow by the river that carries his name, drink from the spring at his hermitage and spend the afternoon on the grass. A good part of the city comes dressed for it. The women, chulapas, wear a fringed shawl and a headscarf with a carnation tucked into it, and the men, chulapos, wear a waistcoat, a small checked cap and a carnation in the buttonhole. In the evening they dance the chotis in pairs, turning slowly on one spot, which is said to be how you dance in a city where nobody has room. The carnation, the clavel, is Madrid's flower, and the place you see it most is not the meadow but the balconies: pots of red and pink carnations on iron railings, against walls painted saffron and ochre, in the hard light of a Castilian afternoon. Codigrate's Madrid theme is one of those balconies. What follows takes it apart color by color. It is the tenth 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) and [Vienna](https://codigrate.com/blog/anatomy-of-the-vienna-theme), and the eighth 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) and Vienna. ## A Balcony In The Afternoon The theme's own description puts it in two images: Madrid's sunlit limestone and the flash of carmine on a flamenco dress. The palette names fill in the rest of the street. Linen White, Golden Morning and Sunlit Facade are the walls in the sun. Madrid Gold, Saffron and Toledo Gold are the paint and the ironwork, darkening to Olive Bronze and Dark Umber in the shade under the balcony. Rose Terrace, Clay Rose and Terracotta are the pots and the tiled floor. Spanish Red, Sangria and Flamenco Red are the carnations in them. And Azulejo Blue, Andalusian Teal and Plaza Blue are the painted tiles you find in a doorway or around a fountain, the cool colors of a warm city. The interface takes its accents from the metal and the clay. A deep Toledo gold [#976F03](https://codigrate.com/tools/color/976F03) is the accent for links and changed settings, dark enough to read as text on the pale panels, and terracotta [#D79668](https://codigrate.com/tools/color/D79668) is its second accent, the color the progress bar fills with. In the code the carnations lead: sangria [#B84440](https://codigrate.com/tools/color/B84440) for the keywords and flamenco red [#BD503F](https://codigrate.com/tools/color/BD503F) for the values. ## The Harmony: Saffron Walls, Red Flowers, Blue Tiles On a wheel, Madrid's frame is one narrow band. Every background, the interface text, the caret, the gutter and the guides sit between 42 and 53 degrees, the yellow gold of saffron. That is the wall. Against it the syntax splits into two groups that come from different parts of the street. The warm group is the flowers and the clay. Keywords are sangria at 2 degrees, strings and numbers flamenco red at 8, annotations a clay rose at 9, local variables a faded rose brown at 6 and globals a dusty clay at 14. Members and tags go back to the wall's own gold, between 41 and 46 degrees. Together they are an [analogous harmony](https://codigrate.com/blog/introduction-to-color-harmony), red into gold, and on their own they would make a very warm, very southern file. The cool group is the tiles. Comments are a grey azulejo blue at 205 degrees, attributes a clearer tile blue at 198, parameters an Andalusian teal at 177 and static members a green from the Retiro park at 133. The blues sit almost opposite the saffron, about 160 degrees away, close to a [complementary pair](https://codigrate.com/blog/introduction-to-color-harmony). That is what keeps a light theme this [warm](https://codigrate.com/blog/warm-and-cool-colors) from blurring into one color: wherever you look in a file, there is something cool to rest the eye on, the way a strip of blue tile rests the eye on a sunny wall. ## Backgrounds, From The Wall To The Window Madrid's backgrounds are four surfaces, and the further from the code, the stronger the gold: - Surface [#E8C25D](https://codigrate.com/tools/color/E8C25D), Madrid gold, the outer frame the whole window sits in. - Window [#FDF5DF](https://codigrate.com/tools/color/FDF5DF), golden morning, for the tool windows and panels. - Editor [#FBFAF2](https://codigrate.com/tools/color/FBFAF2), a limestone a breath warmer than Linen White, the page the code is written on. - Input [#FFFFFF](https://codigrate.com/tools/color/FFFFFF), Linen White itself, for search fields and dialogs. The frame is the boldest thing in the theme, a saffron at 75 percent [saturation](https://codigrate.com/blog/saturation) and 64 percent lightness, and the interface text still reads on it at about 8.4:1. The panels keep the same hue and drop almost all of its weight, to a pale cream at 93 percent lightness. The editor goes further still, to a limestone at 97 percent that is warm only in comparison with the pure white of the input fields. So the window works like a building in the sun: the painted wall outside, the shaded room, and the brightest spot where the light falls on the page. Hovering a row in a list warms it to a sand gold [#ECD78D](https://codigrate.com/tools/color/ECD78D). A selected row in the project tree turns rose terrace [#F8D6CF](https://codigrate.com/tools/color/F8D6CF), the pink of a carnation petal, edged in Spanish red [#902926](https://codigrate.com/tools/color/902926), and the selection in other lists is a sunlit facade [#F8DFA3](https://codigrate.com/tools/color/F8DFA3) with a saffron edge [#DEA72F](https://codigrate.com/tools/color/DEA72F). Search matches in the interface glow an apricot [#FDC67F](https://codigrate.com/tools/color/FDC67F), and the dark umber text stays above 9:1 on all of them. In the editor, selected text is a peach [#F8D0A3](https://codigrate.com/tools/color/F8D0A3) at about 9.9:1, and search results are where the tiles come in: a deep tile blue [#0E3E53](https://codigrate.com/tools/color/0E3E53) on a pale azulejo [#BEE5F6](https://codigrate.com/tools/color/BEE5F6), the one blue background in the theme, so a match is visible from across a long file. The word under the caret is marked in a soft clay [#F4D7C5](https://codigrate.com/tools/color/F4D7C5) where it is read and a rose [#F4CDC5](https://codigrate.com/tools/color/F4CDC5) where it is written to, both with the text darkened to a deep red brown so it stays above 12:1. ## One Foreground, Several Voices Code is written in dark umber [#372805](https://codigrate.com/tools/color/372805), the shade under a balcony, at about 13.7:1 against the limestone. It is not black and not grey but a very dark gold, so even the plainest text belongs to the same wall as the frame. The interface uses the same umber on the panels at about 13.1:1, and one level down an olive bronze [#745606](https://codigrate.com/tools/color/745606) for hints and secondary labels at about 6.3:1. Comments are the quiet tiles. They are a grey azulejo blue [#7190A6](https://codigrate.com/tools/color/7190A6) at about 3.2:1, set in italics, line, block and doc comments alike. That is softer than the 4.5:1 the [readability post](https://codigrate.com/blog/introduction-to-readability) suggests for body text, and it is a deliberate choice: on a page this bright, a comment in a cool muted blue steps back behind the warm code without disappearing, and the italics make it unmistakable. The tags inside doc comments are set in bold and underlined, so the structure of a doc block stays easy to scan. The gutter is a shade warmer than the page, a cream [#FBF7E8](https://codigrate.com/tools/color/FBF7E8). Line numbers are a soft khaki [#B29A5D](https://codigrate.com/tools/color/B29A5D), kept low at about 2.6:1 so the column does not compete with the code, and the number on the current line darkens to a readable bronze [#8E6A0B](https://codigrate.com/tools/color/8E6A0B) at about 4.6:1. The caret is saffron [#C19115](https://codigrate.com/tools/color/C19115) over a pale gold current row [#FDEEC8](https://codigrate.com/tools/color/FDEEC8). Indent guides are drawn in the hover sand [#ECD78D](https://codigrate.com/tools/color/ECD78D) and the guide of the block you are in lifts to the saffron edge [#DEA72F](https://codigrate.com/tools/color/DEA72F), and a matched brace sits on a full Madrid gold [#E8C25D](https://codigrate.com/tools/color/E8C25D) background. ## Syntax: Carnations On The Railing Open a file and the balcony fills up: - Keywords in sangria [#B84440](https://codigrate.com/tools/color/B84440), set in bold, the deepest red on the railing and the first thing you see, at about 5.1:1. - Strings, numbers and escapes in flamenco red [#BD503F](https://codigrate.com/tools/color/BD503F), the same flowers a shade brighter, at about 4.6:1. The bold weight is what tells a keyword from a value. - Instance fields and methods in Toledo gold [#A57F02](https://codigrate.com/tools/color/A57F02), and JavaScript member functions in a slightly deeper gold [#987601](https://codigrate.com/tools/color/987601), the ironwork of the balcony. - Parameters in Andalusian teal [#349590](https://codigrate.com/tools/color/349590), the brightest of the tile colors, so the values passed into a function stand out from everything around them. - Local variables in a faded rose brown [#9F5F58](https://codigrate.com/tools/color/9F5F58), and global variables in a dusty clay [#8A6B62](https://codigrate.com/tools/color/8A6B62), the terracotta pots. - Static fields and methods in a Retiro green [#4A8E59](https://codigrate.com/tools/color/4A8E59). - Annotations in clay rose [#D37969](https://codigrate.com/tools/color/D37969), a pink carnation. - HTML and XML tags in a saffron gold [#BD8712](https://codigrate.com/tools/color/BD8712), and attributes in azulejo blue [#5A91A8](https://codigrate.com/tools/color/5A91A8). - Class names, function names, constants and plain identifiers in the dark umber of the text, and inline hints in a lighter umber [#6F5A3E](https://codigrate.com/tools/color/6F5A3E). Leaving the names in umber is what holds the file together. The darkest, strongest color on the page is the structure you navigate by, the reds mark the language itself and the values, the golds mark what belongs to an object, and the few blues and greens tell you at a glance where the inputs, the attributes and the shared members are. ## The Final Product Here is Madrid put back together. The saffron frame holds a JetBrains IDE and Xcode, Zed and Sublime Text keep the limestone page and the carnation reds, and Slack and Firefox carry the same gold wall around the chat and the browser.
Madrid theme in a JetBrains IDE
JetBrains
Madrid theme in Xcode
Xcode
Madrid theme in Zed
Zed
Madrid theme in Sublime Text
Sublime Text
Madrid theme in Slack
Slack
Madrid theme in Firefox
Firefox
## Reading It Back Taken apart, Madrid is a sunny wall with flowers on it. The backgrounds are one saffron hue at four strengths, boldest at the frame and nearly white where the code is, so the page you read stays calm while the window around it is unmistakably golden. The syntax is the balcony: reds for the language and its values, gold for what belongs to an object, dark umber for the names you navigate by, and a set of tile blues and greens placed on the parameters, the attributes, the static members and the comments, cool enough to find at a glance in a warm file. It is a theme for bright rooms and daylight work, warm without turning yellow and lively without getting loud. Madrid 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, 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=madrid). ## Frequently Asked Questions ### What is the Madrid theme? Madrid is one of Codigrate's premium light city themes, built around a Madrid balcony in summer: sunlit limestone, saffron walls and carnations in pots along the railing. The frame of the editor is a saffron gold, the page the code is written on is a warm limestone white, and the syntax is the flowers on the balcony: sangria keywords, flamenco red strings and numbers, Toledo gold members, with azulejo blues and an Andalusian teal for the cooler notes. ### Why is the frame of Madrid so much stronger than the editor? Because the frame is the wall and the editor is the window in it. The outer surface is Madrid gold #E8C25D at about 64 percent lightness, the panels a pale golden morning #FDF5DF, and the editor almost white, a limestone #FBFAF2 at 97 percent lightness. All three share the same golden hue, between 44 and 53 degrees, so the window reads as one sunlit building, and the code sits on the brightest and quietest part of it. ### How are the syntax colors chosen in Madrid? They come from two places in the city. The warm half is the balcony: keywords, strings, local variables, globals and annotations are reds and rose browns between 2 and 14 degrees on the wheel, and fields, methods and tags are golds between 41 and 46. The cool half is the tiles: comments and attributes are azulejo blues around 200 degrees, parameters an Andalusian teal at 177 and static members a park green at 133. Gold and tile blue sit almost opposite each other on the wheel, so the cool notes are easy to find in a warm file. ### Where can I get the Madrid theme? Madrid 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, 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 Madrid theme page.