codeshelf/dev.html at main · TwilightCoders/codeshelf · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="node_modules/@vscode/codicons/dist/codicon.css">
  <link rel="stylesheet" href="media/styles/main.css">
  <title>CodeShelf Dev</title>
  <style>
    /* Mock VS Code theme variables for browser preview */
    :root {
      --vscode-editor-background: #1e1e1e;
      --vscode-editor-foreground: #cccccc;
      --vscode-sideBar-background: #252526;
      --vscode-sideBar-foreground: #cccccc;
      --vscode-input-background: #3c3c3c;
      --vscode-input-foreground: #cccccc;
      --vscode-input-border: #3c3c3c;
      --vscode-input-placeholderForeground: #717171;
      --vscode-button-background: #0e639c;
      --vscode-button-foreground: #ffffff;
      --vscode-button-hoverBackground: #1177bb;
      --vscode-focusBorder: #007fd4;
      --vscode-descriptionForeground: #969696;
      --vscode-panel-border: rgba(255,255,255,0.08);
      --vscode-badge-background: #4d4d4d;
      --vscode-badge-foreground: #cccccc;
      --vscode-list-hoverBackground: #2a2d2e;
      --vscode-toolbar-hoverBackground: rgba(90,93,94,0.31);
      --vscode-textLink-foreground: #3794ff;
      --vscode-menu-background: #252526;
      --vscode-menu-foreground: #cccccc;
      --vscode-menu-selectionBackground: #04395e;
      --vscode-menu-border: #454545;
      --vscode-errorForeground: #f44;
      --vscode-scrollbarSlider-background: rgba(121,121,121,0.4);
      --vscode-scrollbarSlider-hoverBackground: rgba(100,100,100,0.7);
      --vscode-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      --vscode-font-size: 13px;
      --vscode-editor-font-family: 'SF Mono', Menlo, Monaco, monospace;
    }

    /* Light theme mock — toggle with: <body class="vscode-light"> or add ?light
       to the URL. Lets us verify the webview reads correctly on a LIGHT theme,
       which is where hardcoded white tints used to disappear. */
    body.vscode-light {
      --vscode-editor-background: #ffffff;
      --vscode-editor-foreground: #1f1f1f;
      --vscode-sideBar-background: #f3f3f3;
      --vscode-sideBar-foreground: #1f1f1f;
      --vscode-input-background: #ffffff;
      --vscode-input-foreground: #1f1f1f;
      --vscode-input-border: #cecece;
      --vscode-input-placeholderForeground: #767676;
      --vscode-button-background: #005fb8;
      --vscode-button-foreground: #ffffff;
      --vscode-button-hoverBackground: #0258a8;
      --vscode-focusBorder: #005fb8;
      --vscode-descriptionForeground: #5f5f5f;
      --vscode-panel-border: rgba(0,0,0,0.12);
      --vscode-badge-background: #cccccc;
      --vscode-badge-foreground: #333333;
      --vscode-list-hoverBackground: #e8e8e8;
      --vscode-toolbar-hoverBackground: rgba(0,0,0,0.06);
      --vscode-textLink-foreground: #005fb8;
      --vscode-menu-background: #ffffff;
      --vscode-menu-foreground: #1f1f1f;
      --vscode-menu-selectionBackground: #cce4ff;
      --vscode-menu-border: #cecece;
      --vscode-errorForeground: #e51400;
      --vscode-scrollbarSlider-background: rgba(100,100,100,0.4);
      --vscode-scrollbarSlider-hoverBackground: rgba(100,100,100,0.7);
    }
  </style>
</head>
<body>
  <!-- Light-theme preview toggle: open dev.html?light to mock a light VS Code theme. -->
  <script>
    if (new URLSearchParams(location.search).has('light')) {
      document.body.classList.add('vscode-light');
    }
  </script>
  <div id="app"></div>

  <!-- Mock extension host. Type-checked source: src/webview/dev/mockHost.ts.
       Must load before the app bundle so window.acquireVsCodeApi is defined. -->
  <script src="out-webview/dev/mockHost.js"></script>
  <script src="out-webview/webview/main.js"></script>
</body>
</html>