Skip to content

Commit e22aa6e

Browse files
thiswillbeyourgithubthiswillbeyourgithub
committed
add more themes
From academicpages/academicpages.github.io#3437 Signed-off-by: thiswillbeyourgithub <26625900+thiswillbeyourgithub@users.noreply.github.com>
1 parent 71a2e42 commit e22aa6e

File tree

9 files changed

+591
-1
lines changed

9 files changed

+591
-1
lines changed

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
# Basic Site Settings
1010
locale : "en-US"
11-
site_theme : "air" # Currently available options are "default", "air"
11+
site_theme : "air" # Currently available options are "default", "air", "sunrise", "mint", "dirt" and "contrast"
1212
title : "OLIVIER CORNELIS"
1313
title_separator : "-"
1414
name : &name "Olivier Cornelis"

‎_sass/theme/_contrast_dark.scss‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* ==========================================================================
2+
CONTRAST THEME - DARK VERSION
3+
========================================================================== */
4+
/* Color codes used for the theme */
5+
$primary-color : #ff6c60;
6+
$background : #000000;
7+
$background-light : #1a1a1a;
8+
$background-lighter : #2a2a2a;
9+
$text : #ffffff;
10+
$text-muted : #d9d9d9;
11+
$link : #96cbfe;
12+
$link-dark : #c6c5fe;
13+
$link-light : #ff73fd;
14+
$footer : #000000;
15+
$border : #4d4d4d;
16+
$border-light : #666666;
17+
18+
/* Color codes used for the site */
19+
$danger-color : #ff6c60;
20+
$info-color : #96cbfe;
21+
$notice-color : #ffffff;
22+
$success-color : #a8ff60;
23+
$warning-color : #e9c062;
24+
25+
/* Other basic settings for the template */
26+
$border-radius : 4px;
27+
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
28+
$global-transition : all 0.2s ease-in-out;
29+
$masthead-height : 70px;
30+
$navicon-width : 28px;
31+
$navicon-height : 4px;
32+
$sidebar-link-max-width : 250px;
33+
$sidebar-screen-min-width : 1024px;
34+
35+
/* Dark theme for the site */
36+
html[data-theme="dark"] {
37+
--global-base-color : #{$background};
38+
--global-bg-color : #{$background};
39+
--global-footer-bg-color : #{$footer};
40+
--global-border-color : #{$border};
41+
--global-dark-border-color : #{$border-light};
42+
--global-code-background-color : #{$background-light};
43+
--global-code-text-color : #{$text-muted};
44+
--global-fig-caption-color : #{$text-muted};
45+
--global-link-color : #{$link};
46+
--global-link-color-hover : #{$link-dark};
47+
--global-link-color-visited : #{$link-light};
48+
--global-masthead-link-color : #{$text};
49+
--global-masthead-link-color-hover : #{$link-dark};
50+
--global-text-color : #{$text};
51+
--global-text-color-light : #{$text-muted};
52+
--global-thead-color : #{$background-lighter};
53+
}
54+
55+
/* Override notice colors for high contrast in dark mode */
56+
html[data-theme="dark"] {
57+
.page__content {
58+
.notice,
59+
.notice--primary,
60+
.notice--info,
61+
.notice--warning,
62+
.notice--success,
63+
.notice--danger {
64+
color: #{$text};
65+
border-color: #{$text};
66+
}
67+
}
68+
69+
.page__footer {
70+
color: #ffffff;
71+
}
72+
73+
.page__footer-follow .social-icons i,
74+
.page__footer-follow .social-icons .svg-inline--fa {
75+
color: inherit;
76+
}
77+
}

