change index lang list to use default colors (fiqus#46)

use text color accordingly
camplight · Jan 8, 2020 · 547bace · 547bace
1 parent d0ed691
commit 547bace
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/assets/js/languageColors.ts b/assets/js/languageColors.ts
@@ -242,19 +242,12 @@ const colors:{ [key: string]: string; } = {
     "Zephir": "#118f9e",
     "Zig": "#ec915c",
     "ZIL": "#dc75e5",
+    "other": "#444444"
 }
 
-function getLangColor(lang:string, dark:boolean=false) {
+function getLangColor(lang:string) {
     let color = colors[lang];
     color = color?color:"#CCCCCC";
-    if(dark){
-        let col = new TinyColor(color).desaturate(30);
-        if(col.isLight()){
-            col = col.darken(30)
-        }
-        const colstr = col.toString();
-        color = colstr?colstr:"#AAAAAA"
-    }
     return color;
 }
 

diff --git a/assets/js/pages/index.tsx b/assets/js/pages/index.tsx
@@ -11,6 +11,8 @@ import _ from "lodash";
 import getLangColor from '../languageColors';
 import CountUp from 'react-countup';
 import {GoGlobe, GoCode} from "react-icons/all";
+import { mostReadable, TinyColor} from '@ctrl/tinycolor';
+
 
 type CountersResponse = ApiResponse<Counters>;
 type LanguagesResponse = ApiResponse<[TotalLanguage]>;
@@ -101,9 +103,10 @@ const HomePage: React.FC<RouteComponentProps> = () => {
             </div>
             <div className="language-button-container">
                     {Object.keys(languagesResponse.data).map(lang => {
-                        const color = getLangColor(lang, true);
+                        const color = getLangColor(lang);
+                        const readable = (mostReadable(color, ["#111", "#555", "#CCC", "#eee"]) || new TinyColor("#000")).toHexString();
                         return (
-                            <Button key={lang} tag={Link} style={{backgroundColor: color}} to={'/languages/' + lang.toLowerCase()}>
+                            <Button key={lang} tag={Link} style={{backgroundColor: color, color: readable}} to={'/languages/' + lang.toLowerCase()}>
                                  {lang} 
                             </Button>
                         )