improve Dart/Flutter highlighting

[subzero911]

I want local variables (like authResult) to be amber and class members (like _auth) to be deep orange, as in Android Studio: Current VS Code highlighting. All variables are boring white:

Also, grey background is too bright. I found dark navy background is more pleasant to eye. Maybe something like these:

    "workbench.colorCustomizations": {
        "[One Dark Pro]": {
            "editor.background": "#191a20",    
            "editor.lineHighlightBackground": "#22232b",
            "editor.selectionBackground": "#363844",                                         
        }
    },

[Binaryify]

could you provide the code in your screenshot

[subzero911]

Of course

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:chatapp/widgets/auth/auth_form.dart';
import 'package:flutter/services.dart';

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final _auth = FirebaseAuth.instance;
  var _isLoading = false;

  void _submitAuthForm(String email, String username, String password, bool isLogin, BuildContext ctx) async {
    AuthResult authResult;
    try {
      setState(() {
        _isLoading = true;
      });
      if (isLogin) {
        authResult = await _auth.signInWithEmailAndPassword(email: email, password: password);
      } else {
        authResult = await _auth.createUserWithEmailAndPassword(email: email, password: password);
        await Firestore.instance
            .collection('users')
            .document(authResult.user.uid)
            .setData({
          'username': username,
          'email': email,
        });
      }
    } on PlatformException catch (err) {
      var message = 'Error occurred, please check your credentials.';
      if (err.message != null) {
        message = err.message;
      }
      Scaffold.of(ctx).showSnackBar(
        SnackBar(content: Text(message), backgroundColor: Theme.of(context).errorColor),
      );
    } catch (err) {
      print(err);
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      appBar: AppBar(title: Text('Auth')),
      body: AuthForm(_submitAuthForm, _isLoading),
    );
  }
}

[subzero911]

Maybe some color for named parameters also, because white (email: email, password: password) are not very nice too. Named parameters is a frequently used feature in Dart.

[Binaryify]

there have some bad news, I just check the code's token, and found them are same(source.dart), this mean dart extension is defective if I highlight that, there have many highlight error I think you could create a issue to dart repo or follow this PR https://github.com/Dart-Code/Dart-Code/pull/2203

[subzero911]

Hi @Binaryify There are LSP Semantic Tokens introduced in the latest Dart Code update. https://dartcode.org/releases/v3-19/ I believe now you could do it.

[Binaryify]

@subzero911 finally I know how to config the semanticHighlighting how about this

[Binaryify]

but I don't know should I make parameter be light white

[subzero911]

but I don't know should I make parameter be light white

Red parameter is definitely not what I wanted On the previous picture everything is perfect - white parameter name and red value

[Binaryify]

@subzero911 Is that what you want?

[subzero911]

No I wanted it to be like

if it's possible

[Binaryify]

both these are parameter

[subzero911]

:( Then I don't know

[Binaryify]

you can set these in your setting.json to check the effect(need reload when first set)

"editor.semanticTokenColorCustomizations": {
    "rules": {
      "variable:dart":{
        "foreground": "#D19A66"
      },
      "property:dart":{
        "foreground": "#D19A66"
      },
      "annotation:dart":{
        "foreground": "#D19A66"
      },
      "parameter:dart":{
        // "foreground": "#abb2bf"
      },
    }
  },
  "editor.semanticHighlighting.enabled": true,
  "dart.previewLsp": true,

and use this the check the code's scope

[subzero911]

Then it's better to left the parameter white

[Binaryify]

I just update to use new dart sdk, and it look normal now, this might be what you want

[Binaryify]

please check v3.10.10 and confirm if it work fine~ make sure you had this in your setting.json

"editor.semanticHighlighting.enabled": true,
"dart.previewLsp": true,

[subzero911]

I tried it. Nothing changed for Flutter 1.22.6 (no null-safety version I use):

I upgraded to Flutter 2.0.4. Now it looks like:

[Binaryify]

I don't know why after I switch the dart sdk version some time, the highlight will change or I need make the parameter become white again you can add this in your setting.json before I release new version

"editor.semanticTokenColorCustomizations": {
    "rules": {
      "parameter:dart":{
        "foreground": "#abb2bf"
      },
    }
  },

[Binaryify]

v3.10.11 should already fix this, you can check it now

[HadyMash]

Hello @Binaryify, after updating OneDarkPro suddenly all of my variables became amber/orange. I had to downgrade to make them become red again in Dart Code. The way I have VS Code setup with dart code is that parameters are white and bold then variables are red. After this update all of the variables became amber (apart from parameters). I tried to manually set variables to become red to override this change but it didn't work.

I made the parameters bold using the textMateRules customisation option.

Thanks for the help!

[Binaryify]

@HadyMash
you can add this in your setting.json and change the color

"editor.semanticTokenColorCustomizations": {
    "rules": {
      "variable:dart": {
        "foreground": "#E06C75"
      },
      "property:dart": {
        "foreground": "#E06C75"
      },
      "annotation:dart": {
        "foreground": "#E06C75"
      },
      "parameter.label:dart": {
        "foreground": "#E06C75"
      },
    }
  },

and here are the colors you can choose

#e5c07b
#e06c75
#5c6370
#f44747
#56b6c2
#98c379
#ffffff
#7f848e
#abb2bf
#61afef
#c678dd
#d19a66
#BE5046

[HadyMash]

@Binaryify Thanks, it worked!

[tusharsadhwani]

For people trying to find the vivid red colour, it's #EF596F.

[tusharsadhwani]

also @Binaryify i'd suggest going back to red for dart instead of amber, half the file looks yellow/orange now