# Anatomy of a Light Theme: Rio de Janeiro > Anatomy of Rio de Janeiro, a light IDE theme: minty morning backgrounds, a forest ink foreground, and syntax in rainforest green, bay blue and samba gold. - URL: https://codigrate.com/blog/anatomy-of-the-rio-de-janeiro-theme - Published: 2026-10-04 - Category: Inspiration - Theme: [Rio de Janeiro](https://codigrate.com/theme?product=rio-de-janeiro) - Premium themes with a similar palette: [Dublin](https://codigrate.com/theme?product=dublin) - Publisher: Codigrate (https://codigrate.com) The most photographed pavement in the world started as a copy. The black and white waves along Copacabana were laid in the early 1900s by workers brought over from Portugal, after a pattern already set into a square in Lisbon. In 1970 the landscape architect Roberto Burle Marx redrew the whole avenue: he turned the waves to run with the shore and covered the opposite sidewalk in abstract mosaics. Burle Marx was also the gardener who taught Brazil to plant its own forest instead of European flower beds, and Rio's colors, in his hands, were green first. Codigrate's Rio de Janeiro theme starts from the same idea. The light is a pale mint, the text is the green of the hills, and the blues and golds of the beach are spent as accents. What follows takes it apart color by color. It is the fourth 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) and [Paris](https://codigrate.com/blog/anatomy-of-the-paris-theme), and the light sibling of Istanbul, which found its city in the water where Rio finds it in the trees. ## A City Between Forest And Sea The theme's own description sets the brief: lush hills, soft morning light and ocean air, airy minty backgrounds with confident rainforest greens and clean coastal blues. You can see both halves in the palette before a file is open. The forest is the larger half. A rainforest green [#375B2E](https://codigrate.com/tools/color/375B2E) runs through the interface as the accent, an emerald palm [#13A166](https://codigrate.com/tools/color/13A166) and a deep jungle [#028134](https://codigrate.com/tools/color/028134) carry most of the code, and the panels are all leaf. The sea is the other half: a Guanabara blue [#2287D5](https://codigrate.com/tools/color/2287D5), an Atlantic blue [#0A80B3](https://codigrate.com/tools/color/0A80B3) and a bay blue [#1065B8](https://codigrate.com/tools/color/1065B8), the bay seen from the hills in the morning. Between them sit the beach and the carnival, a golden samba [#A3860A](https://codigrate.com/tools/color/A3860A) and an Ipanema sun [#ECDA61](https://codigrate.com/tools/color/ECDA61). ## The Harmony: From The Hills Down To The Water Put the colors on a wheel and most of them run in one long cool arc. The leafy greens and the backgrounds sit around 104 to 111 degrees, the emerald and the jungle green at 144 to 155, the lagoon teal at 180, the blues between 198 and 210. That is an [analogous](https://codigrate.com/blog/introduction-to-color-harmony) run from leaf to sea, the way the view from Corcovado falls from forest to water without a break. The warm colors stand just outside it. The samba gold sits near 50 degrees and the sandy caramel of the parameters near 30, on the [warm](https://codigrate.com/blog/warm-and-cool-colors) side of the green. Gold against bay blue is about 160 degrees apart, close to a [complementary](https://codigrate.com/blog/harmony-in-opposites) pair: the sun on the water. Because only a few tokens wear it, the gold reads as light catching the page rather than a second theme fighting the first. ## Backgrounds, Grown From Leaf A light theme lives on its whites, and Rio's are not plain white. Three of them share the same leafy hue, around 106 degrees, and only the lightness moves: - Editor [#F7FAF6](https://codigrate.com/tools/color/F7FAF6), a morning breeze white the code is written on, the brightest of the set. - Window [#D9EFD2](https://codigrate.com/tools/color/D9EFD2), a palm shade for the tool windows, tabs and panels. - Surface [#85B778](https://codigrate.com/tools/color/85B778), a jungle canopy for the outer frame the whole window sits in. Input fields sit on a pure white [#FFFFFF](https://codigrate.com/tools/color/FFFFFF), one step brighter than the editor, so the place you type always reads as the front of the window. The gutter is a paler wash of [#EEF6EB](https://codigrate.com/tools/color/EEF6EB) and the current line lifts to [#E1F3DD](https://codigrate.com/tools/color/E1F3DD). Selection stays green: selected text turns a sage [#CADFC2](https://codigrate.com/tools/color/CADFC2), and a selected row in the project tree turns a garden path [#B8E5AD](https://codigrate.com/tools/color/B8E5AD) edged in a vivid leaf [#47A731](https://codigrate.com/tools/color/47A731). The one break is the open tab. The active editor tab sits on a lagoon mist [#D0ECEF](https://codigrate.com/tools/color/D0ECEF) with a tropical water underline [#41AFBA](https://codigrate.com/tools/color/41AFBA). In a room built entirely from leaf, that single pool of cool water tells you where you are at a glance, the way Istanbul used its one warm parchment tab in a room full of turquoise. Search matches get the sun, an Ipanema yellow [#ECDA61](https://codigrate.com/tools/color/ECDA61), and the progress bar runs in Guanabara blue. ## One Foreground, Several Voices The text is not black. Code is written in a forest ink [#1A510A](https://codigrate.com/tools/color/1A510A), a green so deep it only shows its color next to a true black, at about 9:1 against the editor. The interface text around it lifts to a leaf shadow [#2D7B18](https://codigrate.com/tools/color/2D7B18) at about 5:1, the same hue one step lighter, so labels and hints come from the same family as the code. Comments step back by color instead of by fading out. They are an olive grey [#828564](https://codigrate.com/tools/color/828564) at around 3.6:1, the dullest color in the file, a dry leaf among fresh ones. That is the ladder from [the readability post](https://codigrate.com/blog/introduction-to-readability): the code you act on reads first, the notes about it read second. The small parts of the editor stay in character as well. The caret is a fern green [#4A873F](https://codigrate.com/tools/color/4A873F), the line numbers a grey green [#7FA078](https://codigrate.com/tools/color/7FA078), and the number on the current line darkens to [#236215](https://codigrate.com/tools/color/236215), so your place in the gutter is marked by depth, not by a new color. ## Syntax: Forest, Bay And Carnival Open a file and the city fills in, from the hills down to the beach: - Keywords, modifiers and booleans in emerald palm [#13A166](https://codigrate.com/tools/color/13A166), the most frequent colored words in any file, in the brightest of the forest greens. - Strings, numbers and attribute values in deep jungle [#028134](https://codigrate.com/tools/color/028134), a darker, bluer green, the shade under the canopy. - Variables in a lagoon teal [#078A8A](https://codigrate.com/tools/color/078A8A), where the forest meets the water at Rodrigo de Freitas. - Static members in Atlantic blue [#0A80B3](https://codigrate.com/tools/color/0A80B3), and tags and CSS selectors in bay blue [#1065B8](https://codigrate.com/tools/color/1065B8), the open water past the Sugarloaf. - Methods, fields and properties in golden samba [#A3860A](https://codigrate.com/tools/color/A3860A), and attributes in a deeper gold [#9C830D](https://codigrate.com/tools/color/9C830D), the brass of a carnival band. - Parameters in a sandy caramel [#BC8650](https://codigrate.com/tools/color/BC8650), the beach in the afternoon, warm and easy to spot where a function takes its input. - Global variables in a palm green [#42875B](https://codigrate.com/tools/color/42875B), and annotations in a moss [#739E4B](https://codigrate.com/tools/color/739E4B). Class names, function names, types, constants and operators stay a near black ink [#131B25](https://codigrate.com/tools/color/131B25) at about 16:1, the darkest color in the theme. Leaving the names uncolored is what keeps a Rio file calm. The eye takes in the shape of a line first, keyword, name, value, and the greens, blues and golds only land where they mean something. ## Reading It Back Taken apart, Rio de Janeiro is a garden with a view of the sea. The whites share one leafy hue so the greens have somewhere to grow. The language itself is painted in the forest, emerald for keywords and jungle green for values, the blues of the bay are kept for variables, statics and tags, and the gold and sand of the beach mark the methods and the parameters you look for. The one cool tab marks where you are, the comments step back into an olive grey, and the names stay a dark ink so nothing fights the structure. It suits a bright room and an early start, which is also when the real city looks most like this, the mist lifting off the hills and the light coming up over the bay. Rio de Janeiro installs free on JetBrains, VS Code, Cursor, Sublime Text, Chrome, Slack, Ghostty, iTerm2, macOS Terminal and Rhino, all from its [theme page](https://codigrate.com/theme?product=rio-de-janeiro). ## Frequently Asked Questions ### What is the Rio de Janeiro theme? Rio de Janeiro is one of Codigrate's light city themes, built around the city in the early morning: green hills straight out of the sea, soft light on the bay and the smell of salt in the air. The editor is a pale mint white instead of a plain white, the text is a deep forest green instead of black, and the code is painted in the colors of the place: emerald and jungle greens for the language itself, bay and Atlantic blues for the water, and a samba gold and a sandy caramel for the warm accents. It reads like a walk under the palms by the beach rather than a plain light mode. ### Why are the Rio de Janeiro backgrounds green instead of white? Because the whole theme is built around a green city. Rio's light comes from one leafy hue, around 106 degrees: the editor is a morning breeze white #F7FAF6, the tool windows a palm shade #D9EFD2 and the outer frame a jungle canopy #85B778. The greens in the code share that hue, so the syntax looks like it grew out of the page, and the panels separate by a soft step in lightness rather than by drawn lines. ### How are the syntax colors chosen in Rio de Janeiro? They follow the city from the hills down to the sea. Keywords are an emerald palm green and strings a deep jungle green, variables a lagoon teal, static members an Atlantic blue and tags a bay blue. The warm notes are the beach and the carnival: a samba gold for methods and fields, and a sandy caramel for parameters. Names such as classes and functions stay a near black ink, and comments drop to an olive grey, so the structure of a line is clear before the color is. ### Is a green light theme comfortable for long coding sessions? In a bright room, yes. The editor text is a forest ink #1A510A at about 9:1 against the mint white background, and class and function names are a near black at about 16:1, so the page reads firmly without the hard edge of pure black on pure white. Green sits in the middle of what the eye handles best, and the theme keeps its brightest colors, the gold and the blues, for small accents rather than large areas. In a dim room a dark theme will still feel softer.