Forem: Mario Rodeghiero

Vue Theme for VS Code — Now with More Language Support and Improvements

Mario Rodeghiero — Thu, 02 Oct 2025 18:05:58 +0000

I’m excited to share some updates about the Vue Theme for VS Code!

Over time, this theme has grown thanks to the amazing support from the community — and today it has over 665K installs. It has even made it into the Top 50 themes on the Visual Studio Marketplace!

Seeing developers from all over the world using it in their daily workflow really motivates me to keep improving it.

What’s New?

Added support and improvements for:
- 🐹 Go
- 🐍 Python
- 📘 TypeScript
- 🐘 PHP
- ⚙️ YAML
Enhanced UI & syntax highlighting for better readability
Fine-tuned colors to make the coding experience even more enjoyable

The goal is to make the theme feel smooth and balanced, no matter what stack you’re working with.

Inspired by Vue, Perfect for React Too

Even though this theme was inspired by Vue, it also provides amazing support for React and other ecosystems.

Because sometimes…

What’s Next?

I’ll keep working on:

Expanding language support
Continuous visual improvements
Making sure the theme feels modern and consistent across different frameworks

But here’s where you come in 👇

Get Involved

This is an open-source project, and your contribution can help make it even better:

GitHub Repo

💻 Developers: feel free to contribute directly with PRs
⭐ If you like the theme, consider giving it a star on GitHub
💬 Feedback is always welcome! If there’s a language or syntax support you’d love to see, let me know

The Vue Theme for VS Code continues to grow, not just as a Vue-inspired theme but as a developer-friendly theme for multiple stacks.

Thanks again for the support, the installs, and the feedback — it truly helps shape the future of this project.

Stay tuned for more updates, and let’s keep making coding more enjoyable!

Install the theme on the VS Code Marketplace

Vue Theme - Theme for Visual Studio Code

Mario Rodeghiero — Fri, 13 Jan 2023 16:09:32 +0000

I would like to republish about Vue Theme because today after a lot of improvements the theme achieved almost 400K installs on VS_code.
Looks a bit funny but the theme was created inspired by vue but in 2019 I decided to change my studies to React and since it I used React as base for the them and I really liked the result 🤩. So if you are a React developer give a try 👨‍💻

Marketplace

Currently with +395000 installs in the Visual Studio Code

UX

All the colors in this theme have an intensity for the user to work for hours, reducing visual fatigue and having an excellent coding experience.

Syntax Highlight:

Installing

Open Extensions sidebar panel in VS Code: View → Extensions
Search for Vue Theme - by Mário Rodeghiero
Click Install to install it.
Click Reload to reload the your editor
Code > Preferences > Color Theme > Vue Theme

You can learn a little bit more or create some PR improvements by accessing Vue Theme GitHub.

If you liked the theme, make your evaluation in the Marketplace or give me a star ⭐️ in GitHub, it is very important to improve the ranking.
Thank you, I hope you like it 😊

GitHub actions

Mario Rodeghiero — Mon, 01 Feb 2021 13:13:16 +0000

Usually, I start my personal and professional projects with a default GitHub actions config to be able to test every pull request from the beginning of development. So I decided to share in this article how to use GitHub actions + node.js in order for you to run the tests while keeping your application safe. This is a simple workflow but it is very helpful.

Create action

1 . Go to the Actions tab on your GitHub repository.

2 . Choose the template Node.js workflow.

3 . Replace the exisitng code adding the code below:

# This workflow will do a clean install of node dependencies, build the source code 
# and run tests across different versions of node.

name: my-actions

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests
      run: npm test

    - name: Build
      run: CI=false npm run build

Note: If you need to use another node version, you can replace it for node-version: [10.x, 12.x, 14.x]

4 . Commit the workflow to a new branch.

5 . Create a pull request titled CI for Node.

6 . Now you can see your actions running if your repository contains the scripts in the package.json file.

GitHub Actions vocabulary

Workflow: A workflow is a unit of automation from start to finish, including the definition of what triggers the automation, what environment or other aspects should be taken account during the automation, and what should happen as a result of the trigger.(GitHub, 2020).

