diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js
index 474a9b11f..14354f305 100644
--- a/src/js/theme-controller.js
+++ b/src/js/theme-controller.js
@@ -6,6 +6,8 @@ import Config from "./config";
import * as UI from "./ui";
import tinycolor from "tinycolor2";
+const domtoimage = require("dom-to-image");
+
let isPreviewingTheme = false;
export let randomTheme = null;
@@ -22,38 +24,17 @@ export const colorVars = [
];
async function updateFavicon(size, curveSize) {
- let maincolor, bgcolor;
-
- bgcolor = await ThemeColors.get("bg");
- maincolor = await ThemeColors.get("main");
-
- if (bgcolor == maincolor) {
- bgcolor = "#111";
- maincolor = "#eee";
- }
-
- var canvas = document.createElement("canvas");
- canvas.width = size;
- canvas.height = size;
- let ctx = canvas.getContext("2d");
- ctx.beginPath();
- ctx.moveTo(0, curveSize);
- //top left
- ctx.quadraticCurveTo(0, 0, curveSize, 0);
- ctx.lineTo(size - curveSize, 0);
- //top right
- ctx.quadraticCurveTo(size, 0, size, curveSize);
- ctx.lineTo(size, size - curveSize);
- ctx.quadraticCurveTo(size, size, size - curveSize, size);
- ctx.lineTo(curveSize, size);
- ctx.quadraticCurveTo(0, size, 0, size - curveSize);
- ctx.fillStyle = bgcolor;
- ctx.fill();
- ctx.font = "900 " + (size / 2) * 1.2 + "px Roboto Mono";
- ctx.textAlign = "center";
- ctx.fillStyle = maincolor;
- ctx.fillText("mt", size / 2 + size / 32, (size / 3) * 2.1);
- $("#favicon").attr("href", canvas.toDataURL("image/png"));
+ setTimeout(() => {
+ console.log("fav");
+ domtoimage
+ .toPng(document.querySelector(".logo .icon"))
+ .then(function (dataUrl) {
+ // console.log(dataUrl);
+ // ctx.drawImage(dataUrl, 0, 0);
+ // $('body').prepend(canvas);
+ $("#favicon").attr("href", dataUrl);
+ });
+ }, 125);
}
function clearCustomTheme() {
@@ -78,7 +59,7 @@ let loadStyle = function (name) {
});
};
-export function apply(themeName) {
+export function apply(themeName, isPreview = false) {
clearCustomTheme();
let name = "serika_dark";
@@ -121,18 +102,20 @@ export function apply(themeName) {
} catch (e) {
console.log("Analytics unavailable");
}
- ThemeColors.get().then((colors) => {
- $(".keymap-key").attr("style", "");
- ChartController.updateAllChartColors();
- updateFavicon(32, 14);
- $("#metaThemeColor").attr("content", colors.bg);
- });
+ if (!isPreview) {
+ ThemeColors.get().then((colors) => {
+ $(".keymap-key").attr("style", "");
+ ChartController.updateAllChartColors();
+ updateFavicon(128, 32);
+ $("#metaThemeColor").attr("content", colors.bg);
+ });
+ }
});
}
export function preview(themeName) {
isPreviewingTheme = true;
- apply(themeName);
+ apply(themeName, true);
}
export function set(themeName) {
diff --git a/src/sass/style.scss b/src/sass/style.scss
index e95795030..a4a395dfd 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -8,6 +8,8 @@
@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
+
:root {
--roundness: 0.25rem;
--font: "Roboto Mono";
@@ -1661,7 +1663,7 @@ label.checkbox {
line-height: 2.3rem;
font-size: 2.3rem;
/* text-align: center; */
- transition: 0.25s;
+ // transition: 0.25s;
padding: 0 5px;
display: grid;
grid-auto-flow: column;
@@ -1672,18 +1674,41 @@ label.checkbox {
user-select: none;
.logo {
- margin-bottom: 0.6rem;
+ // margin-bottom: 0.6rem;
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 0.5rem;
+
+ .icon {
+ width: 2.5rem;
+ display: grid;
+ align-items: center;
+ background-color: transparent;
+ // margin-bottom: 0.15rem;
+ svg path {
+ transition: 0.25s;
+ fill: var(--main-color);
+ }
+ }
+ .text {
+ .top {
+ position: absolute;
+ left: 0.25rem;
+ top: -0.1rem;
+ font-size: 0.65rem;
+ line-height: 0.65rem;
+ color: var(--sub-color);
+ transition: 0.25s;
+ }
+ position: relative;
+ font-size: 2rem;
+ margin-bottom: 0.4rem;
+ font-family: "Lexend Deca";
+ transition: 0.25s;
+ }
white-space: nowrap;
user-select: none;
- .top {
- font-size: 0.65rem;
- line-height: 0.65rem;
- margin-bottom: -0.4rem;
- margin-left: -0.1rem;
- color: var(--sub-color);
- }
-
.bottom {
margin-left: -0.15rem;
color: var(--main-color);
@@ -1769,8 +1794,17 @@ label.checkbox {
opacity: 0 !important;
}
- .logo .bottom {
+ .icon svg path {
+ fill: var(--sub-color) !important;
+ }
+
+ .logo .text {
color: var(--sub-color) !important;
+ // opacity: 0 !important;
+ }
+
+ .logo .top {
+ opacity: 0 !important;
}
.config {
diff --git a/static/images/fav.png b/static/images/fav.png
new file mode 100644
index 000000000..04f65850d
Binary files /dev/null and b/static/images/fav.png differ
diff --git a/static/index.html b/static/index.html
index 954f150e5..6c9639e60 100644
--- a/static/index.html
+++ b/static/index.html
@@ -15,7 +15,7 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
monkey see
+ monkeytype
+
+
+
+