‎_sass/theme/_contrast_light.scss‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/* ==========================================================================
2+
CONTRAST THEME - LIGHT VERSION
3+
========================================================================== */
4+
/* Color codes used for the theme */
5+
$primary-color : #b60000;
6+
$dark-primary-color : mix(#000, $primary-color, 40%);
7+
$darker-primary-color : mix(#000, $primary-color, 60%);
8+
$light-primary-color : mix(#fff, $primary-color, 50%);
9+
$lighter-primary-color : mix(#fff, $primary-color, 90%);
10+
$background : #ffffff;
11+
$background-light : #fafafa;
12+
$background-lighter : #ffffff;
13+
$text : #000000;
14+
$text-muted : #404040;
15+
$link : #0000ff;
16+
$link-dark : #0000cc;
17+
$link-light : #3333ff;
18+
$footer : #000000;
19+
$border : #c0c0c0;
20+
$border-dark : #808080;
21+
22+
/* Color codes used for the site */
23+
$danger-color : #ff0000;
24+
$info-color : #0000ff;
25+
$notice-color : #000000;
26+
$success-color : #008000;
27+
$warning-color : #ff8800;
28+
29+
/* Other basic settings for the template */
30+
$border-radius : 4px;
31+
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
32+
$global-transition : all 0.2s ease-in-out;
33+
$masthead-height : 70px;
34+
$navicon-width : 28px;
35+
$navicon-height : 4px;
36+
$sidebar-link-max-width : 250px;
37+
$sidebar-screen-min-width : 1024px;
38+
39+
/* Light theme for the site */
40+
:root {
41+
--global-base-color : #{$text};
42+
--global-bg-color : #{$background};
43+
--global-footer-bg-color : #{$footer};
44+
--global-border-color : #{$border};
45+
--global-dark-border-color : #{$border-dark};
46+
--global-code-background-color : #{$background-light};
47+
--global-code-text-color : #{$text};
48+
--global-fig-caption-color : #{$text-muted};
49+
--global-link-color : #{$link};
50+
--global-link-color-hover : #{$link-dark};
51+
--global-link-color-visited : #{$primary-color};
52+
--global-masthead-link-color : #{$text};
53+
--global-masthead-link-color-hover : #{$text-muted};
54+
--global-text-color : #{$text};
55+
--global-text-color-light : #{$text-muted};
56+
--global-thead-color : #{$border};
57+
}
58+
59+
/* Override notice colors for high contrast */
60+
.page__content {
61+
.notice,
62+
.notice--primary,
63+
.notice--info,
64+
.notice--warning,
65+
.notice--success,
66+
.notice--danger {
67+
color: #{$text};
68+
border-color: #{$text};
69+
}
70+
}
71+
72+
footer {
73+
color: #ffffff;
74+
}

‎_sass/theme/_dirt_dark.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/* ==========================================================================
2+
DIRT THEME - DARK VERSION
3+
========================================================================== */
4+
/* Color codes used for the theme */
5+
$primary-color : #b49368;
6+
$dark-primary-color : mix(#000, $primary-color, 40%);
7+
$darker-primary-color : mix(#000, $primary-color, 60%);
8+
$light-primary-color : mix(#fff, $primary-color, 50%);
9+
$lighter-primary-color : mix(#fff, $primary-color, 90%);
10+
$background : #231e18;
11+
$background-light : #302b25;
12+
$background-lighter : #48413a;
13+
$text : #e4d4c8;
14+
$text-muted : #cabcb1;
15+
$link : #d7c8bc;
16+
$link-dark : #e4d4c8;
17+
$link-light : #b4a490;
18+
$footer : #302b25;
19+
$border : #48413a;
20+
$border-light : #5c5346;
21+
$accent-color : #b49368;
22+
23+
/* Color codes used for the site */
24+
$danger-color : #d35c5c;
25+
$info-color : #88a4d3;
26+
$notice-color : #ca7f32;
27+
$success-color : #b7ba53;
28+
$warning-color : #e0ac16;
29+
30+
/* Other basic settings for the template */
31+
$border-radius : 4px;
32+
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
33+
$global-transition : all 0.2s ease-in-out;
34+
$masthead-height : 70px;
35+
$navicon-width : 28px;
36+
$navicon-height : 4px;
37+
$sidebar-link-max-width : 250px;
38+
$sidebar-screen-min-width : 1024px;
39+
40+
/* Dark theme for the site */
41+
html[data-theme="dark"] {
42+
--global-base-color : #{$background};
43+
--global-bg-color : #{$background};
44+
--global-footer-bg-color : #{$footer};
45+
--global-border-color : #{$border};
46+
--global-dark-border-color : #{$border-light};
47+
--global-code-background-color : #{$background-light};
48+
--global-code-text-color : #{$text-muted};
49+
--global-fig-caption-color : #{$text-muted};
50+
--global-link-color : #{$link};
51+
--global-link-color-hover : #{$link-dark};
52+
--global-link-color-visited : #{$link-light};
53+
--global-masthead-link-color : #{$text};
54+
--global-masthead-link-color-hover : #{$accent-color};
55+
--global-text-color : #{$text};
56+
--global-text-color-light : #{$text-muted};
57+
--global-thead-color : #{$background-lighter};
58+
}
59+
60+
/* Footer styling for dark mode */
61+
html[data-theme="dark"] {
62+
footer {
63+
color: #{$text};
64+
}
65+
}

‎_sass/theme/_dirt_light.scss‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
$primary-color : #343434;
2+
$dark-primary-color : mix(#000, $primary-color, 40%);
3+
$darker-primary-color : mix(#000, $primary-color, 60%);
4+
$light-primary-color : mix(#fff, $primary-color, 50%);
5+
$lighter-primary-color : mix(#fff, $primary-color, 90%);
6+
$background : #f3f3f3;
7+
$background-light : #fafafa;
8+
$background-lighter : #ffffff;
9+
$text : #343434;
10+
$text-muted : #8e8b82;
11+
$link : #343434;
12+
$link-dark : mix(#000, $link, 25%);
13+
$link-light : mix(#fff, $link, 25%);
14+
$footer : #e9dcbe;
15+
$border : #e9dcbe;
16+
$border-light : mix(#fff, $border, 50%);
17+
18+
/* Color codes used for the site */
19+
$danger-color : #d35c5c;
20+
$info-color : #88a4d3;
21+
$notice-color : #b49368;
22+
$success-color : #6eb958;
23+
$warning-color : #e0ac16;
24+
25+
/* Other basic settings for the template */
26+
$border-radius : 4px;
27+
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
28+
$global-transition : all 0.2s ease-in-out;
29+
$masthead-height : 70px;
30+
$navicon-width : 28px;
31+
$navicon-height : 4px;
32+
$sidebar-link-max-width : 250px;
33+
$sidebar-screen-min-width : 1024px;
34+
35+
/* Light theme for the site */
36+
:root {
37+
--global-base-color : #{$primary-color};
38+
--global-bg-color : #{$background};
39+
--global-footer-bg-color : #{$footer};
40+
--global-border-color : #{$border};
41+
--global-dark-border-color : #{$text-muted};
42+
--global-code-background-color : #{$background-lighter};
43+
--global-code-text-color : #{$darker-primary-color};
44+
--global-fig-caption-color : #{$text-muted};
45+
--global-link-color : #{$link};
46+
--global-link-color-hover : #{$link-dark};
47+
--global-link-color-visited : #{$link-light};
48+
--global-masthead-link-color : #{$text};
49+
--global-masthead-link-color-hover : #{$text-muted};
50+
--global-text-color : #{$text};
51+
--global-text-color-light : #{$text-muted};
52+
--global-thead-color : #{$border-light};
53+
}
54+
55+
footer {
56+
color: #{$text};
57+
}
58+

0 commit comments

Comments
 (0)