aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-25 19:54:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(desktop): custom syntax colors

Browse Source
This commit is contained in:
Adam
2025-11-07 12:48:12 -06:00
parent 4463d319c9
commit 3a1d1a6284
9 changed files with 1622 additions and 3591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/ui/src/components/code.tsx
View File

@@ -14,7 +14,8 @@ export function Code<T>(props: CodeProps<T>) {
createEffect(() => {
const instance = new File<T>({
theme: { dark: "oc-1-dark", light: "oc-1-light" }, // or any Shiki theme
theme: { dark: "oc-1-dark", light: "oc-1-light" },
// theme: { dark: "pierre-dark", light: "pierre-light" },
overflow: "wrap", // or 'scroll'
themeType: "system", // 'system', 'light', or 'dark'
disableFileHeader: true,

3937
packages/ui/src/components/diff.tsx
View File

File diff suppressed because it is too large Load Diff

5
packages/ui/src/styles/tailwind/colors.css
View File

@@ -196,15 +196,20 @@
--color-icon-diff-delete-base: var(--icon-diff-delete-base);
--color-icon-diff-delete-hover: var(--icon-diff-delete-hover);
--color-syntax-comment: var(--syntax-comment);
--color-syntax-regexp: var(--syntax-regexp);
--color-syntax-string: var(--syntax-string);
--color-syntax-keyword: var(--syntax-keyword);
--color-syntax-function: var(--syntax-function);
--color-syntax-number: var(--syntax-number);
--color-syntax-operator: var(--syntax-operator);
--color-syntax-variable: var(--syntax-variable);
--color-syntax-property: var(--syntax-property);
--color-syntax-parameter: var(--syntax-parameter);
--color-syntax-type: var(--syntax-type);
--color-syntax-constant: var(--syntax-constant);
--color-syntax-punctuation: var(--syntax-punctuation);
--color-syntax-namespace: var(--syntax-namespace);
--color-syntax-enum: var(--syntax-enum);
--color-syntax-success: var(--syntax-success);
--color-syntax-warning: var(--syntax-warning);
--color-syntax-critical: var(--syntax-critical);

59
packages/ui/src/styles/theme.css
View File

@@ -268,20 +268,25 @@
--icon-diff-add-active: var(--mint-light-12);
--icon-diff-delete-base: var(--ember-light-10);
--icon-diff-delete-hover: var(--ember-light-11);
--syntax-comment: #8a8a8a;
--syntax-string: #d68c27;
--syntax-keyword: #3b7dd8;
--syntax-function: #d1383d;
--syntax-number: #3d9a57;
--syntax-operator: #d68c27;
--syntax-variable: #b0851f;
--syntax-type: #318795;
--syntax-constant: #953170;
--syntax-punctuation: #1a1a1a;
--syntax-success: var(--apple-dark-10);
--syntax-comment: var(--text-weaker);
--syntax-regexp: var(--text-base);
--syntax-string: var(--mint-light-11);
--syntax-keyword: var(--text-weak);
--syntax-primitive: var(--ember-light-11);
--syntax-operator: var(--text-weak);
--syntax-variable: var(--text-strong);
--syntax-property: var(--lilac-light-11);
--syntax-type: var(--cobalt-light-11);
--syntax-constant: var(--lilac-light-11);
--syntax-punctuation: var(--text-weak);
--syntax-object: var(--blue-light-11);
--syntax-success: var(--apple-light-10);
--syntax-warning: var(--amber-light-10);
--syntax-critical: var(--ember-dark-9);
--syntax-info: var(--lilac-dark-11);
--syntax-critical: var(--ember-light-9);
--syntax-info: var(--lilac-light-11);
--syntax-diff-add: var(--mint-light-11);
--syntax-diff-delete: var(--ember-light-11);
--syntax-unknown: red;
--markdown-heading: #d68c27;
--markdown-text: #1a1a1a;
--markdown-link: #3b7dd8;
@@ -503,20 +508,24 @@
--icon-diff-add-active: var(--mint-dark-11);
--icon-diff-delete-base: var(--ember-dark-9);
--icon-diff-delete-hover: var(--ember-dark-10);
--syntax-comment: #808080;
--syntax-string: #9d7cd8;
--syntax-keyword: #fab283;
--syntax-function: #e06c75;
--syntax-number: #7fd88f;
--syntax-operator: #f5a742;
--syntax-variable: #e5c07b;
--syntax-type: #56b6c2;
--syntax-constant: #c2569a;
--syntax-punctuation: #eeeeee;
--syntax-comment: var(--text-weaker);
--syntax-regexp: var(--text-base);
--syntax-string: var(--mint-dark-11);
--syntax-keyword: var(--text-weak);
--syntax-primitive: var(--ember-dark-11);
--syntax-operator: var(--text-weak);
--syntax-variable: var(--text-strong);
--syntax-property: var(--lilac-dark-11);
--syntax-type: var(--cobalt-dark-11);
--syntax-constant: var(--lilac-dark-11);
--syntax-punctuation: var(--text-weak);
--syntax-object: var(--blue-dark-11);
--syntax-success: var(--apple-dark-10);
--syntax-warning: var(--amber-dark-10);
--syntax-critical: var(--ember-dark-10);
--syntax-info: var(--lilac-dark-10);
--syntax-critical: var(--ember-dark-9);
--syntax-info: var(--lilac-dark-11);
--syntax-diff-add: var(--mint-dark-11);
--syntax-diff-delete: var(--ember-dark-11);
--markdown-heading: #9d7cd8;
--markdown-text: #eeeeee;
--markdown-link: #fab283;