Giter Club home page Giter Club logo

mayukai-theme's Introduction

README

Mayukai Theme

vscode indonesiamessage

heroPreview

Mayukai Theme is dark and yellow bluish mirage theme with bright colors for easy readibility syntax. This theme is inspired from mixed color swatch in Ayu Theme, Material Theme, Monokai, Andromeda, and Gruvbox Darktooth Original Colors. These color are adjusted in Mayukai theme so it suitable for all day long programming work. This theme also included with built-in File Icon Theme called Mayukai Ayu.

Install in VS Code/VS Codium

Open Visual Studio Code Market Place in your Visual Studio Code or VS Codium text editor, and search Mayukai. Hit install button, and after finishing install, go to Preferences > Color Theme > Mayukai Dark or Mayukai Mirage. If you want to use built-in File Icon Theme, go to Preferences > File Icon Theme > Mayukai Ayu.

List of Color Scheme

This Mayukai Theme includes some color scheme for syntax coloring. There are :

  • Mayukai Mirage.
  • Mayukai Semantic Mirage (specially designed for VS Code Semantic Highlighting feature).
  • Mayukai Dark.
  • Mayukai Mirage Gruvbox Darktooth.
  • Mayukai Mono.
  • Mayukai Alucard.
  • Mayukai Sunset.
  • Mayukai Reversal.
  • Mayukai Midnight.

Preview and Screenshot

Some demo for syntax highlighting in JavaScript, CSS, HTML, and JSON file. The recommended font for use with this theme is Iosevka Font or using our custom build font named Iosevka Mayukai.

Mayukai Mirage JavaScript Syntax

Screenshot1

Mayukai Mirage HTML Syntax

Screenshot2

Mayukai Mirage CSS SCSS Syntax

Screenshot3

Mayukai Mirage JSON Syntax

Screenshot4

Mayukai Dark

Screenshot5

Mayukai Gruvbox Darktooth

Screenshot6

Mayukai Mono

Screenshot7

Mayukai Alucard

Screenshot8

Mayukai Sunset

Screenshot9

Mayukai Reversal

Screenshot10

Mayukai Midnight

Screenshot10

Known Issues

VS Code 1.50 and newer versions, bring new feature called Semantic Highlighting. Unfortunately, this feature make VS Code theme and syntax highlighting broken and unusable. You can disable this feature in VS Code Settings.

Put this line in your VS Code settings.json file.

"editor.semanticHighlighting.enabled": false
"editor.semanticTokenColorCustomizations": { "enabled": false }

Related Issue :

https://github.com/microsoft/vscode/issues/92308

Reference :

https://code.visualstudio.com/docs/getstarted/themes#_semantic-highlighting

Reference :

https://github.com/microsoft/vscode/wiki/Semantic-Highlighting-Overview

Or search in your VS Code Settings with "semantic" keyword. And disable by selecting false option from Editor > Semantic Highlighting: Enabled dropdown setting.

Semantic Setting

Mayukai Theme for Semantic Highlighting VS Code

If you still want use Semantic Highlighting in VS Code 1.45.x and newer versions. You can use Mayukai Theme that specially designed for Semantic Highlighting. Just select Mayukai Semantic Mirage Theme in Color Theme Setting in your VS Code.

Miscellaneous

Mayukai theme also available in Hyper Terminal . You can download and install Mayukai Hyper Terminal Theme in this link.

Mayukai Theme work fine with other syntax highlighting extension, such as Babel JavaScript by Michael McDermott. But I recommended you to disable that extension if you find any problem with syntax coloring consistency in Mayukai Theme.

Mayukai Terminal Theme also available for Linux System, with .Xresources configuration. This configuration and how to install available in this repository Mayukai Terminal Theme.


Development

This theme is using base color swatch from Ayu, with some adjustment for syntax coloring. Template for this theme is generated using Ayu Color Generator from Ayu Theme. Documentation used for creating this theme in VS Code Theming API.


Thank you for

Thank you to everyone who create these amazing theme in VS Code that inspires Mayukai Theme, feel free to check and try this out.


Issue and Bug Report

We know creating syntax theme that run on every syntax in every programming language is hard, and we know that Mayukai theme is far from perfect. This theme will be updated regulary for coloring adjustment. And if you find any issue or bug in this theme, feel free to make an Issue in this repository.

Enjoy!

mayukai-theme's People

Contributors

gulajavaministudio avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

mayukai-theme's Issues

[DOC] How to customize color on variable, function, and other token coloring ?

We see some people not satisfied with default syntax highlighting guide on Mayukai Theme color scheme. But don't worry, VS Code provide some settings that can be easily do with you. VS Code provide token color customization and syntax highlighting setting in advanced Settings.json file.

First, open VS Code Settings, and navigate to Top Right corner on your Settings Page. There's button called "Open Settings(JSON)" and press it to open VS Code Settings in JSON file.
Screenshot_2022-05-04_05-30-44

Or you can open it by pressing Ctrl + Shift + P to open command Palette, and type "Preferences: Open Settings (JSON)"
Screenshot_2022-05-04_05-31-12

Settings JSON File

