Theme OpenSCAD preview image with CadHub colors. #365

New Issue

2021-06-15T12:30:21+02:00

Irev-Dev commented

2021-06-15 12:30:21 +02:00

(Migrated from github.com)

@franknoirot dug up this gem
http://forum.openscad.org/Setting-transparent-background-td18272.html

and I've experimented and got something working locally the following is the DeepOcean theme with a bluer background (#333355 instead of #333333)

The background is the primary concern, but we could change all the colors if we wanted.

I'll make a PR when we have colors in mind, now I'll just list the changes needed to be made here.

Make a app/api/src/docker/openscad/cadhubtheme.json file

{
  "name" : "CadHub",
  "index" : 1600,
  "show-in-gui" : true,

  "colors" : {
      "background" :         "#333355",
      "axes-color" :         "#c1c1c1",
      "opencsg-face-front" : "#eeeeee",
      "opencsg-face-back" :  "#0babc8",
      "cgal-face-front" :    "#eeeeee",
      "cgal-face-back" :     "#0babc8",
      "cgal-face-2d" :       "#9370db",
      "cgal-edge-front" :    "#0000ff",
      "cgal-edge-back" :     "#0000ff",
      "cgal-edge-2d" :       "#ff00ff",
      "crosshair" :          "#f0f0f0"
  }
}

add the following line to app/api/src/docker/openscad/Dockerfile
COPY openscad/cadhubtheme.json /usr/share/openscad/color-schemes/render/
Change --colorscheme DeepOcean to --colorscheme CadHub in app/api/src/docker/openscad/runScad.js
note the name is base of the name in the JSON not the name of the JSON file.

@franknoirot dug up this gem http://forum.openscad.org/Setting-transparent-background-td18272.html and I've experimented and got something working locally the following is the DeepOcean theme with a bluer background (`#333355` instead of `#333333`) ![image](https://user-images.githubusercontent.com/29681384/122037356-d6e78980-ce17-11eb-8f46-78ab191feb9b.png) The background is the primary concern, but we could change all the colors if we wanted. I'll make a PR when we have colors in mind, now I'll just list the changes needed to be made here. 1) Make a `app/api/src/docker/openscad/cadhubtheme.json` file ```json { "name" : "CadHub", "index" : 1600, "show-in-gui" : true, "colors" : { "background" : "#333355", "axes-color" : "#c1c1c1", "opencsg-face-front" : "#eeeeee", "opencsg-face-back" : "#0babc8", "cgal-face-front" : "#eeeeee", "cgal-face-back" : "#0babc8", "cgal-face-2d" : "#9370db", "cgal-edge-front" : "#0000ff", "cgal-edge-back" : "#0000ff", "cgal-edge-2d" : "#ff00ff", "crosshair" : "#f0f0f0" } } ``` 2) add the following line to `app/api/src/docker/openscad/Dockerfile` `COPY openscad/cadhubtheme.json /usr/share/openscad/color-schemes/render/` 3) Change `--colorscheme DeepOcean` to `--colorscheme CadHub` in `app/api/src/docker/openscad/runScad.js` note the name is base of the name in the JSON not the name of the JSON file.

Irev-Dev commented

2021-06-15 22:00:08 +02:00

(Migrated from github.com)

Theming for the editor shouldn't be too hard for two reasons, 1) you can base it of another theme and modify it, 2) you can use their dev tools by hitting F1 then pulling up Developer: Inspect Tokens to figure out what tokens you want to change.

Here's some stuff I was playing with at https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors

monaco.editor.defineTheme('myTheme', {
    base: 'vs-dark',
    inherit: true,
    rules: [
        { background: '222222' },
        { token: 'comment', foreground: '5098F1', fontStyle: 'italic' },
        { token: 'keyword', foreground: '8732F2'},
        { token: 'string', foreground: 'DF5CA0'},
    ],
    colors: {
        'editor.background': '#1A1A1D',
    }
});

Theming for the editor shouldn't be too hard for two reasons, 1) you can base it of another theme and modify it, 2) you can use their dev tools by hitting `F1` then pulling up `Developer: Inspect Tokens` to figure out what tokens you want to change. Here's some stuff I was playing with at https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors ``` monaco.editor.defineTheme('myTheme', { base: 'vs-dark', inherit: true, rules: [ { background: '222222' }, { token: 'comment', foreground: '5098F1', fontStyle: 'italic' }, { token: 'keyword', foreground: '8732F2'}, { token: 'string', foreground: 'DF5CA0'}, ], colors: { 'editor.background': '#1A1A1D', } }); ``` ![image](https://user-images.githubusercontent.com/29681384/122115590-fc03e880-ce67-11eb-8c65-c9437a19d72e.png)

franknoirot commented

2021-06-16 08:17:44 +02:00

(Migrated from github.com)

Love it! I don't know why I can't get your code to work in there; whatever I did appears to not recognize the Python comment syntax for some reason.

franknoirot commented

2021-06-16 08:23:56 +02:00

(Migrated from github.com)

False alarm I got myself sorted out, I had left the language: "text/plain" in there by accident.

False alarm I got myself sorted out, I had left the `language: "text/plain"` in there by accident.

😆 1

franknoirot commented

2021-06-16 08:49:24 +02:00

(Migrated from github.com)

Alright @Irev-Dev I just tweaked the colors a bit from those top nav colors because they were vibrating a bit to my eyes when directly on that dark background, and added a foreground attribute to get the default text color matching. Does that look alright to you?

monaco.editor.defineTheme('myTheme', {
    base: 'vs-dark',
    inherit: true,
    rules: [
        { background: '222222' },
        { foreground: 'CFCFD8'},
        { token: 'comment', foreground: '79B2F8', fontStyle: 'italic' },
        { token: 'keyword', foreground: 'A663FA'},
        { token: 'string', foreground: 'F98CC5'},
    ],
    colors: {
        'editor.background': '#1A1A1D',
    }
});

Alright @Irev-Dev I just tweaked the colors a bit from those top nav colors because they were vibrating a bit to my eyes when directly on that dark background, and added a `foreground` attribute to get the default text color matching. Does that look alright to you? ```javascript monaco.editor.defineTheme('myTheme', { base: 'vs-dark', inherit: true, rules: [ { background: '222222' }, { foreground: 'CFCFD8'}, { token: 'comment', foreground: '79B2F8', fontStyle: 'italic' }, { token: 'keyword', foreground: 'A663FA'}, { token: 'string', foreground: 'F98CC5'}, ], colors: { 'editor.background': '#1A1A1D', } }); ``` ![image](https://user-images.githubusercontent.com/23481541/122171156-665b5f80-ce4d-11eb-841a-dd1e8309e20d.png)

👍 1

Irev-Dev commented

2021-06-16 09:01:19 +02:00

(Migrated from github.com)

@franknoirot Yup looks good. I'll get a PR up soon

🚀 1

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: h3n3/cadhub#365