Skip to content

Commit 4c8cf6c

Browse files
KittenPrincess1KittenPrincess1
committed
Added Black and white colour scheme
1 parent 92d17b7 commit 4c8cf6c

File tree

3 files changed

+134
-53
lines changed

3 files changed

+134
-53
lines changed

‎src/components/DataStructures/common/stylesheet/index.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
@import "colors";
22
@import "dimensions";
3-
@import "fonts";
3+
@import "fonts";

‎src/components/top/helper.js

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -72,29 +72,37 @@ export const ALGO_THEME_KEY = 'algo-theme';
7272
export const ALGO_THEME_1 = 'default';
7373
const ALGO_THEME_2 = 'green';
7474
const ALGO_THEME_3 = 'red';
75+
const ALGO_THEME_4 = 'grey';
7576

76-
// Color Scheme
77+
// Color Scheme as shown in the settings tab (changing this will not change the colours of the algorithm)
7778
export const allColBtn = [
7879
{
7980
id: ALGO_THEME_1,
8081
primary: 'positive1',
8182
secondary: 'negative1',
82-
third:'hint1',
83-
fourth:'back-up1',
83+
third: 'hint1',
84+
fourth: 'back-up1',
8485
},
8586
{
8687
id: ALGO_THEME_2,
8788
primary: 'positive2',
8889
secondary: 'negative2',
89-
third:'hint2',
90-
fourth:'back-up2',
90+
third: 'hint2',
91+
fourth: 'back-up2',
9192
},
9293
{
9394
id: ALGO_THEME_3,
9495
primary: 'cyan',
9596
secondary: 'purple',
96-
third:'green',
97-
fourth:'yellow',
97+
third: 'green',
98+
fourth: 'yellow',
99+
},
100+
{
101+
id: ALGO_THEME_4,
102+
primary: 'white',
103+
secondary: 'grey',
104+
third: 'dark-grey',
105+
fourth: 'black',
98106
},
99107
];
100108

@@ -107,15 +115,15 @@ export const allSystemCol = [
107115
id: SYSTEM_THEME_1,
108116
primary: 'white',
109117
secondary: 'white',
110-
third:'white',
111-
fourth:'white',
118+
third: 'white',
119+
fourth: 'white',
112120
},
113121
{
114122
id: SYSTEM_THEME_2,
115123
primary: 'black',
116124
secondary: 'black',
117-
third:'black',
118-
fourth:'black',
125+
third: 'black',
126+
fourth: 'black',
119127
},
120128
];
121129

