Skip to content

Home

Jump to bottom
Keshav Mohta edited this page Jan 27, 2023 · 2 revisions

Welcome to the color-collector wiki!

How it started

I was working to build dark mode theme on one of page but the css file was too lengthy and having many color code, so I thought there should be some extension which extract all the color and create variable so that it would be easy to make changes to create colored theme just playing with those varaible.

I search but did not find any so decided to create and also this was my chance to learn how to build vs code extension as I have created chrome extension earlier and VS code is mots fascinating thing for me. :)

for eg.

Initial CSS Final CSS 
body {
  background-color:#000;
  color: #fff;
}

main {
  border-color: #123;
  padding: 4px;
}

.header {
  background-color: #456;
  margin-top: inherit;
}
 
::root {
--body-bg:#000;
--body-txt: #fff;
--main-border: #123;
--header-bg: #456;
}

body {
  background-color:var(--body-bg);
  color: var(--body-txt);
}

main {
  border-color: var(--main-border);
  padding: 4px;
}

.header {
  background-color: var(--header-bg);
  margin-top: inherit;
}

earlier I have started with parsing the css file and collect all property selector and their value and then if there are any color

Clone this wiki locally