Skip to content

Commit 7da37ca

Browse files
haraldschillyharaldschilly
committed
theme: add cocalc light|dark theme for terminal and editor
1 parent e0929f1 commit 7da37ca

File tree

27 files changed

+451
-91
lines changed

27 files changed

+451
-91
lines changed

‎src/packages/cdn/cm-custom-theme/cocalc-dark.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/*
2+
* This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
3+
* License: MS-RSL – see LICENSE.md for details
4+
*
5+
* CoCalc Dark theme for CodeMirror
6+
* Based on CoCalc's dark color scheme
7+
*/
8+
9+
.cm-s-cocalc-dark.CodeMirror {
10+
background: #434343;
11+
color: #c0d4f0;
12+
}
13+
14+
.cm-s-cocalc-dark div.CodeMirror-selected {
15+
background: #5a5a5a;
16+
}
17+
18+
.cm-s-cocalc-dark .CodeMirror-line::selection,
19+
.cm-s-cocalc-dark .CodeMirror-line > span::selection,
20+
.cm-s-cocalc-dark .CodeMirror-line > span > span::selection {
21+
background: #5a5a5a;
22+
}
23+
24+
.cm-s-cocalc-dark .CodeMirror-line::-moz-selection,
25+
.cm-s-cocalc-dark .CodeMirror-line > span::-moz-selection,
26+
.cm-s-cocalc-dark .CodeMirror-line > span > span::-moz-selection {
27+
background: #5a5a5a;
28+
}
29+
30+
.cm-s-cocalc-dark .CodeMirror-gutters {
31+
background: #3a3a3a;
32+
border-right: 1px solid #505050;
33+
}
34+
35+
.cm-s-cocalc-dark .CodeMirror-guttermarker {
36+
color: #ff9966;
37+
}
38+
39+
.cm-s-cocalc-dark .CodeMirror-guttermarker-subtle {
40+
color: #707070;
41+
}
42+
43+
.cm-s-cocalc-dark .CodeMirror-linenumber {
44+
color: #808080;
45+
}
46+
47+
.cm-s-cocalc-dark .CodeMirror-cursor {
48+
border-left: 1px solid #c0d4f0;
49+
}
50+
51+
.cm-s-cocalc-dark span.cm-comment {
52+
color: #909090;
53+
font-style: italic;
54+
}
55+
56+
.cm-s-cocalc-dark span.cm-atom {
57+
color: #ffb380;
58+
}
59+
60+
.cm-s-cocalc-dark span.cm-number {
61+
color: #ffb380;
62+
}
63+
64+
.cm-s-cocalc-dark span.cm-property,
65+
.cm-s-cocalc-dark span.cm-attribute {
66+
color: #c0d4f0;
67+
}
68+
69+
.cm-s-cocalc-dark span.cm-keyword {
70+
color: #ff9966;
71+
}
72+
73+
.cm-s-cocalc-dark span.cm-string {
74+
color: #88c070;
75+
}
76+
77+
.cm-s-cocalc-dark span.cm-variable {
78+
color: #c0d4f0;
79+
}
80+
81+
.cm-s-cocalc-dark span.cm-variable-2 {
82+
color: #80afff;
83+
}
84+
85+
.cm-s-cocalc-dark span.cm-def {
86+
color: #b89dd8;
87+
}
88+
89+
.cm-s-cocalc-dark span.cm-bracket {
90+
color: #c0d4f0;
91+
}
92+
93+
.cm-s-cocalc-dark span.cm-tag {
94+
color: #66cccc;
95+
}
96+
97+
.cm-s-cocalc-dark span.cm-link {
98+
color: #80afff;
99+
}
100+
101+
.cm-s-cocalc-dark span.cm-error {
102+
background: #ff9966;
103+
color: #1a1a1a;
104+
}
105+
106+
.cm-s-cocalc-dark .CodeMirror-activeline-background {
107+
background: #4a4a4a;
108+
}
109+
110+
.cm-s-cocalc-dark .CodeMirror-matchingbracket {
111+
color: #434343 !important;
112+
background-color: #80afff !important;
113+
}
114+
115+
.cm-s-cocalc-dark .CodeMirror-nonmatchingbracket {
116+
color: #434343 !important;
117+
background-color: #ff9966 !important;
118+
}

