What are the steps for personalizing themes in the Monaco editor?

I'm currently working on a code editor with Monaco. The syntax highlighting in Monaco for Javascript and Typescript only highlights keywords as dark blue, strings as brown, and numbers as light greenish-yellow.

My goal is to customize the vs-dark theme so that variables are displayed in light blue, types in dark green, and functions in yellow. Will the following code achieve this?

monaco.editor.defineTheme('custom', {
    base: 'vs-dark',
    inherit: true,
    rules: [
      {
        token: "identifier",
        foreground: "#9CDCFE"
      },
      {
        token: "identifier.function",
        foreground: "#DCDCAA"
      },
      {
        token: "type",
        foreground: "#1AAFB0"
      },
    ],
    colors: {}
    });
monaco.editor.setTheme('custom')

If possible, could you provide me with a list of all available tokens to further enhance my customization options?

Answer №1

A partial solution is possible. While you may not be able to highlight function names separately from variables, you have the option to create a custom tokenizer for JS (though it may be considered overkill) in order to support different colors for function names.

For your convenience, here is a repository containing various monaco-editor themes to experiment with and discover other customizable tokens.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a "Type expected" error in NPM when compiling a React/Next.js project following the integration of use-places

While building my React/Next.js project, I encountered an error. Even after attempting to open VS Code as an administrator, the issue persisted. ./node_modules/use-places-autocomplete/dist/index.d.ts:21:24 Type error: Type expected. 19 | export type S ...

How can I set up a button to allow the user to log out of MetaMask when clicked?

Currently, I am developing a decentralized application (dapp) and have successfully added a sign-in functionality using ether js. However, I now need to implement a logout feature that triggers when a user clicks on a button to disconnect their connected M ...

The 'cookies' property is not found on the 'Request' type

Currently, I am attempting to access a cookie within a NestJS controller. I have been referencing the documentation found at https://docs.nestjs.com/techniques/cookies#use-with-express-default Below is my implementation: import { Controller, Get, Render, ...

Encountering a 404 error for core.js and browser.js while loading an Angular 2 app through system.src.js

I am new to Angular2 and have followed the Angular2 quickstart and tutorial to get started. Just to provide some context, when a user clicks on a link in the top navigation bar of my webapp, it triggers a server side request. The resulting page returned t ...

Exploring the concept of object destructuring in Typescript with imports

Currently, I am in the process of developing the type system for @masala/parser. This allows me to customize the index.d.ts file to fit my needs. When using this as a user, I can: import masala from '@masala/parser' let {C, Stream, F} = masala; ...

Develop customizable enumerations for use in expandable interfaces

Situation: My objective is to devise a strategy for building scalable state machines in TypeScript using the TypeState library. TypeState offers a typesafe state machine for Typescript, which while not directly related to my current issue, serves as a good ...

Navigating through different components within a single page

Each segment of my webpage is a distinct component, arranged consecutively while scrolling e.g.: <sectionA></sectionA> <sectionB></sectionB> <sectionC></sectionC> All the examples I've come across involve creating ...

angular2 ngif does not effectively conceal HTML elements when set to false

In the HTML file, I have the following code: <p *ngIf="!checklistsready"> not ready </p> <p *ngIf="checklistsready"> Ready </p> And in my TypeScript file, it looks like this: checklistsready: boolean = false; constructor( ...

Angular Leaflet area selection feature

Having an issue with the leaflet-area-select plugin in my Angular9 project. Whenever I try to call this.map.selectArea, VSCode gives me an error saying that property 'selectArea' does not exist on type 'Map'. How can I resolve this? I& ...

Storing information retrieved from the API for use in different modules

Trying to extract data from a WEB API service using Angular 8 has been quite challenging for me. A service I created makes the API call: return this.http.get<UserSession>(uri) .pipe(map((json: UserSession) => this.EntryFormAdapter(json))); Th ...

Discovering the JavaScript source file for a package using WebStorm and TypeScript

In my TypeScript project, there is a usage of Express with the following method: response.send('Hello'); I am interested in exploring the implementation of the send() method. However, when I try to navigate to the source code by ctrl+clicking o ...

As I embark on building my web application using next.js, I begin by importing firebase from the "firebase" package. Unfortunately, a particular error unexpectedly surfaces in the terminal

I am currently developing a next.js web application and I have decided to utilize firebase for both database management and authentication. However, when attempting to import firebase in a specific file, I encountered the following error: Error - ./firebas ...

Ways to resolve issue with a build script that is missing when deploying Cypress in GitHub Actions

I recently attempted to implement a GitHub action to run Cypress tests on my app. Here is the configuration of my workflow file: name: Cypress Tests on: [push] jobs: cypress-run: runs-on: ubuntu-latest defaults: run: working-dire ...

“What is the process of setting a referenced object to null?”

Here is an example of the code I'm working with: ngOnInit{ let p1 : Person = {}; console.log(p1); //Object { } this.setNull<Person>(p1); console.log(p1); //Object { } } private setNull<T>(obj : T){ obj = null; } My objective is to ...

Accessing embedded component within an Angular template

I have a ng-template that I utilize to generate a modal with a form on top of one of my other components like this: <div> <h1>Main component content...</h1> <button (click)="modals.show(newthingmodal)">Create New T ...

What exactly entails static site generation?

I have been exploring the concept of static site generation (SSG). The interesting question that arises is how SSG can fetch data at build time. In my latest application, I implemented an event handler to retrieve data based on a user's search keyword ...

Hey there world! I seem to be stuck at the Loading screen while trying to use Angular

A discrepancy in the browsers log indicates node_modules/angular2/platform/browser.d.ts(78,90): error TS2314: Generic type 'Promise' is missing 2 type arguments. ...

Challenges in Power BI Custom Visual Development: Trouble setting height for div elements

Currently, I am working on creating a custom visual for Power BI that includes a leaflet map within a div element. However, the issue arises when I fail to set a specific height for the map, resulting in an empty visual. I have managed to set a fixed heigh ...

Maximize the use of the tailwind @apply feature within CSS modules in Next.js for

I have successfully integrated Tailwind CSS into my Next.js site following the steps in the official guide available at this link. However, I encountered an issue when attempting to use the @apply method within a CSS module on a component level. For insta ...

Managing Geolocation in Ionic2 presenting challenges

Attempting to utilize Geolocation in ionic2 for device location access. Referred to the official documentation on https://ionicframework.com/docs/native/geolocation/. Successfully installed the necessary packages: $ ionic plugin add cordova-plugin-geoloca ...