Merge pull request #131 from jasonlong/fix-colors

Make extension aware of github's new css color variables

README.md

@@ -3,7 +3,6 @@
 ![Node.js CI](https://github.com/jasonlong/isometric-contributions/workflows/Node.js%20CI/badge.svg)
 [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo)
 
-
 This is a browser extension for Chrome/Brave and Firefox that lets you toggle between your regular GitHub contribution chart and an isometric pixel art version. It uses [obelisk.js](https://github.com/nosir/obelisk.js) for the isometric graphics.
 
 Besides being sort of neat looking, this view is interesting in that it highlights the differences between the number of contributions with more granularity. This isn't meant to completely replace the standard 2D graph though, because in most ways it is actually less useful. For example, there are no axis labels, shorter bars can be hidden behind taller ones, you can't hover over a bar to see the day and count, etc.

src/iso.js

@@ -240,16 +240,16 @@ const loadStats = () => {
 }
 
 const getSquareColor = fill => {
-  switch (fill.toLowerCase()) {
-    case '#ebedf0':
+  switch (fill) {
+    case 'var(--color-calendar-graph-day-bg)':
       return COLORS[0]
-    case '#c6e48b':
+    case 'var(--color-calendar-graph-day-L1-bg)':
       return COLORS[1]
-    case '#7bc96f':
+    case 'var(--color-calendar-graph-day-L2-bg)':
       return COLORS[2]
-    case '#239a3b':
+    case 'var(--color-calendar-graph-day-L3-bg)':
       return COLORS[3]
-    case '#196127':
+    case 'var(--color-calendar-graph-day-L4-bg)':
       return COLORS[4]
     default:
       if (fill.includes('#')) {

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "GitHub Isometric Contributions",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Renders an isometric pixel view of GitHub contribution graphs.",
   "content_scripts": [ {
     "css": [ "iso.css" ],