‎src/packages/cdn/cm-custom-theme/cocalc-light.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/*
2+
* This file is part of CoCalc: Copyright © 2025 Sagemath, Inc.
3+
* License: MS-RSL – see LICENSE.md for details
4+
*
5+
* CoCalc Light theme for CodeMirror
6+
* Based on CoCalc's light color scheme with strong contrast
7+
*/
8+
9+
.cm-s-cocalc-light.CodeMirror {
10+
background: #fbfbfb;
11+
color: #1a3a6b;
12+
}
13+
14+
.cm-s-cocalc-light div.CodeMirror-selected {
15+
background: #d9e8f5;
16+
}
17+
18+
.cm-s-cocalc-light .CodeMirror-line::selection,
19+
.cm-s-cocalc-light .CodeMirror-line > span::selection,
20+
.cm-s-cocalc-light .CodeMirror-line > span > span::selection {
21+
background: #d9e8f5;
22+
}
23+
24+
.cm-s-cocalc-light .CodeMirror-line::-moz-selection,
25+
.cm-s-cocalc-light .CodeMirror-line > span::-moz-selection,
26+
.cm-s-cocalc-light .CodeMirror-line > span > span::-moz-selection {
27+
background: #d9e8f5;
28+
}
29+
30+
.cm-s-cocalc-light .CodeMirror-gutters {
31+
background: #fbfbfb;
32+
border-right: 1px solid #e0e0e0;
33+
}
34+
35+
.cm-s-cocalc-light .CodeMirror-guttermarker {
36+
color: #c41c08;
37+
}
38+
39+
.cm-s-cocalc-light .CodeMirror-guttermarker-subtle {
40+
color: #b0b0b0;
41+
}
42+
43+
.cm-s-cocalc-light .CodeMirror-linenumber {
44+
color: #999999;
45+
}
46+
47+
.cm-s-cocalc-light .CodeMirror-cursor {
48+
border-left: 1px solid #1a3a6b;
49+
}
50+
51+
.cm-s-cocalc-light span.cm-comment {
52+
color: #7a7a7a;
53+
font-style: italic;
54+
}
55+
56+
.cm-s-cocalc-light span.cm-atom {
57+
color: #e65100;
58+
}
59+
60+
.cm-s-cocalc-light span.cm-number {
61+
color: #e65100;
62+
}
63+
64+
.cm-s-cocalc-light span.cm-property,
65+
.cm-s-cocalc-light span.cm-attribute {
66+
color: #1a3a6b;
67+
}
68+
69+
.cm-s-cocalc-light span.cm-keyword {
70+
color: #c41c08;
71+
}
72+
73+
.cm-s-cocalc-light span.cm-string {
74+
color: #3d6b2f;
75+
}
76+
77+
.cm-s-cocalc-light span.cm-variable {
78+
color: #1a3a6b;
79+
}
80+
81+
.cm-s-cocalc-light span.cm-variable-2 {
82+
color: #2a5aa6;
83+
}
84+
85+
.cm-s-cocalc-light span.cm-def {
86+
color: #663d99;
87+
}
88+
89+
.cm-s-cocalc-light span.cm-bracket {
90+
color: #1a3a6b;
91+
}
92+
93+
.cm-s-cocalc-light span.cm-tag {
94+
color: #0088a0;
95+
}
96+
97+
.cm-s-cocalc-light span.cm-link {
98+
color: #2a5aa6;
99+
}
100+
101+
.cm-s-cocalc-light span.cm-error {
102+
background: #c41c08;
103+
color: #fbfbfb;
104+
}
105+
106+
.cm-s-cocalc-light .CodeMirror-activeline-background {
107+
background: #f0f5fa;
108+
}
109+
110+
.cm-s-cocalc-light .CodeMirror-matchingbracket {
111+
color: #fbfbfb !important;
112+
background-color: #2a5aa6 !important;
113+
}
114+
115+
.cm-s-cocalc-light .CodeMirror-nonmatchingbracket {
116+
color: #fbfbfb !important;
117+
background-color: #c41c08 !important;
118+
}