Job: A job is a section of the workflow, and is made up of one or more steps. In this section of our workflow, the template defines the steps that make up the build job.(GitHub, 2020).

Step: A step represents one effect of the automation. A step could be defined as a GitHub Action, or another unit, like printing something to the console.(GitHub, 2020).

Action: A GitHub Action is a piece of automation written in a way that is compatible with workflows. Actions can be written by GitHub, by the open source community, or you can write them yourself!(GitHub, 2020).

Conclusion

I think now you can start using GitHub actions in your projects. I will not explain what each line does but if you want to know more about what it does, I really recommend accessing the GitHub Lab and start the GitHub actions course for free. 😁

Don't forget to install and use Vue theme for VS_Code editor, my theme achieved +195k installs and has amazing support for ReactJS and any contribution is welcome 😁

Storybook + default style for all stories

Mario Rodeghiero — Tue, 17 Dec 2019 13:06:51 +0000

Storybook is an excellent tool to improve, organize, and test your components. Today I work with ReactJS and styled-components, and storybook, but Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, Ember, Riot and Preact are currently supported.
This library has 44k+ stars on GitHub with MIT License.

Install

In the following examples the "create-react-app", "styled-components" and "storybook" will be used.

create-react-app

$ npx create-react-app my-app

$ cd my-app

$ npm install

styled-components

$ npm install --save styled-components

storybook

$ npx -p @storybook/cli sb init --type react

$ npm i -D @storybook/addon-info

Run storybook

$ npm run storybook

Note: If you had some problem to run it, try to reinstall. npm install

Global Style

I created a file "globalStyle.js" with some styles like colors, typography, etc...

import { createGlobalStyle } from "styled-components";

export const GlobalStyle = createGlobalStyle`

 * {
    padding: 0;
    margin: 0;
    color: navy;
  }

  body {
    background-color: #f2f2f2;
  }
`

How to config the loader

In the folder .storybook/ has a file with the name config.js. To apply the global style for all components into your project, you can use this code below.

Note:

you need to change the name of require.context( ) depending on the structure.

Make sure that you have react, react-dom, @babel/core, and babel-loader in your dependencies.


import { withInfo } from "@storybook/addon-info";
import { configure, addDecorator } from "@storybook/react";
import { GlobalStyle } from "../src/globalStyle"
import * as React from "react";

const req =  require.context('../stories', true, /\.stories\.js$/);

addDecorator(withInfo());
addDecorator(style => <><GlobalStyle />{style()}</>);

configure(req, module)

Conclusion

After this, you only need to stop and restart your project, and all the components will have a new style.
I hope this post can help you.

Thanks!!

iwant-style

Mario Rodeghiero — Mon, 07 Jan 2019 16:27:38 +0000

iwant-style library imports ready styles using CSS in JS to be used in conjunction with styled-components.

Screenshot

Getting Started
Usage
Components

Getting Start

npm install iwant-style

npm install styled-components

Usage

  import styled from 'styled-components';

  import { inputDark } from 'iwant-style';

  const Dark = styled.form`
    ${inputDark};
  `;

  ...
     <Dark action='' method=''>
      <input type='search' placeholder='What are you looking for?' />
      <button>Search</button>
    </Dark>
  ...

Components

Comment

Usage

  import styled from 'styled-components';

  import { comment } from 'iwant-style';

  const Comments = styled.div`
    ${comment}
  `;

  ...
   <Comments>
      <section>
        <h1>Petter</h1>
        <h2>C0-Founder</h2>
        <p>
          Sit cupidatat commodo sit reprehenderit reprehenderit irure aliquip do
          occaecat id.
        </p>
      </section>
      <div>
        <img
          src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg'
          alt='profile-sample5'
        />
      </div>
    </Comments>
  ...

Properties

Name	Parameter	Default
`${comment}`		`default`

PreLoader

Usage

  import styled from 'styled-components';

  import { preloader } from 'iwant-style';

  const Preloader = styled.div`
    ${preloader};
  `;

  ...
    <Preloader>
        <div />
        <div />
        <div />
    </Preloader>
  ...

Properties

Name	Parameter	Default
`${preloader}`		`bubbles`
`${preloaderCircle}`		`circle`

