dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FINISH: Brightness Theme

Browse Source
This commit is contained in:
EvanLin3141
2025-02-27 15:50:00 +00:00
parent df19688488
commit dd8c953fb7
2 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/assets/styles/index.css
View File

@@ -71,6 +71,12 @@ body[data-theme="light"] {
--screenshot-bg-hover: rgb(65, 34, 93);
--screenshot-text: rgb(255, 255, 255);
--screenshot-text-hover: rgb(255, 255, 255);
/* Brightness */
--slider-header: rgb(183, 149, 214);
--slider-text: rgb(183, 149, 214);
--slider-bg: #ffffff;
}
body[data-theme="dark"] {
@@ -119,6 +125,11 @@ body[data-theme="dark"] {
--screenshot-bg-hover: rgb(231, 231, 231);
--screenshot-text: rgb(255, 255, 255);
--screenshot-text-hover: rgb(78, 78, 78);
/* Brightness */
--slider-header: rgb(255, 255, 255);
--slider-text: rgb(255, 255, 255);
--slider-bg: #000000;
}
body[data-theme="blue"] {
@@ -166,6 +177,11 @@ body[data-theme="blue"] {
--screenshot-bg-hover: rgb(18, 137, 255);
--screenshot-text: rgb(255, 255, 255);
--screenshot-text-hover: rgb(255, 255, 255);
/* Brightness */
--slider-header: rgb(15, 103, 192);
--slider-text: rgb(15, 103, 192);
--slider-bg: #eefaff98;
}
body[data-theme="green"] {
@@ -213,6 +229,12 @@ body[data-theme="green"] {
--screenshot-bg-hover: rgb(0, 151, 73);
--screenshot-text: rgb(1, 61, 30);
--screenshot-text-hover: rgb(255, 255, 0);
/* Brightness */
--slider-header: rgb(15, 192, 44);
--slider-text: rgb(15, 192, 15);
--slider-bg: #e8f5e9;
}
body[data-theme="orange"] {
@@ -260,6 +282,11 @@ body[data-theme="orange"] {
--screenshot-bg-hover: rgb(255, 128, 0);
--screenshot-text: rgb(255, 255, 255);
--screenshot-text-hover: rgb(255, 255, 5);
/* Brightness */
--slider-header: rgb(255, 0, 0);
--slider-text: rgb(255, 0, 0);
--slider-bg: #fff3dc;
}
body {
@@ -272,8 +299,6 @@ body {
}
/*
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

7
frontend/src/components/Functionality/BrightnessControl.tsx
View File

@@ -14,8 +14,9 @@ const BrightnessControl: React.FC = () => {
};
return (
<div className="flex flex-col items-center p-4">
<h2 className="text-lg font-semibold mb-2">Brightness Control</h2>
<div id="slider" className="flex flex-col items-center p-4 mt-7 bg-[var(--slider-bg)] rounded-xl">
<h2 className="text-lg font-semibold mb-2 text-[var(--slider-header)]">Brightness Control</h2>
{/* Changes based on the range of input */}
<input
type="range"
@@ -26,7 +27,7 @@ const BrightnessControl: React.FC = () => {
className="w-60 cursor-pointer"
/>
<p className="mt-2 text-sm">Brightness: {brightness}%</p>
<p className="mt-2 text-sm text-[var(--slider-text)]">Brightness: {brightness}%</p>
</div>
);
};