Skip to content

Commit c4bd55f

Browse files
fehmerfehmer
committed
fix color picker, remove colorVars
1 parent b3efd3d commit c4bd55f

File tree

6 files changed

+143
-237
lines changed

6 files changed

+143
-237
lines changed

‎frontend/src/html/pages/settings.html‎

Lines changed: 41 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1535,15 +1535,10 @@
15351535
<div class="customThemeInputs">
15361536
<div class="customThemeInput">
15371537
<label class="colorText">background</label>
1538-
<div class="colorPicker inputAndButton">
1539-
<input
1540-
type="text"
1541-
value="#000000"
1542-
class="input"
1543-
id="--bg-color-txt"
1544-
/>
1538+
<div class="colorPicker inputAndButton" data-key="bg">
1539+
<input type="text" value="#000000" class="input" />
15451540
<label
1546-
for="--bg-color"
1541+
for="colorPickerBg"
15471542
class="button"
15481543
style="
15491544
color: var(--text-color);
@@ -1556,22 +1551,16 @@
15561551
type="color"
15571552
class="color"
15581553
value="#000000"
1559-
id="--bg-color"
1560-
data-key="bg"
1554+
id="colorPickerBg"
15611555
/>
15621556
</div>
15631557
</div>
15641558
<div class="customThemeInput">
15651559
<label class="colorText">sub alt</label>
1566-
<div class="colorPicker inputAndButton">
1567-
<input
1568-
type="text"
1569-
value="#000000"
1570-
class="input"
1571-
id="--sub-alt-color-txt"
1572-
/>
1560+
<div class="colorPicker inputAndButton" data-key="subAlt">
1561+
<input type="text" value="#000000" class="input" />
15731562
<label
1574-
for="--sub-alt-color"
1563+
for="colorPickerSubAlt"
15751564
class="button"
15761565
style="
15771566
color: var(--text-color);
@@ -1584,41 +1573,29 @@
15841573
type="color"
15851574
class="color"
15861575
value="#000000"
1587-
id="--sub-alt-color"
1588-
data-key="subAlt"
1576+
id="colorPickerSubAlt"
15891577
/>
15901578
</div>
15911579
</div>
15921580
<div class="customThemeInput">
15931581
<label class="colorText">main</label>
1594-
<div class="colorPicker inputAndButton">
1595-
<input
1596-
type="text"
1597-
value="#000000"
1598-
class="input"
1599-
id="--main-color-txt"
1600-
/>
1601-
<label for="--main-color" class="button">
1582+
<div class="colorPicker inputAndButton" data-key="main">
1583+
<input type="text" value="#000000" class="input" />
1584+
<label for="colorPickerMain" class="button">
16021585
<i class="fas fa-fw fa-palette"></i>
16031586
</label>
16041587
<input
16051588
type="color"
16061589
class="color"
16071590
value="#000000"
1608-
id="--main-color"
1609-
data-key="main"
1591+
id="colorPickerMain"
16101592
/>
16111593
</div>
16121594
</div>
16131595
<div class="customThemeInput">
16141596
<label class="colorText">sub</label>
1615-
<div class="colorPicker inputAndButton">
1616-
<input
1617-
type="text"
1618-
value="#000000"
1619-
class="input"
1620-
id="--sub-color-txt"
1621-
/>
1597+
<div class="colorPicker inputAndButton" data-key="sub">
1598+
<input type="text" value="#000000" class="input" />
16221599
<label for="--sub-color" class="button">
16231600
<i class="fas fa-fw fa-palette"></i>
16241601
</label>
@@ -1627,49 +1604,36 @@
16271604
class="color"
16281605
value="#000000"
16291606
id="--sub-color"
1630-
data-key="sub"
16311607
/>
16321608
</div>
16331609
</div>
16341610
<div class="customThemeInput">
16351611
<label class="colorText">caret</label>
1636-
<div class="colorPicker inputAndButton">
1637-
<input
1638-
type="text"
1639-
value="#000000"
1640-
class="input"
1641-
id="--caret-color-txt"
1642-
/>
1643-
<label for="--caret-color" class="button">
1612+
<div class="colorPicker inputAndButton" data-key="caret">
1613+
<input type="text" value="#000000" class="input" />
1614+
<label for="colorPickerCaret" class="button">
16441615
<i class="fas fa-fw fa-palette"></i>
16451616
</label>
16461617
<input
16471618
type="color"
16481619
class="color"
16491620
value="#000000"
1650-
id="--caret-color"
1651-
data-key="caret"
1621+
id="colorPickerCaret"
16521622
/>
16531623
</div>
16541624
</div>
16551625
<div class="customThemeInput">
16561626
<label class="colorText">text</label>
1657-
<div class="colorPicker inputAndButton">
1658-
<input
1659-
type="text"
1660-
value="#000000"
1661-
class="input"
1662-
id="--text-color-txt"
1663-
/>
1664-
<label for="--text-color" class="button">
1627+
<div class="colorPicker inputAndButton" data-key="text">
1628+
<input type="text" value="#000000" class="input" />
1629+
<label for="colorPickerText" class="button">
16651630
<i class="fas fa-fw fa-palette"></i>
16661631
</label>
16671632
<input
16681633
type="color"
16691634
class="color"
16701635
value="#000000"
1671-
id="--text-color"
1672-
data-key="text"
1636+
id="colorPickerText"
16731637
/>
16741638
</div>
16751639
</div>
@@ -1678,87 +1642,66 @@
16781642

