Giter Club home page Giter Club logo

vscode-wal-theme's Introduction

Wal Theme

This extensions for Visual Studio Code adds a real time updated theme that is dynamically generated from the color palette provided by pywal.

Screenshots

Example 1

Example 2

Example 3

Features

  • Real time updates of the color scheme
  • Two variants available: borderless and bordered
  • Works out of the box: no setup needed, just run pywal as you normally would

Requirements

In order to use this extension pywal is needed, it should be run before updating the theme provided by this extension.

Extension Commands

This extension contributes the following command:

  • walTheme.update: execute a manual update of the theme

Extension Settings

This extension contributes the following setting:

  • walTheme.autoUpdate: enable/disable the auto update of the theme provided by this extension

Release Notes

The release notes can be find in the changelog.

Troubleshooting

If the extension doesn't update automatically, while the auto updates are enabled, try to do a manual update with the update command. If the manual update doesn't work try reloading the window.


Credits

This extension is inspired by Ayu and vscode-wal.

vscode-wal-theme's People

Contributors

dlasagno avatar scaryrawr avatar thefermi0n 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

Watchers

 avatar  avatar

vscode-wal-theme's Issues

Extension seems to update one behind when wal changes

Greetings,
I apologize for any confusion in the wording, this is quite hard for me to explain.

The problem is that when creating a new theme with pywal, the first time I create a new theme after opening code, the theme of code will not change, but after the second change, the theme will change to the theme that was created by the first change, thus being always one theme behind. This can be corrected by manually updating the theme via a command.
I have attached a video giving a bit of a demonstration of what I mean.

output.mp4

Consider using colors.json instead

I notice that this imports ~/.cache/wal/colors

However this file does not include the "special" section found in colors.json which includes background and foreground.

It would be nice if this theme would import the json and used those properties if they exist to better match the actual background and foreground of the system when applied with wal.

Thank you!

Template file modification does not register

hi, i m trying to modify the template file that generates the wal and wal-bordered color schemes. i am modifying the file in ~/.vscode/extensions/{extension dir}/out/template.js
However thes modifications fo not register and the theme is generated for the original color specified, not the new color number. I tried changing the out/src/template.js file but to no avail.

Can you provide me some insight into this?

file used for theme

can you tell me which file does this extension use from .cache/wal ? i want to change few colors manually.

Missing color in syntax highlighting

So, I noticed that the theme generated by the extension has a simple syntax highlighting. It happens to be that it uses the same color for two types of highlighted things. For example, in JavaScript files, the same color used in reserved keywords (const, let, var, import etc) is also used in function names.

img1

While in basically any other theme for VSCode, each has it's own color (this theme here is Dracula.min)

img2

Something similar occurs in HTML files, where the tag names uses the same color as the property values from an element.

img3
img4

By the way, here's the colors from the scheme that Pywal generated.

img5

Black background if color.json present

Hi, I am tweaking the colors a bit by my own in files ~/.cache/wal/colors and ~/.cache/wal/colors.json. Theme works perfectly fine if I don't have colors.json, but presents a black background if that file is present. colors.json is required for pywalfox that I use to theme firefox. The theme works if I use the files generated by wal and donot edit them. Could you please point me in the right direction.
Here are my colors.json and colors files,

{
    "wallpaper": "/home/job/.config/themes/walls/shuttle.png",
    "alpha": 100,
    "special": {
        "foreground:": "#e3dad1",
        "background:": "#0c080d",
        "cursor": "#e3dad1"
    },
    "colors": {
        "color0:": "#0c080d",
        "color8:": "#9e9892",
        "color1:": "#911728",
        "color9:": "#b72520",
        "color2:": "#57293b",
        "color10:": "#c05a82",
        "color3:": "#ba5622",
        "color11:": "#fa752f",
        "color4:": "#224260",
        "color12:": "#2087e6",
        "color5:": "#94605d",
        "color13:": "#ff857e",
        "color6:": "#7b8689",
        "color14:": "#21cfff",
        "color7:": "#e3dad1",
        "color15:": "#e3dad1"
    }
}
#0c080d
#911728
#57293b
#ba5622
#224260
#94605d
#7b8689
#e3dad1
#9e9892
#b72520
#c05a82
#fa752f
#2087e6
#ff857e
#21cfff
#e3dad1

Wallust

Managed to get this working with wallust. Leaving it here since it might be useful for someone.

wallust.toml

[[entry]]
# create ~/cache/wal folder first
template="pywal-colors"
target="~/.cache/wal/colors"

pywal-colors template

{color0}
{color1}
{color2}
{color3}
{color4}
{color5}
{color6}
{color7}
{color8}
{color9}
{color10}
{color11}
{color12}
{color13}
{color14}
{color15}

Theme not changing automatically.

Hello,
Great extension!
Running Manjaro with WPGTK and pywal. Theme is not getting set automatically. However, if I click the set theme button, it's working. It's also not changing font colors. Any ideas? What other information can I get you to help? Thanks!

EROFS: read-only file system

I'm running NixOS which is using a read-only file system. I have the extension installed but whenever I change my wallpaper through wal, the extension returns the following error:

EROFS: read-only file system, open '/nix/store/vh8ikilblbcvga2l002254177dg5g9xg-vscode-extension-dlasagno-wal-theme-1.2.0/share/vscode/extensions/dlasagno.wal-theme/themes/wal.json'

I assume it wants to write the color settings to this file? Is it possible to point this towards a location in the user directory? Maybe point it to a wal generated template?

Background color difference

image

The background color is different in the area with text and without text.

In the attached screenshot, the left side is lighter than the right side.

I check the template, could not figure out why -- maybe you can shade some light on this... Thank you!

The extension is not installing from the marketplace

It isn't installing from the marketplace through the command written there
ext install dlasagno.wal-theme
It throws an error that it is incompatible with the VS Code 1.37.1 which is the latest version in Manjaro using bspwm as the window manager.

Would be cool being able to tell VSCode if the theme is light

So wal has the -l flag to tell it it's a light theme. But this is not the thing we might want to rely on! If someone uses the -f flag to use a file, you end up not having that info.

What I'm trying to say is, it would be nice that "type": "dark", in the wal*.json files wasn't hardcoded but calculated using, maybe the background to say "it's light" or "it's dark".

Of course I don't know if this might even be possible, but I wanted to ask ๐Ÿ™‚

Keep up the great work! ๐Ÿ˜

how to install this in VSCodium

Hi,

I stumbled upon this extension. Is it possible to install in VSCodium as well, and if so, how can I do it? Thank you in advance for your support :)

Doesn't work with vscode remote

Hi! Thank you for this awesome extension! It works perfectly locally. However, the color scheme generated by pywal could not be properly loaded after connecting to the remote machine using vscode-remote. It seems that the extension is looking for the pywal cache folder on the remote machine and gives an error when trying to update the theme.

Couldn't load colors from pywal cache, be sure to run pywal before updating.

I'm wondering if there is any workaround for this as I mostly work on the vscode-remote.

Thank you so much!

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.