ankitmlive / firefly-theme

Firefly Glows to attract Mates, Firefly Pro Glows to attract Developers. A Pure Colourful Dark Theme for VsCode that Glows in Night, inspired by Fireflies.

Description

• 🔥🔥🔥🔥🔥🔥🔥 New FireFly Version is Live. 🔥🔥🔥🔥🔥🔥
• A Pure Colorful Dark Theme that Glows in Night, inspired by Fireflies.
• Includes Three Dark variants - Firefly Pro (New), Firefly Pro Bright & FireFly Pro Midnight.
• For professional Night Coders who Loves Visual Studio Code.
• Fully optimized for eyes, Tested more than 6 hours in night with no eye burn.
• A Theme that motivates you to code at night.

Firefly Pro Demo (New) 🎉🎉🎉🎉🎉🎉

Firefly Pro Bright Demo

Firefly Pro Midnight Demo

Getting started

You can install firefly theme through mentioned ways.

Installation

1 - From Visual Studio Code Marketplace

Install this incredible dark theme through the Visual Studio Code Marketplace.

2 - From Command Panel in VsCode

Launch Quick Open:

• Linux Ctrl+P
• macOS ⌘P
• Windows Ctrl+P

Paste the following command and press Enter:

ext install firefly

And pick the one by Ankit Mishra.

3 - From Packaged VSIX Extension

Download the latest .vsix release file from the marketplace and install it from the command line

code --install-extension firefly-*.*.*.vsix

or from within VS Code by launching Quick Open and running the Install from VSIX... command.

Activate theme

Launch Quick Open:

• Linux Ctrl + Shift + P
• macOS ⌘ + Shift + P
• Windows Ctrl + Shift + P

Type theme, choose Preferences: Color Theme, and select FireFly Pro or FireFly Pro MidNight.

Recommended settings for a better experience

Use Material Icon's -- Install material icon extension

Jetbrains Mono(free), Operator Mono(buy) & Fira Code(free) are best suited fonts with firefly -- Install Jetbrains Mono, Fira Code or Operator Mono

Jetbrains Mono is a New TypeFace for Developers, Firefly looks awesome with it download it here -> https://www.jetbrains.com/lp/mono/

{
    // "Jetbrains Mono" font family OR
    "editor.fontFamily": "Jetbrains Mono",
    // "Operator Mono" font family AND
    "editor.fontFamily": "Operator Mono",
    // Enables font ligatures
    "editor.fontLigatures": true,
}

Issues

If you are facing VsCode Editor background issue, where your editor background show's different colors, use this setting to fix it.

Goto Command Pallete in vscode
Search for 'Configure Runtime Arguments' & enter, it will open argv.json file
Add this in your argv file -> "disable-hardware-acceleration": true 
Restart VsCode

Feedback

If you find any issue or feature idea let me know either on GITHUB ISSUE or EMAIL ME

Contribution

If you like this theme and wants to contribute in this project, you can clone our github repository.

git clone https://github.com/ankitmlive/firefly-theme.git

Current Contribution

Theme Logo Created by -- Karthik Rajeev

You can catch on : TWITTER GITHUB

Author

Theme Created by -- Ankit Mishra

You can catch on : TWITTER GITHUB

---

Copyright © 2019-2022 Ankit Mishra

firefly-theme's Issues

Poor contrast / readablity when selecting normal text (setting / extension page ...)

The contrast between the color of the selected text and the selection highlight color is too low.
https://webaim.org/resources/contrastchecker/?fcolor=A3AABE&bcolor=C3C3C3

Examples

Poor readability with JSX / TSX files

As in the title, the syntax highlighting of react components and regular HTML tags is exactly the same, and it can make it difficult to distinguish them at a glance. Not the biggest issue, I do still use the theme (as a react developer) for my day-to-day use, just would be nice to have them different.

Object.property

Great theme! I love it. As someone with eye conditions this is one of the easiest to read.

I'd have 1 request though, could object properties have a different colour or styling to the object, specifically when being referenced in the format object.property ?

File search contrast issue

Hi there,

I found a problem that when you select a word to search in Files:

and than press Ctrl+Shift+F to file Search, it looks like this:

When I press one of the found items it is ok again:

Besides this, awesome theme man!

Selection highlight on blue color fonts

When I select text that is blue, the background color appears to disappear

when renaming a file in the tree, you can barely see the selected characters

In the screenshot below, I have selected all but the file extension.

Firefly Pro Bright - too bright for eye health