16791643
<div class="customThemeInput">
16801644
<label class="colorText">error</label>
1681-
<div class="colorPicker inputAndButton">
1682-
<input
1683-
type="text"
1684-
value="#000000"
1685-
class="input"
1686-
id="--error-color-txt"
1687-
/>
1688-
<label for="--error-color" class="button">
1645+
<div class="colorPicker inputAndButton" data-key="error">
1646+
<input type="text" value="#000000" class="input" />
1647+
<label for="colorPickerError" class="button">
16891648
<i class="fas fa-fw fa-palette"></i>
16901649
</label>
16911650
<input
16921651
type="color"
16931652
class="color"
16941653
value="#000000"
1695-
id="--error-color"
1696-
data-key="error"
1654+
id="colorPickerError"
16971655
/>
16981656
</div>
16991657
</div>
17001658
<div class="customThemeInput">
17011659
<label class="colorText">extra error</label>
1702-
<div class="colorPicker inputAndButton">
1703-
<input
1704-
type="text"
1705-
value="#000000"
1706-
class="input"
1707-
id="--error-extra-color-txt"
1708-
/>
1709-
<label for="--error-extra-color" class="button">
1660+
<div class="colorPicker inputAndButton" data-key="errorExtra">
1661+
<input type="text" value="#000000" class="input" />
1662+
<label for="colorPickerExtraError" class="button">
17101663
<i class="fas fa-fw fa-palette"></i>
17111664
</label>
17121665
<input
17131666
type="color"
17141667
class="color"
17151668
value="#000000"
1716-
id="--error-extra-color"
1717-
data-key="errorExtra"
1669+
id="colorPickerExtraError"
17181670
/>
17191671
</div>
17201672
</div>
17211673

17221674
<span class="colorfulHeader">colorful mode</span>
17231675
<div class="customThemeInput">
17241676
<label class="colorText">error</label>
1725-
<div class="colorPicker inputAndButton">
1726-
<input
1727-
type="text"
1728-
value="#000000"
1729-
class="input"
1730-
id="--colorful-error-color-txt"
1731-
/>
1732-
<label for="--colorful-error-color" class="button">
1677+
<div class="colorPicker inputAndButton" data-key="colorfulError">
1678+
<input type="text" value="#000000" class="input" />
1679+
<label for="colorPickerColorfulError" class="button">
17331680
<i class="fas fa-fw fa-palette"></i>
17341681
</label>
17351682
<input
17361683
type="color"
17371684
class="color"
17381685
value="#000000"
1739-
id="--colorful-error-color"
1740-
data-key="colorfulError"
1686+
id="colorPickerColorfulError"
17411687
/>
17421688
</div>
17431689
</div>
17441690
<div class="customThemeInput">
17451691
<label class="colorText">extra error</label>
1746-
<div class="colorPicker inputAndButton">
1747-
<input
1748-
type="text"
1749-
value="#000000"
1750-
class="input"
1751-
id="--colorful-error-extra-color-txt"
1752-
/>
1753-
<label for="--colorful-error-extra-color" class="button">
1692+
<div
1693+
class="colorPicker inputAndButton"
1694+
data-key="colorfulErrorExtra"
1695+
>
1696+
<input type="text" value="#000000" class="input" />
1697+
<label for="colorPickerColorfulErrorExtra" class="button">
17541698
<i class="fas fa-fw fa-palette"></i>
17551699
</label>
17561700
<input
17571701
type="color"
17581702
class="color"
17591703
value="#000000"
1760-
id="--colorful-error-extra-color"
1761-
data-key="colorfulErrorExtra"
1704+
id="colorPickerColorfulErrorExtra"
17621705
/>
17631706
</div>
17641707
</div>

‎frontend/src/ts/components/layout/Theme.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function Theme(): JSXElement {
1818

1919
createEffect(() => {
2020
const colors = themeColors();
21-
console.debug("Theme update colors", themeColors());
21+
console.debug("Theme controller update colors", colors);
2222
styleEl()?.setHtml(`
2323
:root {
2424
@@ -41,19 +41,19 @@ export function Theme(): JSXElement {
4141
const theme: ThemeType | undefined = themes[name as ThemeName];
4242
console.debug("Theme controller loading style", name);
4343

44-
const cssFile = theme?.hasCss ? `/themes/${themeName()}.css` : "";
44+
const hasCss = theme?.hasCss ?? false;
4545

46-
if (cssFile !== "") Loader.show();
46+
if (hasCss) Loader.show();
4747
linkEl()?.on("load", () => {
48-
console.debug("Theme controller loaded style", name);
48+
if (hasCss) console.debug("Theme controller loaded style", name);
4949
Loader.hide();
5050
});
5151
linkEl()?.on("error", (e) => {
5252
console.debug("Theme controller failed to load style", name, e);
5353
console.error(`Failed to load theme ${name}`, e);
5454
Notifications.add("Failed to load theme", 0);
5555
});
56-
linkEl()?.setAttribute("href", cssFile);
56+
linkEl()?.setAttribute("href", hasCss ? `/themes/${themeName()}.css` : "");
5757
});
5858

5959
return (

0 commit comments

Comments
 (0)