Preloader Circle

  import styled from 'styled-components';

  import { preloaderCircle } from 'iwant-style';


  const Preloader = styled.div`
    ${preloaderCircle};
  `;

  ...
    <Preloader>
        <div />
    </Preloader>
  ...

Avatar

Usage

  import styled from 'styled-components';

  import { avatar } from 'iwant-style';

  const Avatar = styled.img`
    ${avatar};
  `;

  ...
    <Avatar src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample9.jpg' />
  ...

Properties

Name	Parameter	Default
`${avatar}`		`person`

Button

Usage

  import styled from 'styled-components';

  import { btn } from 'iwant-style';

  const Button = styled.button`
    ${btn};
  `;

  ...
    <Button>Start</Button>
  ...

Properties

Name	Parameter	Default
`${btn}`		`square`
`${btn(param)}`	`"disable"`
`${btn(param)}`	`"round"`

Input

Usage

  import styled from 'styled-components';

  import { input } from 'iwant-style';

  const Input = styled.div`
    ${input};
  `;

  ...
     <Input>
      <input type='text' required />
      <span />
      <label>Name</label>
    </Input>
  ...

Dark

  import styled from 'styled-components';

  import { inputDark } from 'iwant-style';

  const Dark = styled.form`
    ${inputDark};
  `;

  ...
     <Dark action='' method=''>
      <input type='search' placeholder='What are you looking for?' />
      <button>Search</button>
    </Dark>
  ...

Properties

Name	Parameter	Default
`${input}`		`animation`

Card

Usage

  import styled from 'styled-components';

  import { card } from 'iwant-style';

  const Card = styled.div`
    ${card};
  `;

  ...
     <Card>
       <h1>Card Title</h1>
        <p>
          Veniam elit commodo culpa sunt adincididunt nisi minim amet qui
          sit pariatur occaecat. Veniam elitcommodo culpa sunt ad
          incididunt nisi minim amet qui sitpariatur occaecat. sit pariatur
          occaecat.
        </p>
      <hr />
      <div>
        <a href='#'>This is a link</a>
        <a href='#'>This is a link</a>
      </div>
     </Card>
  ...

Properties

Name	Parameter	Default
`${card}`		`info`

Pagination

Usage

  import styled from 'styled-components';

  import { pagination } from 'iwant-style';

  const Pagination = styled.ul`
    ${pagination};
  `;

  ...
     <Pagination>
            <li>
              <a href='#'>&lt;</a>
            </li>
            <li>
              <a href='#'>1</a>
            </li>
            <li>
              <a href='#'>2</a>
            </li>
            <li>
              <a href='#'>3</a>
            </li>
            <li>
              <a href='#'>&gt;</a>
            </li>
    </Pagination>
  ...

Properties

Name	Parameter	Default
`${pagination}`		`arrow`

If you liked this project, contribute improvements or give a star ⭐️ on GitHub.

Thanks!

GitHub Issue - Desktop App

Mario Rodeghiero — Thu, 06 Dec 2018 13:20:54 +0000

A desktop application created with ElectronJS and ReactJS to be cross-platform to manage and track GitHub issues.

Screenshot

Built With

ReactJS - ReactJS
ElectronJS - ElectronJS
electron-react-boilerplate - electron-react-boilerplate

Prerequisites

Requires a node version >= 7 and an npm version >= 4.
If you have installation or compilation issues with this project, please see debugging guide

Install

First, clone the repo via git:

git clone --depth=1 https://github.com/mariorodeghiero/git-issue-react-electronjs.git your-project-name

And then install dependencies with yarn.

$ cd your-project-name
$ yarn

Note: If you can't use yarn, run npm install.

Run

Start the app in the dev environment:

$ yarn dev

$ npm run dev

Packaging

You can debug your production build with devtools by simply setting the DEBUG_PROD env variable:

$ DEBUG_PROD=true yarn package

To package apps for the local platform:

$ npm run package

To package apps for all platforms:

First, refer to Multi Platform Build for dependencies.

Then,

$ npm run package-all

To package apps with options:

$ npm run package -- --[option]

