Fspissu/dark theme implementation

.github/workflows/themes-weekly-pull.yml

@@ -0,0 +1,49 @@
+name: themes-weekly-pull
+
+on:
+  schedule:
+    # run every friday at 5AM
+    - cron: '0 5 * * 5'
+  workflow_dispatch:
+
+env:
+  NODE_VERSION: 14.x
+
+jobs:
+  pull-from-jsonbin:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Run themes:pull script
+        run: yarn run themes:pull
+        env:
+          JSONBIN_MASTER_KEY: ${{ secrets.JSONBIN_MASTER_KEY }}
+          JSONBIN_ID: ${{ secrets.JSONBIN_ID }}
+
+      - name: Generate dark tokens
+        run: npx token-transformer scripts/themes/tokens/arduino-tokens.json scripts/themes/tokens/dark.json core,ide-default,ide-dark,theia core,ide-default,ide-dark
+
+      - name: Generate default tokens
+        run: npx token-transformer scripts/themes/tokens/arduino-tokens.json scripts/themes/tokens/default.json core,ide-default,theia core,ide-default
+
+      - name: Run themes:generate script
+        run: yarn run themes:generate
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v4
+        with:
+          commit-message: Updated themes
+          title: Update themes
+          branch: themes/themes-update
+          author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.gitignore

@@ -17,3 +17,7 @@ yarn*.log
 plugins
 # the config files for the CLI
 arduino-ide-extension/data/cli/config
+# the tokens folder for the themes
+scripts/themes/tokens
+# environment variables
+.env

arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -282,7 +282,14 @@ MonacoThemingService.register({
   id: 'arduino-theme',
   label: 'Light (Arduino)',
   uiTheme: 'vs',
-  json: require('../../src/browser/data/arduino.color-theme.json'),
+  json: require('../../src/browser/data/default.color-theme.json'),
+});
+
+MonacoThemingService.register({
+  id: 'arduino-theme-dark',
+  label: 'Dark (Arduino)',
+  uiTheme: 'vs-dark',
+  json: require('../../src/browser/data/dark.color-theme.json'),
 });
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {

arduino-ide-extension/src/browser/data/dark.color-theme.json

@@ -0,0 +1,149 @@
+{
+  "name": "Arduino dark",
+  "type": "dark",
+  "colors": {
+    "list.highlightForeground": "#0ca1a6",
+    "list.activeSelectionForeground": "#dae3e3",
+    "list.activeSelectionBackground": "#434f54",
+    "list.inactiveSelectionForeground": "#dae3e3",
+    "list.inactiveSelectionBackground": "#434f54",
+    "list.hoverBackground": "#1f272a",
+    "progressBar.background": "#005c5f",
+    "editor.background": "#1f272a",
+    "editor.foreground": "#dae3e3",
+    "editor.lineHighlightBackground": "#434f5410",
+    "editor.selectionBackground": "#f1c40f",
+    "editorCursor.foreground": "#434f54",
+    "editorWhitespace.foreground": "#bfbfbf",
+    "editorWidget.background": "#171e21",
+    "focusBorder": "#dae3e3",
+    "menubar.selectionBackground": "#ffffff",
+    "menubar.selectionForeground": "#212121",
+    "menu.selectionBackground": "#dae3e3",
+    "menu.selectionForeground": "#212121",
+    "editorGroupHeader.tabsBackground": "#171e21",
+    "button.background": "#0ca1a6",
+    "titleBar.activeBackground": "#171e21",
+    "titleBar.activeForeground": "#dae3e3",
+    "terminal.background": "#000000",
+    "terminal.foreground": "#e0e0e0",
+    "dropdown.border": "#7fcbcd",
+    "dropdown.background": "#2c353a",
+    "dropdown.foreground": "#dae3e3",
+    "activityBar.background": "#171e21",
+    "activityBar.foreground": "#dae3e3",
+    "activityBar.inactiveForeground": "#4e5b61",
+    "activityBar.activeBorder": "#0ca1a6",
+    "statusBar.background": "#171e21",
+    "secondaryButton.background": "#ff000000",
+    "secondaryButton.foreground": "#dae3e3",
+    "secondaryButton.hoverBackground": "#434f54",
+    "arduino.branding.primary": "#0ca1a6",
+    "arduino.branding.secondary": "#b5c8c9",
+    "arduino.foreground": "#edf1f1",
+    "arduino.output.foreground": "#ffffff",
+    "arduino.output.background": "#000000",
+    "arduino.toolbar.hoverBackground": "#dae3e3",
+    "sideBar.background": "#101618",
+    "input.background": "#000000",
+    "foreground": "#dae3e3",
+    "settings.headerForeground": "#dae3e3",
+    "tree.indentGuidesStroke": "#374146",
+    "tab.unfocusedActiveForeground": "#dae3e3",
+    "tab.inactiveBackground": "#171e21"
+  },
+  "tokenColors": [
+    {
+      "name": "",
+      "settings": {
+        "foreground": "#dae3e3"
+      }
+    },
+    {
+      "name": "Comments",
+      "scope": "comment",
+      "settings": {
+        "foreground": "#7f8c8d"
+      }
+    },
+    {
+      "name": "Keywords Attributes",
+      "scope": [
+        "storage",
+        "support",
+        "string.quoted.single.c"
+      ],
+      "settings": {
+        "foreground": "#0ca1a6"
+      }
+    },
+    {
+      "name": "literal",
+      "scope": [
+        "meta.function.c",
+        "entity.name.function",
+        "meta.function-call.c",
+        "variable.other"
+      ],
+      "settings": {
+        "foreground": "#F39C12"
+      }
+    },
+    {
+      "name": "punctuation",
+      "scope": [
+        "punctuation.section",
+        "meta.function-call.c",
+        "meta.block.c",
+        "meta.function.c",
+        "variable",
+        "variable.name"
+      ],
+      "settings": {
+        "foreground": "#dae3e3"
+      }
+    },
+    {
+      "name": "function preprocessor",
+      "scope": [
+        "entity.name.function.preprocessor.c",
+        "meta.preprocessor.macro.c"
+      ],
+      "settings": {
+        "foreground": "#569CD6"
+      }
+    },
+    {
+      "name": "constants",
+      "scope": [
+        "string.quoted.double",
+        "string.quoted.other.lt-gt",
+        "constant"
+      ],
+      "settings": {
+        "foreground": "#7fcbcd"
+      }
+    },
+    {
+      "name": "meta keywords",
+      "scope": [
+        "keyword.control",
+        "meta.preprocessor.c"
+      ],
+      "settings": {
+        "foreground": "#C586C0"
+      }
+    },
+    {
+      "name": "numeric preprocessor",
+      "scope": [
+        "meta.preprocessor.macro.c",
+        "constant.numeric.preprocessor.c",
+        "meta.preprocessor.c"
+      ],
+      "settings": {
+        "foreground": "#434f54"
+      }
+    }
+  ]
+}

arduino-ide-extension/src/browser/data/default.color-theme.json

@@ -0,0 +1,149 @@
+{
+  "name": "Arduino default",
+  "type": "default",
+  "colors": {
+    "list.highlightForeground": "#008184",
+    "list.activeSelectionForeground": "#4e5b61",
+    "list.activeSelectionBackground": "#dae3e3",
+    "list.inactiveSelectionForeground": "#4e5b61",
+    "list.inactiveSelectionBackground": "#dae3e3",
+    "list.hoverBackground": "#ecf1f1",
+    "progressBar.background": "#005c5f",
+    "editor.background": "#ffffff",
+    "editor.foreground": "#4e5b61",
+    "editor.lineHighlightBackground": "#434f5410",
+    "editor.selectionBackground": "#f1c40f",
+    "editorCursor.foreground": "#434f54",
+    "editorWhitespace.foreground": "#bfbfbf",
+    "editorWidget.background": "#f7f9f9",
+    "focusBorder": "#7fcbcd",
+    "menubar.selectionBackground": "#ffffff",
+    "menubar.selectionForeground": "#212121",
+    "menu.selectionBackground": "#dae3e3",
+    "menu.selectionForeground": "#212121",
+    "editorGroupHeader.tabsBackground": "#ecf1f1",
+    "button.background": "#7fcbcd",
+    "titleBar.activeBackground": "#006d70",
+    "titleBar.activeForeground": "#f7f9f9",
+    "terminal.background": "#000000",
+    "terminal.foreground": "#e0e0e0",
+    "dropdown.border": "#f7f9f9",
+    "dropdown.background": "#ffffff",
+    "dropdown.foreground": "#4e5b61",
+    "activityBar.background": "#ecf1f1",
+    "activityBar.foreground": "#4e5b61",
+    "activityBar.inactiveForeground": "#bdc7c7",
+    "activityBar.activeBorder": "#008184",
+    "statusBar.background": "#006d70",
+    "secondaryButton.background": "#ff000000",
+    "secondaryButton.foreground": "#008184",
+    "secondaryButton.hoverBackground": "#dae3e3",
+    "arduino.branding.primary": "#008184",
+    "arduino.branding.secondary": "#b5c8c9",
+    "arduino.foreground": "#edf1f1",
+    "arduino.output.foreground": "#ffffff",
+    "arduino.output.background": "#000000",
+    "arduino.toolbar.hoverBackground": "#f7f9f9",
+    "sideBar.background": "#f7f9f9",
+    "input.background": "#ffffff",
+    "foreground": "#4e5b61",
+    "settings.headerForeground": "#4e5b61",
+    "tree.indentGuidesStroke": "#dae3e3",
+    "tab.unfocusedActiveForeground": "#4e5b61",
+    "tab.inactiveBackground": "#ecf1f1"
+  },
+  "tokenColors": [
+    {
+      "name": "",
+      "settings": {
+        "foreground": "#434f54"
+      }
+    },
+    {
+      "name": "Comments",
+      "scope": "comment",
+      "settings": {
+        "foreground": "#95a5a6cc"
+      }
+    },
+    {
+      "name": "Keywords Attributes",
+      "scope": [
+        "storage",
+        "support",
+        "string.quoted.single.c"
+      ],
+      "settings": {
+        "foreground": "#00979D"
+      }
+    },
+    {
+      "name": "literal",
+      "scope": [
+        "meta.function.c",
+        "entity.name.function",
+        "meta.function-call.c",
+        "variable.other"
+      ],
+      "settings": {
+        "foreground": "#D35400"
+      }
+    },
+    {
+      "name": "punctuation",
+      "scope": [
+        "punctuation.section",
+        "meta.function-call.c",
+        "meta.block.c",
+        "meta.function.c",
+        "variable",
+        "variable.name"
+      ],
+      "settings": {
+        "foreground": "#434f54"
+      }
+    },
+    {
+      "name": "function preprocessor",
+      "scope": [
+        "entity.name.function.preprocessor.c",
+        "meta.preprocessor.macro.c"
+      ],
+      "settings": {
+        "foreground": "#9e846d"
+      }
+    },
+    {
+      "name": "constants",
+      "scope": [
+        "string.quoted.double",
+        "string.quoted.other.lt-gt",
+        "constant"
+      ],
+      "settings": {
+        "foreground": "#005C5F"
+      }
+    },
+    {
+      "name": "meta keywords",
+      "scope": [
+        "keyword.control",
+        "meta.preprocessor.c"
+      ],
+      "settings": {
+        "foreground": "#728E00"
+      }
+    },
+    {
+      "name": "numeric preprocessor",
+      "scope": [
+        "meta.preprocessor.macro.c",
+        "constant.numeric.preprocessor.c",
+        "meta.preprocessor.c"
+      ],
+      "settings": {
+        "foreground": "#434f54"
+      }
+    }
+  ]
+}

package.json

@@ -31,8 +31,11 @@
     "reflect-metadata": "^0.1.10",
     "rimraf": "^2.6.1",
     "semver": "^7.3.2",
+    "style-dictionary": "^3.7.0",
     "typescript": "~4.5.5",
     "jsdom": "^11.5.1"
+    "xhr2": "^0.2.1"
+
   },
   "resolutions": {
     "find-git-exec": "0.0.4",
@@ -53,6 +56,8 @@
     "i18n:check": "yarn i18n:generate && git add -N ./i18n && git diff --exit-code ./i18n",
     "i18n:push": "node ./scripts/i18n/transifex-push.js ./i18n/en.json",
     "i18n:pull": "node ./scripts/i18n/transifex-pull.js ./i18n/",
+    "themes:pull": "node ./scripts/themes/theme-tokens-pull.js",
+    "themes:generate": "node ./scripts/themes/theme-generator.js",
     "compose-changelog": "yarn --cwd ./arduino-ide-extension compose-changelog"
   },
   "lint-staged": {