❓ Idk but at least it works

package.json

@@ -3,11 +3,10 @@
   "version": "0.11.0",
   "description": "A website with everything I use to prepare for university exams",
   "dependencies": {
-    "@reach/router": "^1.3.4",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
     "@testing-library/user-event": "^12.6.2",
-    "bluelib": "^1.0.0",
+    "bluelib": "^2.1.4",
     "classnames": "^2.2.6",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",

src/App.js

@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from "react";
 import {BaseLink, Bluelib, Main} from "bluelib/lib/components";
-import {Router, } from "@reach/router";
+import {Switch, Route} from "react-router-dom";
 import Home from "./routes/Home";
 import Error404 from "./routes/Error404";
 import Gestinfo from "./routes/Gestinfo";
@@ -19,21 +19,23 @@ export default function App() {
 
             <Bluelib skin={skin} className={style.app}>
 
-                <Router primary={false}>
+                <MainTitle subtitle={subtitle}/>
-                    <MainTitle default={true} subtitle={subtitle}/>
-                </Router>
 
                 <Main>
-                    <Router primary={true}>
+                    <Switch>
-                        <Home path={"/"} skin={skin} setSkin={setSkin}/>
+                        <Route exact path={"/"}>
-                        <Gestinfo path={"/gestinfo"}/>
+                            <Home skin={skin} setSkin={setSkin}/>
-                        <Error404 default/>
+                        </Route>
-                    </Router>
+                        <Route path={"/gestinfo"}>
+                            <Gestinfo/>
+                        </Route>
+                        <Route path={"*"}>
+                            <Error404 />
+                        </Route>
+                    </Switch>
                 </Main>
 
-                <Router primary={false}>
                 <Footer default={true}/>
-                </Router>
 
             </Bluelib>
 

src/components/MinusLI.js

@@ -7,7 +7,7 @@ import style from "./MinusLI.module.css";
 
 export default function MinusLI({children, className}) {
     return (
-        <Color value={"red"}>
+        <Color builtin={"red"}>
             <ListItem className={classNames(style.minusli, className)}>
                 {children}
             </ListItem>

src/components/PlusLI.js

@@ -7,7 +7,7 @@ import style from "./PlusLI.module.css";
 
 export default function PlusLI({children, className}) {
     return (
-        <Color value={"lime"}>
+        <Color builtin={"lime"}>
             <ListItem className={classNames(style.plusli, className)}>
                 {children}
             </ListItem>

src/index.js

@@ -3,10 +3,13 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import {BrowserRouter} from "react-router-dom"
 
 ReactDOM.render(
     <React.StrictMode>
+        <BrowserRouter primary={true}>
             <App />
+        </BrowserRouter>
     </React.StrictMode>,
     document.getElementById('root')
 );

src/routes/Gestinfo/components/Token.js

@@ -7,13 +7,13 @@ import {Bold, Strike, Color} from "bluelib/lib/components";
 export default function Token({children, indexTerm, stopword}) {
     if(indexTerm) {
         return (
-            <Bold><Color value={"yellow"}><span className={style.token}>{children}</span></Color></Bold>
+            <Bold><Color builtin={"yellow"}><span className={style.token}>{children}</span></Color></Bold>
         )
     }
 
     if(stopword) {
         return (
-            <Strike><Color value={"red"}><span className={style.token}>{children}</span></Color></Strike>
+            <Strike><Color builtin={"red"}><span className={style.token}>{children}</span></Color></Strike>
         )
     }
 

src/routes/Gestinfo/index.js

@@ -1476,27 +1476,27 @@ export default function Gestinfo() {
                                         <tr>
                                             <td>0</td>
                                             <td>★★★★☆</td>
-                                            <td><LatexMath>{r`4 \cdot 2^{0} =\ `}</LatexMath><Color value={"lime"}><LatexMath>{`+4.00`}</LatexMath></Color></td>
+                                            <td><LatexMath>{r`4 \cdot 2^{0} =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+4.00`}</LatexMath></Color></td>
                                         </tr>
                                         <tr>
                                             <td>1</td>
                                             <td>★★☆☆☆</td>
-                                            <td><LatexMath>{r`2 \cdot 2^{-1} =\ `}</LatexMath><Color value={"lime"}><LatexMath>{`+1.00`}</LatexMath></Color></td>
+                                            <td><LatexMath>{r`2 \cdot 2^{-1} =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+1.00`}</LatexMath></Color></td>
                                         </tr>
                                         <tr>
                                             <td>2</td>
                                             <td>★★★☆☆</td>
-                                            <td><LatexMath>{r`3 \cdot 2^{-2} =\ `}</LatexMath><Color value={"lime"}><LatexMath>{`+0.75`}</LatexMath></Color></td>
+                                            <td><LatexMath>{r`3 \cdot 2^{-2} =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+0.75`}</LatexMath></Color></td>
                                         </tr>
                                         <tr>
                                             <td>3</td>
                                             <td>★★★★★</td>
-                                            <td><LatexMath>{r`5 \cdot 2^{-3} =\ `}</LatexMath><Color value={"lime"}><LatexMath>{`+0.63`}</LatexMath></Color></td>
+                                            <td><LatexMath>{r`5 \cdot 2^{-3} =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+0.63`}</LatexMath></Color></td>
                                         </tr>
                                         <tr>
                                             <td><B>Tot</B></td>
                                             <td><B>-----</B></td>
-                                            <td><B><LatexMath>{r`4 + 1 + 0.75 + 0.63 =\ `}</LatexMath><Color value={"lime"}><LatexMath>{`+6.38`}</LatexMath></Color></B></td>
+                                            <td><B><LatexMath>{r`4 + 1 + 0.75 + 0.63 =\ `}</LatexMath><Color builtin={"lime"}><LatexMath>{`+6.38`}</LatexMath></Color></B></td>
                                         </tr>
                                     </tbody>
                                 </table>