Skip to content

Commit 9c86429

Browse files
hinakhadimhinakhadim
committed
feat: add dark theme separately
1 parent 141982e commit 9c86429

File tree

12 files changed

+676
-40
lines changed

12 files changed

+676
-40
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@
1515
"publishConfig": {
1616
"access": "public"
1717
},
18-
"scripts": {
19-
"postinstall": "node postinstall.js"
20-
},
2118
"release": {
2219
"tagFormat": "indigo-${version}",
2320
"branches": [

‎paragon/_dark.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
2+
3+
4+
body.indigo-dark-theme{
5+
6+
@import "../themes/dark/variables";
7+
8+
@import "./header";
9+
@import "./footer";
10+
@import "./login";
11+
@import "./progress";
12+
@import "./tour";
13+
@import "./learning";
14+
@import "./discussion";
15+
@import "./account";
16+
@import "./profile";
17+
@import "./dates";
18+
@import "../themes/dark/utilities";
19+
@import "../themes/dark/extras";
20+
21+
color: $text-color !important;
22+
background: $body-bg !important;
23+
* {
24+
accent-color: $primary;
25+
}
26+
}
27+
28+
29+

‎paragon/_discussion.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,9 @@ position: static;
9595
background: $primary-light !important;
9696
padding-left: 0;
9797
font-size: 14px;
98+
&:focus{
99+
box-shadow: none;
100+
}
98101
}
99102
.pointer-cursor-hover {
100103
margin: 0 !important;
@@ -213,4 +216,12 @@ width: 100%;
213216
div[data-learner-type=b2c_learner] div[role=heading].h2, div[role=heading].h2 {
214217
font-size: 24px;
215218
line-height: 30px;
219+
}
220+
221+
html[data-mce-style]{
222+
color: lightslategray;
223+
}
224+
.mce-content-body{
225+
color: inherit;
226+
background-color: transparent;
216227
}

‎paragon/_extras.scss‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
// theme toggle button
2+
3+
.theme-toggle-button{
4+
position: relative;
5+
width: 40px;
6+
height: 40px;
7+
}
8+
9+
#darkmode {
10+
cursor: pointer;
11+
width: 20px;
12+
height: 20px;
13+
position: absolute;
14+
margin: auto !important;
15+
top: 0;
16+
right: 0;
17+
bottom: 0;
18+
left: 0;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
transform: scale(1.5);
23+
}
24+
25+
.darkmode_icon {
26+
position: absolute;
27+
width: 20px;
28+
height: 20px;
29+
border-radius: 10px;
30+
background: $warning-400;
31+
transform-origin: center center;
32+
transition: transform 0.75s ease-in-out, $page-color-transition;
33+
34+
&::after {
35+
position: absolute;
36+
content: '';
37+
width: 16px;
38+
height: 16px;
39+
left: 6px;
40+
bottom: 4px;
41+
border-radius: 10px;
42+
background: $body-bg;
43+
transform-origin: center center;
44+
transition: transform 0.2s ease, left 0.25s ease, bottom 0.25s ease, $page-color-transition;
45+
}
46+
47+
.ray {
48+
position: absolute;
49+
left: 7px;
50+
top: 7px;
51+
width: 6px;
52+
height: 6px;
53+
border-radius: 6px;
54+
background: transparent;
55+
transform-origin: center;
56+
transition: transform 0.5s ease-in-out, $page-color-transition;
57+
58+
&:nth-child(1) {
59+
transform: rotate(45deg) translateX(0);
60+
}
61+
&:nth-child(2) {
62+
transform: rotate(90deg) translateX(0);
63+
}
64+
&:nth-child(3) {
65+
transform: rotate(135deg) translateX(0);
66+
}
67+
&:nth-child(4) {
68+
transform: rotate(180deg) translateX(0);
69+
}
70+
&:nth-child(5) {
71+
transform: rotate(225deg) translateX(0);
72+
}
73+
&:nth-child(6) {
74+
transform: rotate(270deg) translateX(0);
75+
}
76+
&:nth-child(7) {
77+
transform: rotate(315deg) translateX(0);
78+
}
79+
&:nth-child(8) {
80+
transform: rotate(360deg) translateX(0);
81+
}
82+
}
83+
}

‎paragon/_overrides.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -469,5 +469,5 @@ html {
469469
@import "./extras";
470470

471471

472-
473-
472+
// Including dark theme
473+
@import "./dark";

‎paragon/_variables.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,8 @@ $light-dark: #374151;
44
$text-color: #111827;
55
$text-color-primary: #515661;
66
$text-color-light: #515661;
7+
8+
// for toggle theme button
9+
$page-color-transition: transparent .2s ease, color .2s ease;
10+
711
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

‎postinstall.js‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎themes/dark/_extras.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,9 @@ a.course-card-title {
232232
&.is-invalid {
233233
border-color: $danger !important;
234234
}
235+
&:focus{
236+
box-shadow: 0 0 0 1px $primary;
237+
}
235238
}
236239
.pgn__form-text-default, .has-floating-label {
237240
color: $text-color;
@@ -645,6 +648,10 @@ a.discussion-post {
645648
}
646649
.form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text, .form-control.has-value ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text {
647650
background-color: $primary-light;
651+
652+
&:focus{
653+
box-shadow: 0 0 0 1px $primary;
654+
}
648655
}
649656
}
650657
#paragon-portal-root .new-user-tour-dialog {
@@ -927,6 +934,12 @@ a.discussion-post {
927934
&.btn-outline-primary {
928935
background: none !important;
929936
color: $text-color;
937+
&:not(:disabled):not(.disabled):active{
938+
color: $text-color;
939+
}
940+
}
941+
&.btn-primary:not(:disabled):not(.disabled):active {
942+
color: $btn-color;
930943
}
931944
}
932945
}
@@ -1343,6 +1356,10 @@ input::placeholder {
13431356
background: none !important;
13441357
border: 1px solid $border-color;
13451358
color: $text-color;
1359+
1360+
&:focus{
1361+
box-shadow: 0 0 0 1px $primary;
1362+
}
13461363
}
13471364
}
13481365
.pgn__card-header-title-md {
@@ -1436,4 +1453,8 @@ section[data-testid=sidebar-NOTIFICATIONS], section[data-testid=sidebar-DISCUSSI
14361453
&.border-light-400 {
14371454
border-color: $primary-light !important;
14381455
}
1456+
}
1457+
1458+
.donut-chart-text {
1459+
fill: $primary-500;
14391460
}

‎themes/dark/_learning.scss‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
// learning MFE
2+
3+
.donut-chart-text {
4+
fill: $primary-500;
5+
}
6+
7+
.donut-ring, .donut-segment, .donut-hole {
8+
&.locked-stroke {
9+
stroke: $primary-500;
10+
}
11+
}
12+
13+
.grade-bar {
14+
.grade-bar__divider {
15+
fill: $primary-500;
16+
}
17+
18+
.grade-bar--passing {
19+
fill: $primary-500;
20+
}
21+
22+
.grade-bar--current-passing {
23+
fill: $success-500;
24+
}
25+
}
26+
27+
#minimum-grade-tooltip {
28+
.arrow::after {
29+
border-bottom-color: $primary-500;
30+
}
31+
}
32+
33+
#passing-grade-tooltip {
34+
.arrow::after {
35+
border-top-color: $success-500;
36+
}
37+
38+
background: $success-500;
39+
}
40+
41+
.modal {
42+
button {
43+
@extend .btn-primary;
44+
}
45+
}
46+
47+
.lock-paywall-container svg {
48+
color: $primary-700;
49+
}
50+
51+
.upsell-warning {
52+
background-color: $danger-100;
53+
}
54+
55+
.sequence-navigation {
56+
.btn{
57+
&.complete {
58+
color: $success;
59+
}
60+
}
61+
}
62+
63+
.sequence-navigation {
64+
.sequence-navigation-dropdown {
65+
.dropdown-menu .btn {
66+
&.active {
67+
.unit-icon {
68+
color: $primary-500;
69+
}
70+
71+
&:after {
72+
background: $primary;
73+
}
74+
}
75+
}
76+
}
77+
}
78+
79+
.icon-hover {
80+
&:hover {
81+
color: $primary-500 !important;
82+
83+
}
84+
}
85+
86+
87+
.nav-underline-tabs {
88+
&:hover,
89+
&:focus,
90+
&.active {
91+
color: $primary-500;
92+
border-bottom-color: $primary-500;
93+
}
94+
}
95+

0 commit comments

Comments
 (0)