Skip to content

Commit 18faad2

Browse files
author
abhijeet10052002
committed
Added theme picker
1 parent 3f046f9 commit 18faad2

File tree

3 files changed

+551
-362
lines changed

3 files changed

+551
-362
lines changed

‎client/css/style.css

Lines changed: 117 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,25 @@
99
--colour-6: #000000;
1010
1111
--accent: #ffffff;
12-
--blur-bg: #98989866;
12+
--colour-1: #98989866;
1313
--blur-border: #00000040;
1414
--user-input: #000000;
1515
--conversations: #000000;
1616
} */
1717

1818
:root {
19-
--colour-1: #000000;
20-
--colour-2: #ccc;
21-
--colour-3: #e4d4ff;
22-
--colour-4: #f0f0f0;
23-
--colour-5: #181818;
24-
--colour-6: #242424;
19+
--colour-1: #000000; /* Background colour behind the chat box area*/
20+
--colour-2: #c8b4b4;
21+
--colour-3: #000000; /* Font colour */
22+
--colour-4: #371595;
23+
--colour-5: #34bd8f;
24+
--colour-6: #d04545;
2525

26-
--accent: #8b3dff;
27-
--blur-bg: #16101b66;
28-
--blur-border: #84719040;
29-
--user-input: #ac87bb;
30-
--conversations: #c7a2ff;
26+
--accent: hsl(0, 80%, 49%);
27+
--colour-1: hsl(210, 21%, 85%);
28+
--blur-border: hsl(0, 7%, 86%);
29+
--user-input: hsl(18, 29%, 27%);
30+
--conversations: hsl(207, 93%, 48%); /*Dashed line boxes and icons colour*/
3131
}
3232