Please decrease the amount of brightness a little bit in the Firefly Pro Bright edition, blues, oranges and yellows are really hurting eyes.

Poor contrast / readability off default values in settings

The contrast off the default values in the settings is very low, which makes it hard to read:
https://webaim.org/resources/contrastchecker/?fcolor=3D424D&bcolor=151515

Examples

Italic support

Hi,
I really like this theme and I was wondering if you could add a variant with italic support also for keywords, etc. in the same way it's implemented in Monokai Pro (see screenshot here: https://monokai.pro/vscode) (I guess, in the same way in Firefly comments are already in italic)

Thanks.

p.s.
thanks also for recommending JetBrains mono, I missed it when it released; currently my favourite is IBM Plex Mono which I'd also recommend if you don't need ligatures :)

colors of menu is not readable perfectly

Colors of menu is not readable perfectly. Menu of right click and submenu of main menu of IDE are not readable. Their color is very low contrast with it's background. How can change it?

Selected text has the same color as the selection highligh (HEX editor)

When selecting something in the HEX editor the text of the selection highlight and the text color are the same which makes it impossible to read the selected text.

Example:

The colors used:

The --vscode-editor-selectionForeground should probably stay white:

I changed it to this, which I think looks better, with the selection not being entirely gray.

--vscode-editor-selectionBackground: #3d60947d;
--vscode-editor-selectionForeground: #ffffff; /* Standard foreground is: #bac6db */

Tabs on file names - Hard to differentiate start and finish

On Firefly Pro I can't see a clear divide between the file tabs at the top of the editor. (excluding currently active tab)

Although this doesn't really affect the use of the theme it would be nice if non-active tabs had a little border around them/divide to show the start and end of them.

Can barely see .gitignore'd files

Hello,
looks like your theme makes it particularly hard to find and navigate through files marked in .gitignore


Any fix?
Thanks in advance

Does not appear in VSCodium

Not sure why, as Gruvbox and others appear (though many others do not). This leaves the only installation option for Linux users of VSCodium to install the file download manually. Not a huge deal but might be nice for others to discover this beautiful theme in the extension marketplace.

Highlighted text unreadable when editor not focused

Hi, first off great Theme!
I've encountered an issue with the FireFly Pro Bright and FireFly Pro Midnight themes.
Selected text is not well readable when the editor window loses focus (this includes navigating in the sidewar of the same vsCode window while e.g. browsing files)
It seems to not change the selection colour when losing focus in the base FireFly Pro theme so that one works as intended.

I'll attach some examples:

FireFly Pro Midnight selected with focus:

FireFly Pro Midnight selected without focus:

FireFly Pro Bright selected with focus:

FireFly Pro Bright selected without focus:

Consider providing extension in open-vsx.org

http://open-vsx.org is an open registry for extensions targeted towards VSCode-compatible editors, such as VSCodium, the open, MIT-licensed version of VSCode. People who use this open version of VSCode cannot install this extension, as it is only provided in the Microsoft Visual Studio Marketplace.

Providing the extension on open-vsx would allow users of open alternatives to VSCode to install it. Thanks you.

Pug file styling

Hey, love the theme.
But its not working on pug files.
Am I missing something or is it not supported?
Thanks for the great theme :)

edit(never mind rookie mistake)

Python Switch Statement not highlighted

I noticed that the Switch statement in Python, is not highlighted.

Syntax of the statement:

language = input("What's the programming language you want to learn? ")

match language:
    case "JavaScript":
        print("You can become a web developer.")

    case "Python":
        print("You can become a Data Scientist")

    case "Kotlin":
        print("You can become a mobile app developer")

    case _:
        print("The language doesn't matter, what matters is solving problems.")

As you can see, it ought to be highlited the purple color, as all the other statements are.

Inactive selection color is kind of unreadable

If text is selected and the focus changes to another window or functionality (such as the in-editor text find one), the background color will have a greenish background tint which makes the text pretty much unreadable to me.

All it takes to solve it for me is an update to the editor.inactiveSelectionBackground to something else (e.g. #EBF2FF30)

The problem presents with the "Firefly Pro" variant, I did not test the other ones. I already tried disabling hardware acceleration with "disable-hardware-acceleration": true.

Background and font colors on node_modules folder

Hello

I have a problem with the font colors and the background of the node_modules folder and files.
Using FireFly the visualization I'm seeing is this:

Using themes like Dark + (default) or Moonlight (used in the image) is much better to view.

Am I doing something wrong?