![]() icon-set('.scss', 'sass', first parameter '.scss' is the file extension you want to target, the second parameter 'sass' is the name of the icon you just created, without the extension (sass.svg), and the last parameter indicated what color the icon should be. Assuming you were adding an icon for Sass it might look something like this. Open styles/components/icons/mapping.less and create a link for the icon you just added with the. Once everything is setup, follow these steps any time you want to add a new icon:Ĭreate an SVG icon with the name of the language, and save it to the icons folder (do not use any spaces or special characters) There's a sketch file with examples in this repo. You want to aim for a frame of 32x32 with the icon centered at and being about 18 x 18 big.Use a single color, the colors will be overwritten to one of the 9 below when shipped.Once you have these, you will need to open a terminal window, navigate to the seti-ui folder and run npm install (note you only need to do this once). For example does your language/tool have package downloads or vscode extensions with tens of thousands of users? If no, then there's a possibility we will deny your pull request.Īdding an icon requires you have node and gulp installed. This means we only accept PRs for file icons for popular languages or toolsets. Given that changes to this repo are included in VS Code, we are somewhat conservative with adding new file icons because it can affect the performance for everyone. It includes custom file icons, and new user configurable settings. The theme is a dark interface theme crafted originally for Atom, with subtle colors that are meant to be easy on the eyes. It contains the default icons used in VS Code. Given a HUE (red, pink, etc.) and a SHADE (500, 600, etc.This repo contains the latest version of the Seti UI theme. In addition, most hues come with "accent" shades, prefixed with an A. "red 50" is the lightest shade of red ( pink!), while "red 900" is the darkest. Hue & Shade: A single color within the palette is made up of a hue such as "red", and shade, such as "500".This color palette has been designed with colors that work harmoniously with each other. Material UI provides all colors from the Material Design guidelines. Palette: A palette is a collection of colors, i.e.To generate your own harmonious palettes, use the palette generation tool. These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. Material palette generator: The Material palette generator can be used to generate a palette for any color you input.Includes basic site templates to show various components and how they are affected by the theme ![]() ![]() mui-theme-creator: A tool to help design and customize themes for the Material UI component library.If you are using the default primary and / or secondary shades then by providing the color object, createTheme() will use the appropriate shades from the material color for main, light and dark. Only the main shades need to be provided (unless you wish to further customize light, dark or contrastText), as the other colors will be calculated by createTheme(), as described in the Theme customization section.
0 Comments
Leave a Reply. |