Skip to content

Commit 3177722

Browse files
devklickdevklick
committed
Themable font color
1 parent a3c4379 commit 3177722

10 files changed

Lines changed: 283 additions & 11 deletions

File tree

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/icon_empty.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>React Desktop</title>
88
</head>

‎public/icon.svg‎

Lines changed: 122 additions & 0 deletions
Loading

‎public/icon_empty.svg‎

Lines changed: 115 additions & 0 deletions
Loading

‎src/components/Desktop/Desktop.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface DesktopProps {}
1111
function Desktop({}: DesktopProps) {
1212
const settings = useSystemSettings();
1313
return (
14-
<div id="desktop">
14+
<div id="desktop" style={{ color: settings.fontColor }}>
1515
<div
1616
id="desktop__background"
1717
style={{

‎src/components/TopBar/SystemTray/PowerMenu/PowerMenu.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
height: 20px;
1212
aspect-ratio: 1/1;
1313
width: auto;
14-
path {
15-
fill: white;
16-
}
14+
// path {
15+
// fill: white;
16+
// }
1717
}
1818
}

‎src/index.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
body {
22
margin: 0;
33
font-family: sans-serif;
4-
color: white;
54
overflow: hidden;
65
-webkit-user-select: none; /* Safari */
76
-ms-user-select: none; /* IE 10 and IE 11 */

‎src/programs/Calculator/Calculator.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@
5757
display: flex;
5858
justify-content: center;
5959
align-items: center;
60-
color: white;
6160

6261
&:hover {
6362
backdrop-filter: brightness(150%);

‎src/programs/Settings/Settings.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,16 @@ function SettingsSection(section: SettingsSectionProps) {
4343
}
4444

4545
if (section.valueValidation) {
46-
console.error("Not a valid value");
4746
const error = section.valueValidation(newValue);
48-
if (error) return;
47+
if (error) {
48+
console.error("Not a valid value", newValue);
49+
return;
50+
}
4951
}
5052
section.onValueChanged(newValue);
5153
}, 1000);
5254
}
5355

54-
console.log("value is ", value);
5556
return (
5657
<div className="settings__page-section">
5758
<h1 className="settings__page-section__title">{section.title}</h1>

‎src/programs/Settings/settingsPageConfig.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function getPages(
4343
{
4444
title: "Accent Color",
4545
description:
46-
"The accent for the desktop UI, for things such as currently-selected items",
46+
"The accent for the desktop UI, for things such as currently-selected items (not yet supported)",
4747
currentValue: systemsSettings.accentColor,
4848
type: "color",
4949
valueValidation: (value) =>
@@ -52,6 +52,30 @@ export function getPages(
5252
systemsSettings.setAccentColor(value);
5353
},
5454
},
55+
{
56+
title: "Font Color",
57+
description: "The color to display the main UI font in",
58+
currentValue: systemsSettings.fontColor,
59+
type: "color",
60+
valueValidation: (value) =>
61+
isHexColorCode(value) ? undefined : "Invalid HEX color code",
62+
onValueChanged(value) {
63+
systemsSettings.setFontColor(value);
64+
},
65+
},
66+
{
67+
title: "Icon Color",
68+
description: `The color to display any basic icons in. This will affect icons which
69+
are essentially just outlines, however more complex icons such as launcher
70+
icons will remain unaffected (not yet supported)`,
71+
currentValue: systemsSettings.iconColor,
72+
type: "color",
73+
valueValidation: (value) =>
74+
isHexColorCode(value) ? undefined : "Invalid HEX color code",
75+
onValueChanged(value) {
76+
systemsSettings.setIconColor(value);
77+
},
78+
},
5579
],
5680
},
5781
};

‎src/stores/systemSettingsStore.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@ import { persist } from "zustand/middleware";
44
export interface SystemSettingState {
55
mainColor: string;
66
accentColor: string;
7+
fontColor: string;
8+
iconColor: string;
79
background: string;
810
setMainColor: (color: string) => void;
911
setAccentColor: (color: string) => void;
12+
setFontColor: (color: string) => void;
13+
setIconColor: (color: string) => void;
1014
setBackground: (url: string) => void;
1115
}
1216

@@ -15,13 +19,21 @@ export const useSystemSettings = create<SystemSettingState>()(
1519
(set) => ({
1620
mainColor: "#2e3440",
1721
accentColor: "#ffffff",
22+
fontColor: "#ffffff",
23+
iconColor: "#ffffff",
1824
background: "https://regolith-linux.org/images/releases/nord-dark.png",
1925
setAccentColor(accentColor) {
2026
set({ accentColor });
2127
},
2228
setMainColor(mainColor) {
2329
set({ mainColor });
2430
},
31+
setFontColor(fontColor) {
32+
set({ fontColor });
33+
},
34+
setIconColor(iconColor) {
35+
set({ iconColor });
36+
},
2537
setBackground(background) {
2638
set({ background });
2739
},

0 commit comments

Comments
 (0)