After settings.json opened, you can add your custom color for variable and function or any color what you want on Mayukai Theme. On the last line in Settings.json file, add this line to make custom color on variable color, for example for Go language.

 "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "name": "Variable Property for Go",
                "scope": [
                    "variable.other.assignment.go"
                ],
                "settings": {
                    "foreground": "#d4bfff"
                }
            },
        ]
    }

Screenshot_2022-05-04_04-32-19

After you saved that settings. This will change the color for variable on Go language with purple color, you can see the result by opening .go files .

Screenshot_2022-05-04_05-39-52

How to Get Textmate Scope ?

As you can see, custom color that applied on above example, use textMate Scopes "variable.other.assignment.go" . But how to get this parameters?

You can get this textMate scope parameters easily with VS Code command too. First, open your programming language file, and open command palette Ctrl + Shift + P , and type "Inspect Editor Token and Scopes" . This will activate developer mode on VS Code, and you can move text editor cursor to any text in your file.

Screenshot_2022-05-04_05-35-39

This picture show textMate scope after activating Inspect Editor Token and Scopes Mode.
Screenshot_2022-05-04_05-36-11
Screenshot_2022-05-04_05-36-37

For example we will change color function to yellow in Go language. You can just add textMate scope "support.function.builtin.go" on VS Code settings.json like before.

{
          "name": "Function for Go",
          "scope": [
              "support.function.builtin.go"
          ],
          "settings": {
              "foreground": "#ffcc66"
          }
}

Screenshot_2022-05-04_05-48-15

Save that settings file, and see the result. The function color, changed to yellow.
Screenshot_2022-05-04_05-49-52

That's it, simple tips and tricks for customizing your Mayukai Theme with VS Code Settings. And here's other reference from Stackoverlow and official docs.
Token Color Customization with Textmate Scopes
Semantic Token Color Customization
Color Theme Docs
Theme Color Textmate Scopes
Syntax Highlighting Guide
Semantic Token Scope
VS Code Settings Guide

Font Ligatures

Theme conflicts with some font ligatures in VSCode.
I use JetBrains Mono and font ligatures are turned on in VSCode settings:

"editor.fontLigatures": true,

But some ligatures like -> or <> don't work because symbols have different coloring:
image

Different color for local variables

Would be nice to get a different color for variables, that local to a function, like in Dark+.

Dark+:
(results, resultChannel, url, i and r variables are local to CheckWebsites function)
image

Mayukai Semantic Mirage:
image

[Request] (Neo) VIM Port

Hello.

Thanks for taking your time to put together this masterpiece. I'd kindly ask if it'd be possible to do some kind of port to Neovim/Vim. I'm using this theme on vscodium, kitty and I'd love to use it on my neovim setup as well.

Thanks so much

Several terminal themes

Hi! Thank you for this awesome theme. I made several terminal theme based on Mayukai Mirage.

Currently it's available as .Xresources for terminal that uses it as its colours configuration. It's also available for Kitty and Alacritty terminal.

They're here

Thank you!

add tokens for messages

I like the color in this theme, great work!!

I notice there is message.error, which is red.
Can you please add tokens for message.info(green), message.warn(orange)?

        {
            "scope": [
                "message.error"
            ],
            "settings": {
                "foreground": "#ff3333"
            }
        },

Fix contrast menu item

Saya berharap, ada pembaharuan terbaru untuk memperbaiki warna kontras pada menu popup. Saya rasa itu akan menjadi lebih baik. Terimaskasih! 😊

Semantic Highlighting in VS Code 1.45 and newer

Semantic highlighting in VS Code 1.45 and newer version, make theme and syntax coloring broken. Not only this theme, but other theme too.

Solution for reverting back to original syntax coloring is remove checklist in VS Code Settings in :
Editor: Semantic Highlighting Enabled.
Screenshot_2020-03-12_07-15-17

Or add this in VS Code settings.json file :
"editor.semanticHighlighting.enabled": false

"editor.semanticTokenColorCustomizations": { "enabled": false }

Related Issue :
microsoft/vscode#92308

Reference :
https://code.visualstudio.com/docs/getstarted/themes#_semantic-highlighting

https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide

Open VSX Listing: Signing the Publisher Agreement

Thank you for being part of the Open VSX community by adding your extensions to the Open VSX Registry. Please note that the service was recently transferred to the Eclipse Foundation and urgent action on your part is needed so we can continue to list your extensions. To ensure uninterrupted service, please sign the Eclipse Publisher Agreement on or before January 8, 2021. If not signed by that date, your extensions will be delisted and will no longer appear on the site nor be available via the API. If you sign at a later date, your extensions will then be re-activated. The signing process is explained in the Wiki (steps 1 and 2).

Please also note that all extensions MUST have a license in order to be listed.

More details are in these recent blog posts:
https://blogs.eclipse.org/post/brian-king/open-vsx-registry-under-new-management
https://blogs.eclipse.org/post/brian-king/new-era-open-vsx-registry

Today, there’s growing momentum around open source tools and technologies that support Visual Studio (VS) Code extensions. Leading global organizations are adopting these tools and technologies. This momentum has spurred demand for a marketplace without restrictions and limitations. Thanks for joining us on this journey as we continue to build the Open VSX community. We look forward to continued innovation from you in 2021!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.