@@ -154,6 +162,7 @@ export function getWithExpiry(key) {
154162
const EXPIRE_SEC = (86400) * 1000; // 1 day
155163
// const EXPIRE_SEC = 5 * 1000; // 5 sec
156164

165+
// handles setting the system theme (light or dark)
157166
export function setTheme(theme) {
158167
if (theme === SYSTEM_THEME_1) {
159168
setWithExpiry(SYSTEM_THEME_KEY, SYSTEM_THEME_1, EXPIRE_SEC);
@@ -183,5 +192,8 @@ export function setAlgoTheme(theme) {
183192
} else if (theme === ALGO_THEME_3) {
184193
setWithExpiry(ALGO_THEME_KEY, ALGO_THEME_3, EXPIRE_SEC);
185194
document.documentElement.setAttribute(ALGO_THEME_KEY, ALGO_THEME_3);
195+
} else if (theme === ALGO_THEME_4) {
196+
setWithExpiry(ALGO_THEME_KEY, ALGO_THEME_4, EXPIRE_SEC);
197+
document.documentElement.setAttribute(ALGO_THEME_KEY, ALGO_THEME_4);
186198
}
187199
}

‎src/styles/global.scss

Lines changed: 110 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
//this folder represents the colours used for the algorithm visualisation, and for the light and dark themes
2+
13
// Shared Colors and Sizes
24
$blue: #037DFF;
35
$sigBlue: #027AFF;
@@ -67,8 +69,8 @@ $yellowLine: #FFDE3C;
6769
--mid-control-param-border: #D4D4D4;
6870
--mid-control-param-btn-active: #6a6a6a;
6971
--mid-control-param-btn-disabled: #b5b5b5;
70-
--mid-control-param-btn-active-col: #027AFF;
71-
72+
--mid-control-param-btn-active-col: #027AFF;
73+
7274
--mid-control-param-btn-bg-hover: #f7f7f7;
7375
--mid-control-param-btn-bg-active: #E3E2E4;
7476
--mid-control-param-btn-bg-col-hover: #d5eaff;
@@ -132,32 +134,38 @@ $yellowLine: #FFDE3C;
132134
--graph-node-id-fill-sorted: #FFFFFF;
133135
--graph-node-circle-fill-visited: #ee0970;
134136
--graph-node-circle-stroke-visited: #ee0970;
135-
--graph-node-id-fill-visited: #FFFFFF;
137+
--graph-node-id-fill-visited: #FFFFFF;
136138

137139
// colors for easy graph functions:
138140
--graph-node-circle-fill-visited1: #11cc77;
139141
--graph-node-circle-stroke-visited1: #11cc77;
140142
--graph-node-circle-fill-visited2: #f58b2f;
141-
--graph-node-circle-stroke-visited2: #f58b2f;
142-
--graph-node-circle-fill-visited3: #FF0000; /* YouTube Red */
143-
--graph-node-circle-stroke-visited3: #FF0000; /* YouTube Red */
144-
--graph-node-circle-fill-visited4: #2289ff; /* Twitter Blue */
145-
--graph-node-circle-stroke-visited4: #2289ff;
143+
--graph-node-circle-stroke-visited2: #f58b2f;
144+
--graph-node-circle-fill-visited3: #FF0000;
145+
/* YouTube Red */
146+
--graph-node-circle-stroke-visited3: #FF0000;
147+
/* YouTube Red */
148+
--graph-node-circle-fill-visited4: #2289ff;
149+
/* Twitter Blue */
150+
--graph-node-circle-stroke-visited4: #2289ff;
146151

147152
--graph-edge-line-stroke-visited1: #11cc77;
148153
--graph-edge-line-stroke-visited2: #f58b2f;
149-
--graph-edge-line-stroke-visited3: #FF0000; /* YouTube Red */
150-
--graph-edge-line-stroke-visited4: #2289ff;
154+
--graph-edge-line-stroke-visited3: #FF0000;
155+
/* YouTube Red */
156+
--graph-edge-line-stroke-visited4: #2289ff;
151157
--graph-edge-weight-fill-visited1: #11cc77;
152158
--graph-edge-weight-fill-visited2: #f58b2f;
153-
--graph-edge-weight-fill-visited3: #FF0000; /* YouTube Red */
154-
--graph-edge-weight-fill-visited4: #2289ff;
159+
--graph-edge-weight-fill-visited3: #FF0000;
160+
/* YouTube Red */
161+
--graph-edge-weight-fill-visited4: #2289ff;
155162
--graph-arrow-fill-visited1: #11cc77;
156-
--graph-arrow-fill-visited2: #f58b2f;
157-
--graph-arrow-fill-visited3: #FF0000; /* YouTube Red */
158-
--graph-arrow-fill-visited4: #2289ff;
163+
--graph-arrow-fill-visited2: #f58b2f;
164+
--graph-arrow-fill-visited3: #FF0000;
165+
/* YouTube Red */
166+
--graph-arrow-fill-visited4: #2289ff;
167+
159168

160-
161169

162170
--graph-text-fill: #1809ee;
163171
--graph-text-stroke: #1809ee;
@@ -180,9 +188,9 @@ $yellowLine: #FFDE3C;
180188
--array-2d-row-col-bg-selected: #2289ff;
181189
--array-2d-row-col-bg-selected1: #11cc77;
182190
--array-2d-row-col-bg-selected2: #8ac0ff;
183-
--array-2d-row-col-bg-selected3: #8fdbb9;
184-
--array-2d-row-col-bg-selected4: #FF0000;
185-
--array-2d-row-col-bg-selected5: #f58b2f;
191+
--array-2d-row-col-bg-selected3: #8fdbb9;
192+
--array-2d-row-col-bg-selected4: #FF0000;
193+
--array-2d-row-col-bg-selected5: #f58b2f;
186194

187195
--array-2d-row-col-selected: #FFFFFF;
188196
--array-2d-row-col-bg-patched: #f58b2f;
@@ -354,24 +362,30 @@ $yellowLine: #FFDE3C;
354362
--graph-node-circle-fill-visited1: #11cc77;
355363
--graph-node-circle-stroke-visited1: #11cc77;
356364
--graph-node-circle-fill-visited2: #f58b2f;
357-
--graph-node-circle-stroke-visited2: #f58b2f;
358-
--graph-node-circle-fill-visited3: #FF0000; /* YouTube Red */
359-
--graph-node-circle-stroke-visited3: #FF0000; /* YouTube Red */
360-
--graph-node-circle-fill-visited4: #2289ff; /* Twitter Blue */
361-
--graph-node-circle-stroke-visited4: #2289ff;
365+
--graph-node-circle-stroke-visited2: #f58b2f;
366+
--graph-node-circle-fill-visited3: #FF0000;
367+
/* YouTube Red */
368+
--graph-node-circle-stroke-visited3: #FF0000;
369+
/* YouTube Red */
370+
--graph-node-circle-fill-visited4: #2289ff;
371+
/* Twitter Blue */
372+
--graph-node-circle-stroke-visited4: #2289ff;
362373

363374
--graph-edge-line-stroke-visited1: #11cc77;
364375
--graph-edge-line-stroke-visited2: #f58b2f;
365-
--graph-edge-line-stroke-visited3: #FF0000; /* YouTube Red */
366-
--graph-edge-line-stroke-visited4: #2289ff;
376+
--graph-edge-line-stroke-visited3: #FF0000;
377+
/* YouTube Red */
378+
--graph-edge-line-stroke-visited4: #2289ff;
367379
--graph-edge-weight-fill-visited1: #11cc77;
368380
--graph-edge-weight-fill-visited2: #f58b2f;
369-
--graph-edge-weight-fill-visited3: #FF0000; /* YouTube Red */
370-
--graph-edge-weight-fill-visited4: #2289ff;
381+
--graph-edge-weight-fill-visited3: #FF0000;
382+
/* YouTube Red */
383+
--graph-edge-weight-fill-visited4: #2289ff;
371384
--graph-arrow-fill-visited1: #11cc77;
372-
--graph-arrow-fill-visited2: #f58b2f;
373-
--graph-arrow-fill-visited3: #FF0000; /* YouTube Red */
374-
--graph-arrow-fill-visited4: #2289ff;
385+
--graph-arrow-fill-visited2: #f58b2f;
386+
--graph-arrow-fill-visited3: #FF0000;
387+
/* YouTube Red */
388+
--graph-arrow-fill-visited4: #2289ff;
375389

376390
--graph-edge-line-stroke: #464646;
377391
--graph-edge-line-weight-fill: #717171;
@@ -391,7 +405,7 @@ $yellowLine: #FFDE3C;
391405
--array-2d-row-col-bg-selected1: #11cc77;
392406
--array-2d-row-col-bg-selected2: #8ac0ff;
393407
--array-2d-row-col-bg-selected3: #8fdbb9;
394-
--array-2d-row-col-bg-selected4: #FF0000;
408+
--array-2d-row-col-bg-selected4: #FF0000;
395409
--array-2d-row-col-bg-selected5: #f58b2f;
396410
--array-2d-row-col-selected: #FFFFFF;
397411
--array-2d-row-col-bg-patched: #f58b2f;
@@ -452,21 +466,23 @@ $yellowLine: #FFDE3C;
452466
--graph-edge-line-stroke-visited: #2289ff;
453467
--graph-edge-line-stroke-visited1: #11cc77;
454468
--graph-edge-line-stroke-visited2: #f58b2f;
455-
--graph-edge-line-stroke-visited3: #FF0000; /* YouTube Red */
456-
--graph-edge-line-stroke-visited4: #2289ff;
469+
--graph-edge-line-stroke-visited3: #FF0000;
470+
/* YouTube Red */
471+
--graph-edge-line-stroke-visited4: #2289ff;
457472
--graph-edge-weight-fill-visited: #2289ff;
458473
--graph-edge-weight-fill-visited1: #11cc77;
459474
--graph-edge-weight-fill-visited2: #f58b2f;
460-
--graph-edge-weight-fill-visited3: #FF0000; /* YouTube Red */
461-
--graph-edge-weight-fill-visited4: #2289ff;
475+
--graph-edge-weight-fill-visited3: #FF0000;
476+
/* YouTube Red */
477+
--graph-edge-weight-fill-visited4: #2289ff;
462478

463479

464480
--graph-arrow-fill-selected: #ee0970;
465481
--graph-arrow-fill-visited: #2289ff;
466482
--graph-arrow-fill-visited1: #11cc77;
467483
--graph-arrow-fill-visited2: #f58b2f;
468484
--graph-arrow-fill-visited3: #FF0000;
469-
--graph-arrow-fill-visited4: #2289ff;
485+
--graph-arrow-fill-visited4: #2289ff;
470486

471487
--array-1d-row-col-bg-selected: #e85c49;
472488
--array-1d-row-col-bg-patched: #83d489;
@@ -476,7 +492,7 @@ $yellowLine: #FFDE3C;
476492
--array-2d-row-col-bg-selected1: #11cc77;
477493
--array-2d-row-col-bg-selected2: #8ac0ff;
478494
--array-2d-row-col-bg-selected3: #8fdbb9;
479-
--array-2d-row-col-bg-selected4: #FF0000;
495+
--array-2d-row-col-bg-selected4: #FF0000;
480496
--array-2d-row-col-bg-selected5: #f58b2f;
481497
--array-2d-row-col-bg-patched: #f58b2f;
482498
--array-2d-row-col-sorted: #FFFFFF;
@@ -531,8 +547,8 @@ $yellowLine: #FFDE3C;
531547
--array-2d-row-col-bg-selected1: #11cc77;
532548
--array-2d-row-col-bg-selected2: #8ac0ff;
533549
--array-2d-row-col-bg-selected3: #8fdbb9;
534-
--array-2d-row-col-bg-selected4: #FF0000;
535-
--array-2d-row-col-bg-selected5: #f58b2f;
550+
--array-2d-row-col-bg-selected4: #FF0000;
551+
--array-2d-row-col-bg-selected5: #f58b2f;
536552
--array-2d-row-col-bg-patched: #258bff;
537553
--array-2d-row-col-sorted: #ffffff;
538554

@@ -585,7 +601,7 @@ $yellowLine: #FFDE3C;
585601
--array-2d-row-col-bg-selected1: #11cc77;
586602
--array-2d-row-col-bg-selected2: #8ac0ff;
587603
--array-2d-row-col-bg-selected3: #8fdbb9;
588-
--array-2d-row-col-bg-selected4: #FF0000;
604+
--array-2d-row-col-bg-selected4: #FF0000;
589605
--array-2d-row-col-bg-selected5: #f58b2f;
590606
--array-2d-row-col-bg-patched: #9f2fe4;
591607
--array-2d-row-col-sorted: #ffffff;
@@ -615,6 +631,59 @@ $yellowLine: #FFDE3C;
615631
--simple-fill-var-red: #9f2ee4;
616632
}
617633

634+
// Override Algorithm Colours [Grey]
635+
[algo-theme="grey"] {
636+
--graph-node-circle-fill-selected: #000000;
637+
--graph-node-circle-stroke-selected: #000000;
638+
--graph-node-circle-fill-visited: #3e3e3e;
639+
--graph-node-circle-stroke-visited: #3e3e3e;
640+
641+
--graph-edge-line-stroke-selected: #000000;
642+
--graph-edge-weight-fill-selected: #000000;
643+
--graph-edge-line-stroke-visited: #3e3e3e;
644+
--graph-edge-weight-fill-visited: #3e3e3e;
645+
646+
--graph-arrow-fill-selected: #000000;
647+
--graph-arrow-fill-visited: #3e3e3e;
648+
649+
--array-1d-row-col-bg-selected: #3e3e3e;
650+
--array-1d-row-col-bg-patched: #000000;
651+
--array-1d-row-col-variable: #3e3e3e;
652+
653+
--array-2d-row-col-bg-selected: #2289ff;
654+
--array-2d-row-col-bg-selected1: #11cc77;
655+
--array-2d-row-col-bg-selected2: #8ac0ff;
656+
--array-2d-row-col-bg-selected3: #8fdbb9;
657+
--array-2d-row-col-bg-selected4: #FF0000;
658+
--array-2d-row-col-bg-selected5: #f58b2f;
659+
--array-2d-row-col-bg-patched: #000000;
660+
--array-2d-row-col-sorted: #ffffff;
661+
662+
--two-array-2d-row-col-bg-selected: #000000;
663+
--two-array-2d-row-col-selected: #FFFFFF;
664+
--two-array-2d-row-col-bg-patched: #000000;
665+
--two-array-2d-row-col-patched: #FFFFFF;
666+
667+
668+
--array-graph-row-col-bg-selected: #3e3e3e;
669+
--array-graph-row-col-bg-patched: #000000;
670+
--array-graph-node-circle-fill-selected: #3e3e3e;
671+
--array-graph-node-circle-stroke-selected: #3e3e3e;
672+
--array-graph-node-circle-fill-visited: #000000;
673+
--array-graph-node-circle-stroke-visited: #000000;
674+
675+
--array-graph-edge-line-stroke-selected: #3e3e3e;
676+
--array-graph-edge-weight-fill-selected: #3e3e3e;
677+
--array-graph-edge-line-stroke-visited: #000000;
678+
--array-graph-edge-weight-fill-visited: #000000;
679+
--array-graph-edge-arrow-fill-selected: #3e3e3e;
680+
--array-graph-edge-arrow-fill-visited: #000000;
681+
682+
--simple-fill-var-green: #505050;
683+
--simple-fill-var-orange: #e0e0e0;
684+
--simple-fill-var-red: #000000;
685+
}
686+
618687

619688

620689

0 commit comments

Comments
 (0)