To improve the usability of this App, you can create keyboard shortcuts to start quickly.

For Mac_OS use "Automator".
For Windows access "Properties" of the App.

If you liked this project, contribute improvements or give me a star ⭐️ on GitHub.

Thanks!

React Comments App

Mario Rodeghiero — Thu, 18 Oct 2018 11:52:16 +0000

React Comments App

A simple comment system, built with ReactJS, integrated with Firebase, using authentication and real-time database, based on the DevReactJS Devpleno course.

Site: react-comments-app

Prerequisites

What things you need to install the software and how to install them

node.js
NPM Package Manager
Create token in Firebase

Note: After creating the token, necessary put your token on Base.js file.

Installing

Clone this repository

git clone https://github.com/mariorodeghiero/reactjs-comments-app.git

Installing the dependencies from the NPM Package Manager

npm install

To start the development environment, run the following command:

npm run start

yarn start

Deployment

Run the command below to deploy, minimizing All Files.

npm run build

yarn build

After run, the browser open window automatically at http://localhost:3000/

Built with

React.js
Firebase

⚖️ MIT License

I created this application to test and share knowledge acquired in the studies on ReactJS.
If you liked this project, contribute improvements, send your PR or give me a star ⭐️ on GitHub.

I hope you like ✌️
Thanks and this is my Twitter

Vue Theme for iTerm2 + oh-my-zsh

Mario Rodeghiero — Thu, 20 Sep 2018 02:17:52 +0000

Vue Theme for iTerm 2 and ZSH

Vue Theme in your terminal.

Install

First, clone the repo via git:

$ git clone https://github.com/mariorodeghiero/vue-theme-iterm2.git

Install iTerm Theme

Launch iTerm 2. Get the latest version at iterm2.com
Click on iTerm2 menu title
Select Preferences... option
Select Profiles
Navigate to Colors tab
Click on Color Presets
Click on Import
Select the vue-theme.itermcolors file
Return to Color presets and select Vue-Theme
Restart your terminal.

Install oh-my-zsh Theme

Drop the vue-theme.zsh-theme file in to the ~/.oh-my-zsh/themes/ directory.
Open up your ZSH preferences

   $ open ~/.zshrc

Change the theme variable to ZSH_THEME=vue-theme.
Restart your terminal.

Conclusion

I created this theme for iTerm2 + ohmyzsh because the Vue Theme has reached 30500 installations in VS_Code.
If you liked this project, contribute improvements or visit the project on GitHub.⭐️

Thank you, I hope you like it 😊

Weather App built in pure javascript

Mario Rodeghiero — Thu, 30 Aug 2018 23:26:07 +0000

Weather App

Weather forecast app, built in pure javascript to put into practice what I learned in my studies.

Built with

ES6
javascript
webpack.
Sass
openweather

Prerequisites

What things you need to install the software and how to install them

node.js
NPM Package Manager
Create token in openweather and include in the file "/src/js/token.js"

Installing

Clone this repository

git clone https://github.com/mariorodeghiero/weather-fetch-api

Installing the dependencies from the NPM Package Manager

npm install

To start the development environment, run the following command:

npm run dev

Note: This command also performs a clear in the dist folder and build again.

npm run server

After run, the browser open window automatically at http://localhost:8080

Deployment

Run the command below to deploy, minimizing All Files.

npm run prod

If you liked this Theme, visit repository on GitHub ⭐️
Thank you, I hope you like it 😊

Gist Interview - Programming questions simulator

Mario Rodeghiero — Mon, 20 Aug 2018 14:00:06 +0000

</> Gist Interview

</> Gist Interview is an application built with ReactJS and for any person or company to use to simulate programming questions by simply creating and populating the "db.json" file with its Gist-IDs and at the end generating a dashboard.

Gif Example

Built with

Install

First, clone the repo via git:

git clone https://github.com/mariorodeghiero/react-gist-interview.git your-project-name

And then install dependencies with yarn.

$ cd your-project-name
$ yarn

Note: If you can't use yarn, run npm install.

Run

Install json-server:

$ npm install -g json-server

Start the file "db.json":

$ json-server --watch db.json --port 3001

Example file "db.json"

