# Anatomy of a Light Theme: Istanbul

> Anatomy of Istanbul, a light IDE theme: marble white backgrounds, a midnight teal foreground, and syntax in Iznik turquoise, rooftop red and bazaar copper.

- URL: https://codigrate.com/blog/anatomy-of-the-istanbul-theme
- Published: 2026-10-02
- Updated: 2026-10-08
- Category: Inspiration
- Theme: [Istanbul](https://codigrate.com/theme?product=istanbul)
- Premium themes with a similar palette: [Sydney](https://codigrate.com/theme?product=sydney)
- Publisher: Codigrate (https://codigrate.com)

The most famous blue in Istanbul was made a hundred kilometers away. In the sixteenth century the
potters of Iznik, a lake town southeast of the city, fired tiles for the imperial mosques: white
grounds under a clear glaze, painted in cobalt, turquoise and sage, and from around the 1550s in a
red so thick it stands up from the surface when you run a finger over it. Whole interiors went up in
those tiles. The Blue Mosque alone carries more than twenty thousand of them, and the small Rüstem
Pasha Mosque near the spice market is tiled almost to the ceiling.

Codigrate's Istanbul theme takes that tile and holds it up to daylight. The white is the glaze, the
turquoise is the water outside the window, and the reds and coppers are the roofs and the bazaar
across the Golden Horn. What follows takes it apart color by color. It is the second city in this
series after the neon night of [Miami](https://codigrate.com/blog/anatomy-of-the-miami-theme), and the light answer to
it, closer in spirit to the bright mornings of [Everest](https://codigrate.com/blog/anatomy-of-the-everest-theme) and
[Sakura](https://codigrate.com/blog/anatomy-of-the-sakura-theme).

## A City Of Water And Tile

The theme's own description puts it in one sentence: soft daylight and sea breezes, calm turquoise
tones with warm historical accents. You can see both halves in the palette before a file is open.

The cool half is the water. A deep Bosphorus [#087E8E](https://codigrate.com/tools/color/087E8E) runs through the
interface as the accent, a Bosphorus teal [#1190A1](https://codigrate.com/tools/color/1190A1) and a Marmara blue
[#0887B5](https://codigrate.com/tools/color/0887B5) carry most of the code, and an Iznik turquoise
[#12ACC1](https://codigrate.com/tools/color/12ACC1) lights the edges of whatever you select. The warm half is the old
city: a rooftop red [#B8514D](https://codigrate.com/tools/color/B8514D), a copper bazaar
[#B87958](https://codigrate.com/tools/color/B87958), a tulip pink [#C16979](https://codigrate.com/tools/color/C16979) and an Ottoman rose
[#9C6E7C](https://codigrate.com/tools/color/9C6E7C), the colors of tiled roofs, hammered pans and the flower the
Ottomans painted on everything.

The light itself belongs to the water. Every background in the theme is the same teal, washed out
until it is almost white.

## The Harmony: Turquoise Against Terracotta

Put the colors on a wheel and they gather in two places. The teals sit tightly between roughly 185
and 196 degrees, with the cobalt of the variables a little further round at 223. The warm colors
sit on the other side: the rooftop red near 2 degrees, the coppers between 21 and 27, the roses
between 342 and 349. Teal against red is about 175 degrees apart, as close to a
[complementary](https://codigrate.com/blog/harmony-in-opposites) pair as a palette gets without being drawn with a
ruler.

It is the same pairing the Iznik painters relied on, turquoise and cobalt on white with a red to
wake it up, and it works on a screen for the same reason it works on a wall. The red makes the
teal look cooler, the teal makes the red look warmer, and neither has to be loud to be seen. The
greens of the comments and static members, between 92 and 116 degrees, are the cypress trees in
the courtyards: a third, quieter note that never competes with the other two.

## Backgrounds, Washed From Turquoise

A light theme lives on its whites, and Istanbul's are not plain white. Three of them sit on the
same teal hue, around 187 degrees, and only the lightness moves:

- Editor [#FAFDFD](https://codigrate.com/tools/color/FAFDFD), the marble white the code is written on, the brightest
  of the set.
- Window [#DBF0F1](https://codigrate.com/tools/color/DBF0F1), a Bosphorus mist for the tool windows, tabs and panels.
- Surface [#91D1DA](https://codigrate.com/tools/color/91D1DA), a turquoise tile 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 pale wash of
[#E7FAFA](https://codigrate.com/tools/color/E7FAFA) and the current line lifts to [#DEF0F3](https://codigrate.com/tools/color/DEF0F3), a
change you feel more than see. Selection stays in the family: selected text turns a pale sea
foam [#BADFDE](https://codigrate.com/tools/color/BADFDE), and a selected row in the project tree turns sea glass
[#A3DDE5](https://codigrate.com/tools/color/A3DDE5) edged in Iznik turquoise.

The one break is the open tab. The active editor tab sits on an old parchment
[#EFEAD0](https://codigrate.com/tools/color/EFEAD0) with a golden horn underline [#C0AF43](https://codigrate.com/tools/color/C0AF43). In a
room built entirely from cool tones, that single warm page tells you where you are at a glance,
the way Miami used its one teal tab in a room full of pink. Search matches get their own color
too, a lilac haze [#D5C5E1](https://codigrate.com/tools/color/D5C5E1), so a found word never looks like a selected one.

## One Foreground, Several Voices

The text is not black. Code is written in a midnight strait [#083A41](https://codigrate.com/tools/color/083A41), a teal
so deep it only shows its color next to a true black, at about 12:1 against the editor. That is
plenty to read all day in a bright room, and softer than the hard edge of pure black on pure
white. Secondary text in the interface lifts to [#0E6876](https://codigrate.com/tools/color/0E6876) at about 6: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. They are a cypress green
[#5FA652](https://codigrate.com/tools/color/5FA652), set low on purpose at about 3:1, the quietest color in any file.
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, and the hue alone is enough to tell them apart.

The small parts of the editor stay in character as well. The caret is a muted teal
[#42858E](https://codigrate.com/tools/color/42858E), the line numbers are a grey teal [#7A9DA2](https://codigrate.com/tools/color/7A9DA2),
and the number on the current line darkens to [#165C66](https://codigrate.com/tools/color/165C66), so your place in the
gutter is marked by depth, not by a new color.

## Syntax: Tiles And Rooftops

Open a file and both halves of the city show up at once:

- Keywords, modifiers and booleans in Bosphorus teal [#1190A1](https://codigrate.com/tools/color/1190A1), the most
  frequent colored words in any file, in the color the whole theme is built on.
- Strings, numbers and attribute values in Marmara blue [#0887B5](https://codigrate.com/tools/color/0887B5), a shade
  bluer and a touch stronger, the open sea beyond the strait.
- Variables in a deep Iznik cobalt [#3E64C5](https://codigrate.com/tools/color/3E64C5), the one true blue in the
  palette, the color the tile painters used for their outlines.
- Parameters in rooftop red [#B8514D](https://codigrate.com/tools/color/B8514D), the tiled roofs seen from the Galata
  Tower, warm and easy to spot where a function takes its input.
- Methods, fields and properties in a dark copper [#AA784F](https://codigrate.com/tools/color/AA784F), and attributes
  in copper bazaar [#B87958](https://codigrate.com/tools/color/B87958), the pans hanging in the Grand Bazaar.
- Tags and CSS selectors in tulip pink [#C16979](https://codigrate.com/tools/color/C16979), and annotations in
  Ottoman rose [#9C6E7C](https://codigrate.com/tools/color/9C6E7C).
- Static members in cypress [#4A7A47](https://codigrate.com/tools/color/4A7A47) and global variables in a dusty olive
  [#687A58](https://codigrate.com/tools/color/687A58), the gardens behind the courtyard walls.

Class names, function names, types, constants and operators stay a near black ink
[#131B25](https://codigrate.com/tools/color/131B25) at about 17:1, the darkest color in the theme. Leaving the names
uncolored is what keeps an Istanbul file calm. The eye takes in the shape of a line first, keyword,
name, value, and the tile colors only land where they mean something.

## The Final Product

Here is Istanbul whole again, on the apps it ships for. The marble whites and the midnight teal text read the same in a JetBrains IDE and in Sublime Text, Slack and Ghostty keep that bright morning light around the rest of the day, and Rhino takes it into the modeling viewports.

<!--SHOTS-START-->
<div class="post-shots">
<figure><img src="https://codigrate.com/assets/themes/cities/istanbul-theme/jetbrains-screenshot-1.webp" alt="Istanbul theme in a JetBrains IDE" width="1200" height="787" loading="lazy"><figcaption>JetBrains</figcaption></figure>
<figure><img src="https://codigrate.com/assets/themes/cities/istanbul-theme/sublime-screenshot-1.webp" alt="Istanbul theme in Sublime Text" width="1200" height="787" loading="lazy"><figcaption>Sublime Text</figcaption></figure>
<figure><img src="https://codigrate.com/assets/themes/cities/istanbul-theme/slack-screenshot-1.webp" alt="Istanbul theme in Slack" width="1200" height="787" loading="lazy"><figcaption>Slack</figcaption></figure>
<figure><img src="https://codigrate.com/assets/themes/cities/istanbul-theme/ghostty-screenshot-1.webp" alt="Istanbul theme in Ghostty" width="1200" height="787" loading="lazy"><figcaption>Ghostty</figcaption></figure>
<figure><img src="https://codigrate.com/assets/themes/cities/istanbul-theme/rhino-screenshot-1.webp" alt="Istanbul theme in Rhino" width="1200" height="787" loading="lazy"><figcaption>Rhino</figcaption></figure>
</div>
<!--SHOTS-END-->

## Reading It Back

Taken apart, Istanbul is a tiled wall in daylight. The whites share one teal hue so the turquoise
has somewhere to sit. The language itself is painted in the water, teal for keywords and blue for
values, while the warm reds, coppers and roses of the old city are kept for the parts of a line
you look for: parameters, fields, tags. The one warm tab marks where you are, the comments step
back in cypress green, and the names stay a dark ink so nothing fights the structure.

It suits a bright room and a long day, which is also when the real city looks most like this, the
light coming off the water and the domes across it. Istanbul 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=istanbul).

## Frequently Asked Questions

### What is the Istanbul theme?

Istanbul is one of Codigrate's light city themes, built around the city by day: soft daylight on the water, a breeze off the Bosphorus and the tiles of the old mosques. The editor is a marble white with the faintest trace of teal in it, the text is a deep midnight teal instead of black, and the code is painted in the colors of the city: Iznik turquoise and Marmara blue for the language itself, rooftop red, copper and Ottoman rose for the warm accents, and a cypress green for comments. It reads like a bright morning by the water rather than a plain light mode.

### Why does the Istanbul theme use teal backgrounds instead of plain white?

Because a flat white would leave the turquoise with nothing to belong to. Istanbul builds its light from one teal hue, around 187 degrees: the editor is a marble white #FAFDFD, the tool windows a Bosphorus mist #DBF0F1 and the outer frame a turquoise tile #91D1DA. The keywords, strings and accent on top 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 Istanbul?

They come in two families. The cool one is the water and the tiles: a Bosphorus teal for keywords, a Marmara blue for strings and numbers, and a deep Iznik cobalt for variables. The warm one is the old city: rooftop red for parameters, copper for methods, fields and attributes, tulip pink for tags and Ottoman rose for annotations. Names such as classes and functions stay a near black ink, and comments drop to a cypress green, so the structure of a line is clear before the color is.

### Is a light theme like Istanbul good for long coding sessions?

In a bright room, yes. The editor text is a midnight teal #083A41 at about 12:1 against the marble white background, dark enough to read all day without the hard edge of pure black on pure white, and the names in your code are a near black ink at about 17:1. The syntax colors stay in a calm middle range rather than at screen primaries, which keeps a page full of keywords from flickering. In a dim room a dark theme will still feel softer, so many people keep Istanbul for daytime and switch at night.
