Dark theme support

.github/workflows/build-types.yml

@@ -0,0 +1,28 @@
+name: Test Type Generation from Schemas
+
+on:
+  pull_request:
+    paths:
+      - schema/
+
+jobs:
+  build-pydantic:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      id: checkout_repository
+      uses: actions/checkout@v4
+      with:
+        sparse-checkout: schema
+        fetch-depth: 1
+    - name: Install datamodel-code-generator
+      id: install_code_generator
+      run: |
+        python -m venv ls-env
+        source ls-env/bin/activate
+        pip install datamodel-code-generator
+    - name: Generate Pydantic types
+      id: generate_pydantic_types
+      run: |
+        source ls-env/bin/activate
+        datamodel-codegen --input schema/ --input-file-type jsonschema --output GEN/ --use-default

README.md

@@ -24,7 +24,7 @@ related, web-based packages. The packages are seperated in two types:
 | ------------- | ------ |
 | 0.1.0–0.2.1   | 2.1.0  |
 | 0.3.0–0.4.2   | 2.2.0  |
-| 0.5.0         | 3.0.2  |
+| 0.5.0-0.6.0   | 3.0.2  |
 
 Moreover, the default branches of both repositories should be compatible but might experience regression.
 

applications/klighd-cli/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kieler/klighd-cli",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "Standalone web view for klighd-core diagrams",
     "author": "KIELER <[email protected]>",
     "license": "EPL-2.0",