3333
:root {
@@ -66,7 +66,7 @@ body {
6666
.box {
6767
backdrop-filter: blur(20px);
6868
-webkit-backdrop-filter: blur(20px);
69-
background-color: var(--blur-bg);
69+
background-color: var(--colour-1);
7070
height: 100%;
7171
width: 100%;
7272
border-radius: var(--border-radius-1);
@@ -281,7 +281,7 @@ body {
281281
.stop_generating button {
282282
backdrop-filter: blur(20px);
283283
-webkit-backdrop-filter: blur(20px);
284-
background-color: var(--blur-bg);
284+
background-color: var(--colour-1);
285285
border-radius: var(--border-radius-1);
286286
border: 1px solid var(--blur-border);
287287
padding: 10px 15px;
@@ -345,7 +345,7 @@ label {
345345
height: 30px;
346346
backdrop-filter: blur(20px);
347347
-webkit-backdrop-filter: blur(20px);
348-
background-color: var(--blur-bg);
348+
background-color: var(--colour-1);
349349
border-radius: var(--border-radius-1);
350350
border: 1px solid var(--blur-border);
351351
display: block;
@@ -406,7 +406,7 @@ select {
406406
backdrop-filter: blur(20px);
407407

408408
cursor: pointer;
409-
background-color: var(--blur-bg);
409+
background-color: var(--colour-1);
410410
border: 1px solid var(--blur-border);
411411
color: var(--colour-3);
412412
display: block;
@@ -453,7 +453,7 @@ select {
453453
cursor: pointer;
454454
user-select: none;
455455
background: transparent;
456-
border: 1px solid #c7a2ff;
456+
border: 1px dashed var(--conversations);
457457
border-radius: var(--border-radius-1);
458458
width: 100%;
459459
}
@@ -550,7 +550,7 @@ ul {
550550
cursor: pointer;
551551
backdrop-filter: blur(20px);
552552
-webkit-backdrop-filter: blur(20px);
553-
background-color: var(--blur-bg);
553+
background-color: var(--colour-1);
554554
border-radius: 10px;
555555
border: 1px solid var(--blur-border);
556556
width: 40px;
@@ -678,4 +678,102 @@ a:-webkit-any-link {
678678
position: absolute;
679679
white-space: nowrap;
680680
width: 1px
681-
}
681+
}
682+
683+
.visually-hidden {
684+
clip: rect(0 0 0 0);
685+
clip-path: inset(50%);
686+
height: 1px;
687+
overflow: hidden;
688+
position: absolute;
689+
white-space: nowrap;
690+
width: 1px;
691+
}
692+
693+
.color-picker > fieldset {
694+
border: 0;
695+
display: flex;
696+
gap: 2rem;
697+
width: fit-content;
698+
background: var(--colour-1);
699+
padding: 1rem 3rem;
700+
margin-inline: auto;
701+
border-radius: var(--border-radius-1);
702+
703+
}
704+
705+
.color-picker input[type="radio"]:checked {
706+
background-color: var(--radio-color);
707+
}
708+
709+
.color-picker input[type="radio"]#light {
710+
--radio-color: gray;
711+
}
712+
.color-picker input[type="radio"]#pink {
713+
--radio-color: pink;
714+
}
715+
.color-picker input[type="radio"]#blue {
716+
--radio-color: blue;
717+
}
718+
.color-picker input[type="radio"]#green {
719+
--radio-color: green;
720+
}
721+
.color-picker input[type="radio"]#dark {
722+
--radio-color: #232323;
723+
}
724+
725+
.pink {
726+
--colour-1: hsl(310 50% 90%);
727+
--clr-card-bg: hsl(310 50% 100%);
728+
--colour-3: hsl(310 50% 15%);
729+
--conversations: hsl(310 50% 25%);
730+
}
731+
732+
.blue {
733+
--colour-1: hsl(209 50% 90%);
734+
--clr-card-bg: hsl(209 50% 100%);
735+
--colour-3: hsl(209 50% 15%);
736+
--conversations: hsl(209 50% 25%);
737+
}
738+
739+
.green {
740+
--colour-1: hsl(109 50% 90%);
741+
--clr-card-bg: hsl(109 50% 100%);
742+
--colour-3: hsl(109 50% 15%);
743+
--conversations: hsl(109 50% 25%);
744+
}
745+
746+
.dark {
747+
--colour-1: hsl(209 50% 10%);
748+
--clr-card-bg: hsl(209 50% 5%);
749+
--colour-3: hsl(209 50% 90%);
750+
--conversations: hsl(209 50% 80%);
751+
}
752+
753+
:root:has(#pink:checked) {
754+
--colour-1: hsl(310 50% 90%);
755+
--clr-card-bg: hsl(310 50% 100%);
756+
--colour-3: hsl(310 50% 15%);
757+
--conversations: hsl(310 50% 25%);
758+
}
759+
760+
:root:has(#blue:checked) {
761+
--colour-1: hsl(209 50% 90%);
762+
--clr-card-bg: hsl(209 50% 100%);
763+
--colour-3: hsl(209 50% 15%);
764+
--conversations: hsl(209 50% 25%);
765+
}
766+
767+
:root:has(#green:checked) {
768+
--colour-1: hsl(109 50% 90%);
769+
--clr-card-bg: hsl(109 50% 100%);
770+
--colour-3: hsl(109 50% 15%);
771+
--conversations: hsl(109 50% 25%);
772+
}
773+
774+
:root:has(#dark:checked) {
775+
--colour-1: hsl(209 50% 10%);
776+
--clr-card-bg: hsl(209 50% 5%);
777+
--colour-3: hsl(209 50% 90%);
778+
--conversations: hsl(209 50% 80%);
779+
}

‎client/html/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,26 @@
128128
<option value="gpt-evil-1.0">evil 1.0</option>
129129
</select>
130130
</div>
131+
132+
<form class="color-picker" action="">
133+
<fieldset>
134+
<legend class="visually-hidden">Pick a color scheme</legend>
135+
<label for="light" class="visually-hidden">Light</label>
136+
<input type="radio" name="theme" id="light" checked>
137+
138+
<label for="pink" class="visually-hidden">Pink theme</label>
139+
<input type="radio" id="pink" name="theme">
140+
141+
<label for="blue" class="visually-hidden">Blue theme</label>
142+
<input type="radio" id="blue" name="theme">
143+
144+
<label for="green" class="visually-hidden">Green theme</label>
145+
<input type="radio" id="green" name="theme">
146+
147+
<label for="dark" class="visually-hidden">Dark theme</label>
148+
<input type="radio" id="dark" name="theme">
149+
</fieldset>
150+
</form>
131151
</div>
132152
</div>
133153
</div>

0 commit comments

Comments
 (0)