Monokai色彩方案

在编程的早期,开发者一直在寻找一个能够使工作更轻松、更吸引人的环境。Monokai,以其鲜艳的色彩方案,成为了编辑器、IDE和终端中的热门选择。这篇文章深入探讨了这一标志性色彩方案的起源、发展和持久的吸引力。

Monokai的诞生

Monokai的旅程始于2006年,由荷兰设计师兼开发者Wimer Hazenberg发起。Wimer对现有的缺乏灵感、过于饱和的编辑器主题感到沮丧,决定创造一些新鲜且实用的东西——一个优先考虑可读性和美学的色彩方案。他的工具选择是macOS上的TextMate,在那里他尝试了一个深色背景和明亮、精心挑选的颜色:用于关键字的粉色,用于字符串的香草黄色,以及微妙的对比来突出代码结构,同时降低不太重要的元素(如注释)的亮度。

1
2
3
4
5
6
7
8
9
10
11
const fibonacci = (n: number) => {
console.log(`Called fibonacci(${n})`);

// Base case: return n if 0 or 1
if (n <= 1) {
return n;
}

// Recursive calls
return fibonacci(n - 1) + fibonacci(n - 2);
};

原始Monokai颜色的示例代码

Wimer在TextMate的wiki上分享了他的主题,以他自己的互联网别名命名,没有多想。令他惊讶的是,Monokai迅速在编程社区中流行开来,与寻求新鲜替代品的开发者产生共鸣。从那时起,Monokai作为开发者友好、视觉上吸引人的方案的声誉传播开来。

Monokai:一个有自己生命的名称

“Monokai”这个名字常常引起好奇,因为它听起来有点日本味,导致许多人将其与极简主义或禅宗美学联系起来。然而,它的真实起源更多是基于感觉。

“Monokai”是在2003年左右作为Wimer的互联网别名和公司名称创建的,它没有特定的含义,主要是“感觉对了”。然而,它也代表了一种个人化的项目方法。“Mono”部分表示专注于个人共鸣的想法,反映了设计和开发中的个人努力。与此同时,“kai”部分有一个有趣的声音和愉快的响声,“AI”微妙地暗示了他在人工智能方面的背景。

从一个个人项目名称开始,现在意外地与一个色彩方案联系在一起。要了解更多关于Wimer在他的Monokai别名下的个人项目,请访问monokai.com。

混音和非官方移植

随着Monokai在开发世界中的传播,它激发了无数混音和改编,产生了市场上几乎每个编辑器的非官方“Monokai启发”主题。Textmate主题的开放性质使其易于开发人员适应和定制以满足其特定需求,在各种编辑器中创造独特的衍生产品。虽然这些改编并非由Wimer创建,但它们的多样性突出了该方案对全球开发人员的影响和影响力。

Sublime Text的一个决定性时刻

当Monokai成为Sublime Text的默认主题时,Monokai的受欢迎程度又跃升了一个台阶,Sublime Text是一个以其时尚设计和速度而闻名的编辑器。这一合作使Monokai面向更广泛的受众,将其确立为全球开发人员的首选主题。对许多人来说,Sublime和Monokai成为了新流线型代码编辑方法的不可分割的象征。

Monokai Pro:最终的现代版本

随着Monokai的持续受欢迎,Wimer看到了完善和扩展他原始主题的机会。2017年,他推出了Monokai Pro——原始Monokai的现代、功能丰富的演变。

Monokai Pro不仅仅是一个简单的更新;它包括一系列增强功能,以满足当代开发人员的需求,包括用户界面设计和定制图标包。Monokai Pro提供几种颜色过滤器,如“Spectrum”、“Ristretto”和经典的“Monokai”,现在重新命名为Monokai Classic。这些选项允许开发人员选择最适合其工作空间的外观和感觉。

1
2
3
4
5
6
7
8
9
10
11
async function fetchJson(url: string): Promise<any> {
const response = await fetch(url);

if (!response.ok) throw new Error('Invalid response');

return await response.json();
}

fetchJson(`${API}/data.json`)
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));

Monokai Pro颜色的示例代码

Monokai Pro包括70多个定制图标包

与许多将UI和语法高亮分离的主题不同,Monokai Pro遵循集成设计方法,其中界面的每个元素都是协调一致且视觉上统一的。Wimer亲自使用并微调Monokai Pro,随着每次迭代对其进行演变,以保持其美学和功能吸引力。这种亲力亲为的方法使Monokai Pro保持其起源的真实性,同时适应现代编码的需求。

关于设计色彩方案的注释

选择正确的颜色是一项复杂的任务。在文本编辑器中,您希望颜色具有相同的亮度,以便代码可以轻松阅读。然而,并没有一个确定的数学公式来确定颜色的感知“亮度”,即使是像CIELAB和OKLAB这样的既定色彩空间也有其局限性。虽然可以建议使用对比度比率工具来提高可读性,但它们并不普遍适用于所有颜色组合。

在数学模型中捕捉颜色,以精确匹配我们的感知是一种幻觉。我们对颜色的感知是复杂和主观的,即使是最复杂的方法也无法完全在算法中捕捉到它。这使得选择色彩方案更多是一种艺术而不是科学,设计师依靠直觉、经验和反馈来创造和谐且功能性的组合。

Monokai在流行文化中的地位

Monokai的影响力甚至扩展到了科技世界之外。它出现在《硅谷》、《黑客军团》等节目中,其可识别的颜色为屏幕上的开发人员环境增添了真实性。

它的色彩方案已被插画家、生成艺术家和各种领域的设计师使用。

Monokai Pro扩展:引入浅色主题

多年来,开发人员一直在请求Monokai Pro的浅色主题。接受这一挑战意味着不仅仅是亮化颜色——在浅色背景上对比度表现不同,大胆的色调很容易变得压倒性。

经过广泛的测试,Wimer在2024年引入了Monokai Pro Light及其新的“Sun”过滤器,旨在在明亮的环境中保持Monokai的清晰度和可读性。Monokai Pro Light提供温暖、平衡的色调,既易于眼睛又充满活力,使其非常适合自然光线的空间。浅色主题扩展了Monokai的吸引力,同时保持其深思熟虑的功能性设计,为开发人员提供了他们熟悉的经验,以一个清新、浅色的调色板。

1
2
3
4
5
6
7
function isPalindrome(str: string): boolean {
const sanitized = str.replace(/[W_]/g, '').toLowerCase();

return sanitized === sanitized.split('').reverse().join('');
}

console.log(isPalindrome('never odd or even')); // true

Monokai Pro Light颜色的示例代码

展望未来

从一个简单的TextMate主题到一个标志性工具,Monokai的旅程突出了编码中深思熟虑的设计力量。Monokai Pro仍然是Wimer愿景的真实演变,不断适应现代软件需求,同时忠于其在清晰度和简洁性方面的根源。随着代码的演变,Monokai也在演变——这是如何精心设计可以增强开发人员工作空间中功能和流程的持久提醒。

文章来源:https://www.monokai.pro/monokai/