@@ -31,7 +31,7 @@
         "socket": "node ./lib/main.js --ls_port=5007"
     },
     "dependencies": {
-        "@kieler/klighd-core": "^0.5.0",
+        "@kieler/klighd-core": "^0.6.0",
         "buffer": "^6.0.3",
         "commander": "^8.1.0",
         "crypto-browserify": "^3.12.0",

applications/klighd-cli/src/services/connection.ts

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2021 by
+ * Copyright 2021-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -17,9 +17,9 @@
 
 import * as rpc from 'vscode-ws-jsonrpc'
 import * as lsp from 'vscode-languageserver-protocol'
-import { Connection, NotificationType, ActionMessage } from '@kieler/klighd-core'
+import { Connection, NotificationType, ActionMessage, ColorThemeKind } from '@kieler/klighd-core'
 import { showPopup } from '../popup'
-/* global WebSocket */
+/* global WebSocket, window */
 
 type GeneralMessageParams = [string, 'info' | 'warn' | 'error']
 
@@ -158,8 +158,15 @@ export class LSPConnection implements Connection {
     async sendInitialize(persistedData: Record<string, any>): Promise<void> {
         if (!this.connection) return
 
+        // notify the server about the preferred colors, depending on if the OS prefers light (default) or dark theme.
+        let themeKind = ColorThemeKind.LIGHT
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            // dark mode
+            themeKind = ColorThemeKind.DARK
+        }
+
         const { method } = lsp.InitializeRequest.type
-        // The standalone view does not really has any LSP capabilities
+        // The standalone view does not really have any LSP capabilities
         const initParams: lsp.InitializeParams = {
             processId: null,
             workspaceFolders: null,
@@ -168,6 +175,9 @@ export class LSPConnection implements Connection {
             capabilities: {},
             initializationOptions: {
                 clientDiagramOptions: persistedData,
+                clientColorPreferences: {
+                    kind: themeKind,
+                },
             },
         }
 

applications/klighd-cli/src/styles/main.css

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2021 by
+ * Copyright 2021-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -22,6 +22,11 @@
     --color-accent-blue: #1992d4;
     --color-background: #f7f7f7;
 }
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-background: #1e1e1e;
+    }
+}
 
 body {
     margin: 0;

applications/klighd-vscode/package.json

@@ -2,7 +2,7 @@
     "name": "klighd-vscode",
     "displayName": "KLighD Diagrams",
     "description": "KLighD diagram support for Visual Studio Code",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "publisher": "kieler",
     "author": "KIELER <[email protected]>",
     "icon": "icon.png",
@@ -152,8 +152,8 @@
     "scripts": {
         "clean": "rimraf dist klighd-vscode.vsix",
         "lint": "eslint .",
-        "build": "webpack --mode development --devtool eval-source-map",
-        "watch": "webpack --watch --mode development --devtool eval-source-map",
+        "build": "webpack --mode production --devtool false",
+        "watch": "webpack --watch --mode development",
         "package": "vsce package --yarn --baseImagesUrl https://github.com/kieler/klighd-vscode/raw/HEAD/applications/klighd-vscode -o klighd-vscode.vsix",
         "predistribute": "yarn run package",
         "distribute": "yarn run distribute:vsce && yarn run distribute:ovsx",
@@ -177,7 +177,7 @@
         "webpack-cli": "^5.1.4"
     },
     "dependencies": {
-        "@kieler/klighd-core": "^0.5.0",
+        "@kieler/klighd-core": "^0.6.0",
         "inversify": "^6.0.2",
         "nanoid": "^3.1.23",
         "reflect-metadata": "^0.2.1",

applications/klighd-vscode/src/extension.ts

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2021-2023 by
+ * Copyright 2021-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -18,7 +18,7 @@
 // See https://stackoverflow.com/questions/37534890/inversify-js-reflect-hasownmetadata-is-not-a-function
 import 'reflect-metadata'
 // The other imports.
-import { DebugOptions, SetRenderOptionAction } from '@kieler/klighd-core'
+import { ChangeColorThemeAction, ColorThemeKind, DebugOptions, SetRenderOptionAction } from '@kieler/klighd-core'
 import { diagramType } from '@kieler/klighd-core/lib/base/external-helpers'
 import { Action, ActionMessage, isAction } from 'sprotty-protocol'
 import { registerLspEditCommands } from 'sprotty-vscode'
@@ -58,6 +58,8 @@ export function activate(context: vscode.ExtensionContext): void {
                 )
                 return
             }
+            // add color preferences to the client's init message
+            setColorTheme(client)
             const storageService = new StorageService(mementoForPersistence, client)
             client.onDidChangeState((stateChangedEvent) => {
                 if (stateChangedEvent.newState === State.Running) {
@@ -78,6 +80,7 @@ export function activate(context: vscode.ExtensionContext): void {
                         registerCommands(webviewPanelManager, context)
                         registerLspEditCommands(webviewPanelManager, context, { extensionPrefix: 'klighd-vscode' })
                         registerTextEditorSync(webviewPanelManager, context)
+                        registerChangeColorTheme(webviewPanelManager)
 
                         // Handle notifications that are KLighD specific extensions of the LSP for this LSClient.
                         LspHandler.init(client)
@@ -193,3 +196,70 @@ function isLanguageClient(client: unknown): client is LanguageClient {
 function isFileEndingsArray(array: unknown): array is string[] {
     return Array.isArray(array) && array.every((val) => typeof val === 'string')
 }
+
+/**
+ * Modify the initialization options to send VSCode's current theme.
+ */
+function setColorTheme(client: LanguageClient) {
+    const kind = convertColorThemeKind(vscode.window.activeColorTheme.kind)
+    // const foreground = new vscode.ThemeColor('editor.foreground')
+    // const background = new vscode.ThemeColor('editor.background')
+    // const highlight = new vscode.ThemeColor('focusBorder')
+    // there is no API to get the color of the current theme for these colors, so just hardcode these here.
+    // from https://github.com/microsoft/vscode/blob/main/extensions/theme-defaults/themes/light_vs.json
+    // and https://github.com/microsoft/vscode/blob/main/extensions/theme-defaults/themes/light_modern.json
+    let foreground = '#000000' // editor.foreground
+    let background = '#FFFFFF' // editor.background
+    let highlight = '#005FB8' // focusBorder
+    if (kind === ColorThemeKind.DARK || kind === ColorThemeKind.HIGH_CONTRAST_DARK) {
+        // from https://github.com/microsoft/vscode/blob/main/extensions/theme-defaults/themes/dark_vs.json
+        // and https://github.com/microsoft/vscode/blob/main/extensions/theme-defaults/themes/dark_modern.json
+        foreground = '#D4D4D4' // editor.foreground
+        background = '#1E1E1E' // editor.background
+        highlight = '#0078D4' // focusBorder
+    }
+
+    // Register the current theme in the client's options.
+    client.clientOptions.initializationOptions = {
+        ...client.clientOptions.initializationOptions,
+        clientColorPreferences: {
+            kind,
+            foreground,
+            background,
+            highlight,
+        },
+    }
+}
+
+/**
+ * Hook into VS Code's theme change and notify the webview to check the current colors and send them to the server.
+ */
+function registerChangeColorTheme(manager: KLighDWebviewPanelManager) {
+    // Any future color change should be sent to the KLighD webviews.
+    vscode.window.onDidChangeActiveColorTheme((e: vscode.ColorTheme) => {
+        for (const endpoint of manager.endpoints) {
+            endpoint.sendAction(ChangeColorThemeAction.create(convertColorThemeKind(e.kind)))
+        }
+    })
+}
+
+/**
+ * Convert the vscode.ColorThemeKind to KLighDs own ColorThemeKind.
+ * @param kind VS Code's ColorThemeKind
+ * @returns KLighD'S ColorThemeKind
+ */
+function convertColorThemeKind(kind: vscode.ColorThemeKind): ColorThemeKind {
+    switch (kind) {
+        case vscode.ColorThemeKind.Light:
+            return ColorThemeKind.LIGHT
+        case vscode.ColorThemeKind.Dark:
+            return ColorThemeKind.DARK
+        case vscode.ColorThemeKind.HighContrast:
+            return ColorThemeKind.HIGH_CONTRAST_DARK
+        case vscode.ColorThemeKind.HighContrastLight:
+            return ColorThemeKind.HIGH_CONTRAST_LIGHT
+        default:
+            console.error('error in extension.ts, unknown color theme kind')
+            return ColorThemeKind.LIGHT
+    }
+}

applications/klighd-vscode/src/klighd-webview-reopener.ts

@@ -3,7 +3,7 @@
  *
  * http://rtsys.informatik.uni-kiel.de/kieler
  *
- * Copyright 2022-2023 by
+ * Copyright 2022-2024 by
  * + Kiel University
  *   + Department of Computer Science
  *     + Real-Time and Embedded Systems Group
@@ -35,19 +35,6 @@ export class KlighdWebviewReopener {
             if (activeTextEditor) {
                 const uri = activeTextEditor.document.fileName
                 commands.executeCommand(command.diagramOpen, Uri.file(uri))
-            } else {
-                // Register this an active editor changed to open the diagram then.
-                this.toDispose.push(
-                    window.onDidChangeActiveTextEditor((editor) => {
-                        let uri
-                        if (editor) {
-                            uri = editor.document.uri
-                        }
-                        commands.executeCommand(command.diagramOpen, uri)
-                        // Remove listener again
-                        this.toDispose.forEach((element) => element.dispose())
-                    })
-                )
             }
         }
     }

applications/klighd-vscode/webpack.config.js

@@ -86,7 +86,7 @@ const webviewConfig = {
         filename: "webview.js",
         path: path.resolve(__dirname, "pack"),
     },
-    devtool: "nosources-source-map",
+    devtool: "eval-source-map",
 
     resolve: {
         extensions: [".ts", ".js"],

packages/klighd-core/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kieler/klighd-core",
-    "version": "0.5.0",
+    "version": "0.6.0",
     "description": "Core KLighD diagram visualization with Sprotty",
     "author": "KIELER <[email protected]>",
     "license": "EPL-2.0",
@@ -24,13 +24,15 @@
         "publish:next": "yarn publish --new-version \"$(semver $npm_package_version -i minor)-next.$(git rev-parse --short HEAD)\" --tag next --no-git-tag-version"
     },
     "dependencies": {
-        "@kieler/klighd-interactive": "^0.5.0",
+        "@kieler/klighd-interactive": "^0.6.0",
         "@types/file-saver": "^2.0.7",
+        "elkjs": "^0.8.2",
         "feather-icons": "^4.29.1",
         "file-saver": "^2.0.5",
         "inversify": "^6.0.2",
         "snabbdom": "^3.5.1",
         "sprotty": "^1.3.0",
+        "sprotty-elk": "^1.3.0",
         "sprotty-protocol": "^1.3.0"
     },
     "devDependencies": {