Skip to content

Commit

Permalink
fix: more or less lightmode fix..
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lulalaby
Lulalaby committed Dec 31, 2023
1 parent 4978db2 commit 5d9ed69
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 20 deletions.
20 changes: 10 additions & 10 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -527,10 +527,10 @@ export default function Header() {
<div className="flex items-center justify-center min-h-screen">
<Dialog.Overlay className="fixed inset-0 bg-black/30" />
<div className="relative p-4 w-full max-w-4xl md:h-auto h-full">
<div className="relative shadow-lg bg-[#36393f] ">
<div className="flex justify-between items-center p-5 rounded-t bg-[#2b2d31]">
<div className="relative shadow-lg dark:bg-[#36393f] bg-[#d1d5db]">
<div className="flex justify-between items-center p-5 rounded-t dark:bg-[#2b2d31] bg-[#eeeeee]">
<h3
className="text-xl font-medium text-white uppercase"
className="text-xl font-medium dark:text-white text-black uppercase"
style={{
fontFamily:
"Ginto,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif",
Expand Down Expand Up @@ -561,7 +561,7 @@ export default function Header() {
</div>

<div className="overflow-y-auto h-[280px]">
<div className="py-4 px-2 lg:py-6 lg:px-8 md:py-6 md:px-8 sm:py-6 sm:px-8 text-white font-bold text-lg">
<div className="py-4 px-2 lg:py-6 lg:px-8 md:py-6 md:px-8 sm:py-6 sm:px-8 dark:text-white text-black font-bold text-lg">
THEME
<br />
<div
Expand All @@ -580,7 +580,7 @@ export default function Header() {
onChange={() => {}}
checked={theme === "dark"}
/>
<label htmlFor="dark">Dark</label>
<label htmlFor="dark" className={theme === "light" ? "light" : ""}>Dark</label>
</div>
<div
className="toggle"
Expand All @@ -598,7 +598,7 @@ export default function Header() {
onChange={() => {}}
checked={theme === "light"}
/>
<label htmlFor="light">Light</label>
<label htmlFor="light" className={theme === "light" ? "light" : ""}>Light</label>
</div>
<br />
Language
Expand Down Expand Up @@ -718,23 +718,23 @@ export default function Header() {
}}
id={"debug"}
type="checkbox"
className="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
className="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
/>
<label
htmlFor={"debug"}
className="pl-2 font-medium text-white font-mono"
className="pl-2 font-medium dark:text-white text-black font-mono"
style={{
fontSize: "18px",
}}
>
Turn debug mode on (recommended)
Turn on debug mode (recommended)
</label>
</div>
</div>
</div>
</div>

<div className="flex items-center p-6 space-x-2 rounded-b bg-[#2b2d31]">
<div className="flex items-center p-6 space-x-2 rounded-b dark:bg-[#2b2d31] bg-[#eeeeee]">
<button
onClick={() => {
setSettings(false);
Expand Down
20 changes: 10 additions & 10 deletions components/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ export default function Settings(): ReactElement {
<div className="flex items-center justify-center min-h-screen">
<Dialog.Overlay className="fixed inset-0 bg-black/30" />
<div className="relative p-4 w-full max-w-4xl md:h-auto h-full">
<div className="relative shadow-lg bg-[#36393f] ">
<div className="flex justify-between items-center p-5 rounded-t bg-[#2b2d31]">
<div className="relative shadow-lg dark:bg-[#36393f] bg-[#d1d5db]">
<div className="flex justify-between items-center p-5 rounded-t dark:bg-[#2b2d31] bg-[#eeeeee]">
<h3
className="text-xl font-medium text-white uppercase"
className="text-xl font-medium dark:text-white text-black uppercase"
style={{
fontFamily:
"Ginto,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif",
Expand All @@ -63,7 +63,7 @@ export default function Settings(): ReactElement {
setSettings(false);
}}
type="button"
className="text-gray-400 bg-transparent hover:bg-[#2f3136] hover:text-gray-200 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center "
className="dark:text-gray-400 text-black-400 bg-transparent hover:bg-[#2f3136] hover:text-gray-200 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center "
>
<svg
className="w-5 h-5"
Expand All @@ -81,7 +81,7 @@ export default function Settings(): ReactElement {
</div>

<div className="overflow-y-auto h-[280px]">
<div className="py-4 px-2 lg:py-6 lg:px-8 md:py-6 md:px-8 sm:py-6 sm:px-8 text-white font-bold text-lg">
<div className="py-4 px-2 lg:py-6 lg:px-8 md:py-6 md:px-8 sm:py-6 sm:px-8 dark:text-white text-black font-bold text-lg">
THEME
<br />
<div
Expand All @@ -100,7 +100,7 @@ export default function Settings(): ReactElement {
onChange={() => {}}
checked={theme === "dark"}
/>
<label htmlFor="dark">Dark</label>
<label htmlFor="dark" className={theme === "light" ? "light" : ""}>Dark</label>
</div>
<div
className="toggle"
Expand All @@ -118,7 +118,7 @@ export default function Settings(): ReactElement {
onChange={() => {}}
checked={theme === "light"}
/>
<label htmlFor="light">Light</label>
<label htmlFor="light" className={theme === "light" ? "light" : ""}>Light</label>
</div>
<br />
Language
Expand All @@ -138,13 +138,13 @@ export default function Settings(): ReactElement {
alt=""
className="flex-shrink-0 h-6 w-6 rounded-full"
/>
<span className="ml-3 block truncate text-slate-900 dark:text-white">
<span className="ml-3 block truncate text-slate-900 dark:text-white text-black">
{selected.name}
</span>
</span>
<span className="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
className="h-5 w-5 text-gray-400"
className="h-5 w-5 dark:text-gray-400 text-white:400"
aria-hidden="true"
/>
</span>
Expand Down Expand Up @@ -225,7 +225,7 @@ export default function Settings(): ReactElement {
</div>
</div>

<div className="flex items-center p-6 space-x-2 rounded-b bg-[#2b2d31]">
<div className="flex items-center p-6 space-x-2 rounded-b dark:bg-[#2b2d31] bg-[#eeeeee]">
<button
onClick={() => {
setSettings(false);
Expand Down
19 changes: 19 additions & 0 deletions pages/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -475,17 +475,36 @@ input[type="search"]:focus {
cursor: pointer;
}

.toggle.light {
color: rgb(0, 0, 0);
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
cursor: pointer;
}

.toggle label {
margin-left: 5px;
color: rgb(228, 217, 217);
cursor: pointer;
pointer-events: none;
}

.toggle label.light {
margin-left: 5px;
color: rgb(11, 0, 0);
cursor: pointer;
pointer-events: none;
}

.toggle input:checked + label {
color: rgb(255, 255, 255);
}

.light {
color: rgb(0, 0, 0) !important;
}

.tippy-content {
pointer-events: all !important;
}
Expand Down

0 comments on commit 5d9ed69

Please sign in to comment.