first commit

common/resources/client/ui/themes/utils/apply-theme-to-dom.ts

@@ -0,0 +1,14 @@
+import {CssTheme} from '../css-theme';
+import {setThemeValue} from './set-theme-value';
+import {themeEl} from '@common/core/root-el';
+
+export function applyThemeToDom(theme: CssTheme) {
+  Object.entries(theme.values).forEach(([key, value]) => {
+    setThemeValue(key, value);
+  });
+  if (theme.is_dark) {
+    themeEl.classList.add('dark');
+  } else {
+    themeEl.classList.remove('dark');
+  }
+}

common/resources/client/ui/themes/utils/color-to-theme-value.ts

@@ -0,0 +1,9 @@
+import {parseColor} from '@react-stately/color';
+
+export function colorToThemeValue(color: string): string {
+  return parseColor(color)
+    .toString('rgb')
+    .replace('rgb(', '')
+    .replace(')', '')
+    .replace(/, ?/g, ' ');
+}

common/resources/client/ui/themes/utils/get-color-brightness.ts

@@ -0,0 +1,10 @@
+import {parseColor} from '@react-stately/color';
+
+export function getColorBrightness(value: string) {
+  const parsed = parseColor(value).toFormat('rgb');
+  //http://www.w3.org/TR/AERT#color-contrast
+  const red = parsed.getChannelValue('red');
+  const green = parsed.getChannelValue('green');
+  const blue = parsed.getChannelValue('blue');
+  return (red * 299 + green * 587 + blue * 114) / 1000;
+}

common/resources/client/ui/themes/utils/set-theme-value.ts

@@ -0,0 +1,9 @@
+import {themeEl} from '@common/core/root-el';
+
+export function setThemeValue(key: string, value: string) {
+  themeEl?.style.setProperty(key, value);
+}
+
+export function removeThemeValue(key: string) {
+  themeEl?.style.removeProperty(key);
+}

common/resources/client/ui/themes/utils/theme-value-to-hex.ts

@@ -0,0 +1,9 @@
+import {parseColor} from '@react-stately/color';
+
+export function themeValueToHex(value: string): string {
+  try {
+    return parseColor(`rgb(${value.split(' ').join(',')})`).toString('hex');
+  } catch (e) {
+    return value;
+  }
+}