czeditor/themes/dark.css at main · cyberzilla/czeditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/* ============================================
   CZEditor Dark Theme — Catppuccin Mocha
   ============================================ */
:root {
    /* Backgrounds */
    --bg-main: #1e1e2e;
    --bg-header: rgba(24, 24, 37, 0.85);
    --bg-footer: #11111b;
    --bg-tab: #11111b;
    --bg-tab-active: #1e1e2e;
    --bg-tab-hover: #313244;
    --bg-panel: rgba(30, 30, 46, 0.95);
    --shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.4);

    /* Text */
    --text-main: #cdd6f4;
    --text-muted: #6c7086;

    /* Accent */
    --accent-color: #89b4fa;
    --accent-purple: #cba6f7;

    /* Borders & Selection */
    --border-color: rgba(255, 255, 255, 0.08);
    --selection-bg: rgba(137, 180, 250, 0.3);
    --active-line-bg: rgba(255, 255, 255, 0.07);
    --cursor-color: #f5e0dc;

    /* Surface channel — used for rgba(var(--surface-rgb), alpha) compositing
       Dark theme: white highlights on dark background */
    --surface-rgb: 255, 255, 255;

    /* Semantic colors */
    --color-red: #f38ba8;
    --color-green: #a6e3a1;
    --color-yellow: #f9e2af;
    --color-orange: #fab387;

    /* Specific backgrounds */
    --bg-line-numbers: rgba(0, 0, 0, 0.1);
    --line-num-color: #585b70;
    --line-num-active: #cdd6f4;
    --indent-guide-color: rgba(255, 255, 255, 0.06);
    --indent-guide-active: rgba(255, 255, 255, 0.15);
    --ws-indicator-color: rgba(255, 255, 255, 0.38);
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --bg-checkerboard: rgba(0, 0, 0, 0.2);

    /* Video popover */
    --popover-bg: rgba(24, 24, 37, 0.97);
    --popover-border: rgba(255, 255, 255, 0.1);
    --popover-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

    /* Scrollbar */
    --scrollbar-thumb: rgba(108, 112, 134, 0.35);
    --scrollbar-thumb-hover: rgba(108, 112, 134, 0.55);

    /* Icons */
    --icon-invert: 1; /* Invert black SVGs to white in dark theme */

    /* Syntax Highlighting — Catppuccin Mocha */
    --syn-keyword: #cba6f7;
    --syn-string: #a6e3a1;
    --syn-comment: #6c7086;
    --syn-doccomment: #7f849c;
    --syn-function: #89b4fa;
    --syn-tag: #f38ba8;
    --syn-attr: #f9e2af;
    --syn-number: #fab387;
    --syn-operator: #89dceb;
    --syn-class: #f9e2af;
    --syn-variable: #f38ba8;
    --syn-regex: #fab387;
    --syn-property: #89b4fa;
    --syn-selector: #f38ba8;
    --syn-color: #fab387;
    --syn-pseudo: #cba6f7;
    --syn-decorator: #f9e2af;
    --syn-punctuation: #6c7086;
    --syn-bold: #cdd6f4;
    --syn-italic: #cdd6f4;
    --syn-type: #f9e2af;
    --syn-constant: #fab387;
}

/* Scrollbar — theme-specific */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
    background: var(--bg-main);
}