Open a new tab in the current directory and start the app in the dev environment:

$ npm run start

$ yarn start

After run, the browser open window automatically at http://localhost:3000/

Deployment

Run the command below to deploy, minimizing All Files.

$ npm run build

$ yarn build

Conclusion

I created this application to test and share knowledge acquired in the studies on ReactJS and also so that any person or company can use to simulate questions about programming, simply creating and populating the file "db.json" with the respective Gist-ID.
If you liked this project, contribute improvements or give me a star ⭐️ on GitHub.

I hope you like ✌️
Thanks!

Icons made by

Vue Theme - Theme for Visual Studio Code inspired by Vue.js

Mario Rodeghiero — Fri, 03 Aug 2018 17:09:11 +0000

I created this theme for Visual Studio Code inspired by Vue.js,
with support for more popular languages, trying to maintain a perfect harmony of colors.

Marketplace

Currently with +59000 installs in the Visual Studio Code editor

UX

All the colors in this theme have an intensity for the user to work for hours, reducing visual fatigue and having an excellent coding experience.

Syntax Highlight:

Installing

Open Extensions sidebar panel in VS Code: View → Extensions
Search for Vue Theme - by Mário Rodeghiero
Click Install to install it.
Click Reload to reload the your editor
Code > Preferences > Color Theme > Vue Theme

You can know a little more by accessing the web page Vue Theme or Marketplace.

If you liked this Theme, make your evaluation in the Marketplace or give me a star ⭐️ in GitHub, as it is important to improve the ranking.
Thank you, I hope you like it 😊

GIT Commands: Desktop App built with ElectronJS and ReactJS to be cross-platform.

Mario Rodeghiero — Mon, 30 Jul 2018 01:10:51 +0000

Screenshot

Git Commands

GIT Commands is a desktop app built with ElectronJS and ReactJS to be cross-platform, providing quick access to the main Git commands and with direct links to the documentation.

Prerequisites

Requires a node version >= 7 and an npm version >= 4.
If you have installation or compilation issues with this project, please see our debugging guide

Install

First, clone the repo via git:

git clone --depth=1 https://github.com/mariorodeghiero/git-commands.git your-project-name

And then install dependencies with yarn.

$ cd your-project-name
$ yarn

Note: If you can't use yarn, run npm install.

Run

Start the app in the dev environment:

$ npm run dev

Packaging

To package apps for the local platform:

$ npm run package

To package apps for all platforms:

First, refer to Multi Platform Build for dependencies.

Then,

$ npm run package-all

To package apps with options:

$ npm run package -- --[option]

Tip

To improve the usability of this App, you can create keyboard shortcuts to start quickly.

For Mac_OS use "Automator".
For Windows access "Properties" of the App.

If you liked this project, contribute improvements or give me a star ⭐️ on GitHub.

Thanks!

Forem: Mario Rodeghiero

Vue Theme for VS Code — Now with More Language Support and Improvements

What’s New?

Inspired by Vue, Perfect for React Too

What’s Next?

Get Involved

Vue Theme - Theme for Visual Studio Code

Marketplace

UX

Syntax Highlight:

Installing

GitHub actions

Create action

GitHub Actions vocabulary

Conclusion

Storybook + default style for all stories

Install

Run storybook

Global Style

How to config the loader

Conclusion

iwant-style

Screenshot

Contents

Getting Start

Usage

Components

Comment

Usage

Properties

PreLoader

Usage

Properties

Preloader Circle

Avatar

Usage

Properties

Button

Usage

Properties

Input

Usage

Dark

Properties

Card

Usage

Properties

Pagination

Usage

Properties

GitHub Issue - Desktop App

Screenshot

Built With

Prerequisites

Install

Run

Packaging

React Comments App

React Comments App

Prerequisites

Installing

Deployment

Built with

⚖️ MIT License

Vue Theme for iTerm2 + oh-my-zsh

Vue Theme for iTerm 2 and ZSH

Install

Conclusion

Weather App built in pure javascript

Weather App

Built with

Prerequisites

Installing

Deployment

Gist Interview - Programming questions simulator

</> Gist Interview

Gif Example

Built with

Install

Run