‎src/packages/cdn/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
},
1414
"scripts": {
1515
"clean": "rm -rf build node_modules dist",
16-
"build": "rm -rf build dist && mkdir build && cp -rv *.json *.py *.js build/ && cd build && npm ci && mkdir dist && ./setup.py && mv dist .. && cd .. && rm -rf build ",
16+
"build": "rm -rf build dist && mkdir build && cp -rv *.json *.py *.js build/ && cp -rv cm-custom-theme build/ && cd build && npm ci && mkdir dist && ./setup.py && mv dist .. && cd .. && rm -rf build ",
1717
"postinstall": "./postinstall.js",
1818
"test": "../node_modules/.bin/jest",
1919
"prepublishOnly": "npm test"

‎src/packages/cdn/setup.py‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,13 @@
4141
os.symlink(name, dst)
4242
versions[name] = version
4343

44+
# copy custom codemirror themes
45+
custom_themes_src = join("..", "cm-custom-theme")
46+
if exists(custom_themes_src):
47+
custom_themes_dst = "cm-custom-theme"
48+
copytree(custom_themes_src, custom_themes_dst)
49+
print(f"copied custom themes from '{custom_themes_src}' to '{custom_themes_dst}'")
50+
4451
# finally, write the version info such that it can be loaded
4552
with open('index.js', 'w') as out:
4653
out.write(f"""

‎src/packages/frontend/codemirror/css.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ require("codemirror/theme/yeti.css");
6868
require("codemirror/theme/yonce.css");
6969
require("codemirror/theme/zenburn.css");
7070

71+
require("@cocalc/cdn/dist/cm-custom-theme/cocalc-dark.css");
72+
require("@cocalc/cdn/dist/cm-custom-theme/cocalc-light.css");
73+
7174
require("./mode/mediawiki/mediawiki.css");
7275

7376
// Have to strengthen this to "fight off" the adverse buggy global

‎src/packages/frontend/cspell.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
"descr",
9191
"flyoutdragbar",
9292
"flyouts",
93+
"guttermarker",
9394
"immutablejs",
9495
"ipynb",
9596
"isabs",

‎src/packages/frontend/frame-editors/terminal-editor/theme-data.ts‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -50,23 +50,23 @@ export const COLOR_THEMES = {
5050
"cocalc-light": {
5151
comment: "CoCalc Light",
5252
colors: [
53-
"#2d4f8a", // color0: dark blue (based on COCALC_BLUE darkened)
54-
"#d97706", // color1: orange/red for errors (based on COCALC_ORANGE darkened)
55-
"#5b8e3a", // color2: green
56-
"#f59e0b", // color3: yellow/gold (harmonized with COCALC_ORANGE)
57-
"#4474c0", // color4: COCALC_BLUE (main text accent)
58-
"#8b68a6", // color5: purple
59-
"#3e999f", // color6: cyan
60-
"#d0d0d0", // color7: light gray
61-
"#6e8090", // color8: medium gray
62-
"#ea580c", // color9: bright orange (for numbers, based on COCALC_ORANGE)
63-
"#7cb342", // color10: bright green
64-
"#fcc861", // color11: COCALC_ORANGE (bright yellow/gold)
65-
"#6690d2", // color12: lighter blue (from CoCalc theme.ts BLUE)
66-
"#b084cc", // color13: bright purple
67-
"#50c0c8", // color14: bright cyan
68-
"#e8e8e8", // color15: very light gray
69-
"#2d4f8a", // foreground: dark blue (main text, based on COCALC_BLUE)
53+
"#1a3a6b", // color0: stronger dark blue
54+
"#c41c08", // color1: stronger red for errors
55+
"#3d6b2f", // color2: stronger green
56+
"#d97706", // color3: stronger yellow/gold
57+
"#2a5aa6", // color4: BLUE_DD (stronger blue accent)
58+
"#663d99", // color5: stronger purple
59+
"#0088a0", // color6: stronger cyan
60+
"#c0c0c0", // color7: light gray
61+
"#606060", // color8: stronger medium gray
62+
"#e65100", // color9: stronger bright orange
63+
"#558b2f", // color10: stronger bright green
64+
"#f39c12", // color11: stronger golden yellow
65+
"#4474c0", // color12: COCALC_BLUE (blue accent)
66+
"#9d4edd", // color13: stronger bright purple
67+
"#0096c7", // color14: stronger bright cyan
68+
"#d9d9d9", // color15: lighter gray
69+
"#1a3a6b", // foreground: darker blue for main text
7070
"#fbfbfb", // background
7171
],
7272
},

‎src/packages/frontend/i18n/trans/ar_EG.json‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,6 @@
7373
"account.other-settings.default_file_sort.by_name": "الترتيب حسب الاسم",
7474
"account.other-settings.default_file_sort.by_time": "الترتيب حسب الوقت",
7575
"account.other-settings.default_file_sort.label": "ترتيب الملفات الافتراضي",
76-
"account.other-settings.file_explorer.title": "مستكشف الملفات",
7776
"account.other-settings.file_popovers": "<strong>إخفاء النوافذ المنبثقة لعلامات تبويب الملفات:</strong> عدم عرض النوافذ المنبثقة فوق علامات تبويب الملفات",
7877
"account.other-settings.filename_generator.description": "اختر كيفية توليد أسماء الملفات التلقائية. بشكل خاص، لجعلها فريدة أو لتضمين الوقت الحالي.",
7978
"account.other-settings.filename_generator.label": "مولد اسم الملف",
@@ -118,12 +117,16 @@
118117
"account.settings.email-verification.unknown": "غير معروف",
119118
"account.settings.email-verification.verified": "موثوق",
120119
"account.settings.overview.ai": "تهيئة إعدادات وتكاملات المساعد الذكي.",
120+
"account.settings.overview.appearance": "تخصيص التجربة البصرية عبر ثيمات الألوان، الوضع الداكن، اللغة، والإعدادات البصرية.",
121121
"account.settings.overview.billing": "إدارة الاشتراكات والتراخيص ومعلومات الفوترة.",
122-
"account.settings.overview.cloud": "تكوين اتصالات نظام الملفات السحابي.",
123-
"account.settings.overview.editor": "تخصيص سلوك محرر الشيفرة والخطوط والمسافات وخيارات العرض.",
122+
"account.settings.overview.cloud": "إدارة تخزين نظام الملفات السحابي.",
123+
"account.settings.overview.communication": "تفضيلات الإشعارات وإعدادات الاتصال.",
124+
"account.settings.overview.editor": "تخصيص سلوك محرر الأكواد وخيارات التهيئة والمحتوى.",
124125
"account.settings.overview.files": "إدارة الملفات المنشورة والمشاركة العامة.",
126+
"account.settings.overview.keyboard": "اختصارات لوحة المفاتيح",
127+
"account.settings.overview.keys": "إدارة مفاتيح API وإعداد مفاتيح SSH.",
125128
"account.settings.overview.licenses": "إدارة تراخيص البرامج وأذونات الوصول.",
126-
"account.settings.overview.other": "إعدادات وخيارات إضافية متنوعة.",
129+
"account.settings.overview.other": "إعدادات وخيارات متنوعة.",
127130
"account.settings.overview.payg": "قم بتكوين الاستخدام والدفع حسب الاستهلاك والفواتير.",
128131
"account.settings.overview.payments": "إدارة طرق الدفع وسجل المعاملات.",
129132
"account.settings.overview.profile": "إدارة معلوماتك الشخصية وصورتك الرمزية وتفاصيل حسابك.",
@@ -968,6 +971,7 @@
968971
"labels.back": "رجوع",
969972
"labels.balance": "الرصيد",
970973
"labels.billing": "الفوترة",
974+
"labels.browser": "المتصفح",
971975
"labels.button.cancel": "إلغاء",
972976
"labels.buttons": "الأزرار",
973977
"labels.change": "تغيير",
@@ -1011,6 +1015,7 @@
10111015
"labels.empty_trash": "إفراغ سلة المهملات",
10121016
"labels.environment": "بيئة",
10131017
"labels.explorer": "المستكشف",
1018+
"labels.file_explorer": "مستكشف الملفات",
10141019
"labels.files": "الملفات",
10151020
"labels.folder": "مجلد",
10161021
"labels.frame-editors.title-bar.save_label": "{type, select, is_public {عام} read_only {للقراءة فقط} other {حفظ}}",
@@ -1134,6 +1139,7 @@
11341139
"labels.terminal": "طرفية",
11351140
"labels.terminal_command": "أمر المحطة",
11361141
"labels.terms_of_service": "شروط الخدمة",
1142+
"labels.theme": "السمة",
11371143
"labels.timetravel": "السفر عبر الزمن",
11381144
"labels.timetravel_title": "عرض محفوظات التحرير الكاملة لهذا المستند",
11391145
"labels.title": "العنوان",

0 commit comments

Comments
 (0)