michaelh/hugo-academic-mirror
1
0
Fork 0
mirror of https://github.com/gcushen/hugo-academic.git synced 2025-07-26 19:15:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: experimental support to define both light and dark themes

Browse source 
Ability to define both light and dark color themes, rather than use the default settings for the alternative theme.

Add `[dark]` or `[light]` section to theme file to define the alternative theme.

Most vars supported except `primary`.

See #997
This commit is contained in:
George Cushen 2020-08-11 23:16:39 +01:00
commit 37d247911c
5 changed files with 69 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

31
assets/scss/academic/_nav.scss
View file

@ -69,7 +69,24 @@
}
.dark .navbar {
background: $sta-dark-menu-primary;
box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, .11);
.navbar-nav {
.nav-link {
color: rgba($sta-dark-menu-text, .85);
&.active,
&:hover,
&:focus {
color: $sta-dark-menu-text;
}
&.active {
font-weight: bold !important;
color: $sta-dark-menu-text-active !important;
}
}
}
}
// Remove Bootstrap's border from Toggle button.
@ -136,6 +153,10 @@
color: $sta-menu-text;
}
.dark #navbar-main .main-menu-item ul li .nav-link {
color: $sta-dark-menu-text;
}
@include media-breakpoint-down(md) {
// Used in conjunction with mobile .navbar-brand to center logo on mobile.
.navbar-brand-mobile-wrapper {
@ -200,7 +221,17 @@ ul.nav-icons li.nav-item a.nav-link {
z-index: 1032; // I18n dropdown over mobile expanded menu.
}
.dark .dropdown-menu {
background-color: $sta-dark-menu-primary !important;
color: $sta-dark-menu-text !important;
}
.dropdown-item {
background-color: $sta-menu-primary !important;
color: $sta-menu-text !important;
}
.dark .dropdown-item {
background-color: $sta-dark-menu-primary !important;
color: $sta-dark-menu-text !important;
}

10
assets/scss/academic/_root.scss
View file

@ -124,6 +124,16 @@ a:focus {
color: $sta-link-hover;
}
.dark a,
.dark h3.article-title a:hover {
color: $sta-dark-link;
}
.dark a:hover,
.dark a:focus {
color: $sta-dark-link-hover;
}
img,
video {
height: auto;

9
assets/scss/main.scss
View file

@ -21,11 +21,19 @@ $sta-primary-dark: darken($sta-primary, $sta-darken-percentage);
$sta-link: {{ $scr.Get "link" }};
$sta-link-hover: {{ $scr.Get "link_hover" }};
$sta-dark-link: {{ $scr.Get "dark_link" }};
$sta-dark-link-hover: {{ $scr.Get "dark_link_hover" }};
$sta-menu-primary: {{ $scr.Get "menu_primary" }};
$sta-menu-text: {{ $scr.Get "menu_text" }};
$sta-menu-text-active: {{ $scr.Get "menu_text_active" }};
$sta-menu-title: {{ $scr.Get "menu_title" }};
$sta-dark-menu-primary: {{ $scr.Get "dark_menu_primary" }};
$sta-dark-menu-text: {{ $scr.Get "dark_menu_text" }};
$sta-dark-menu-text-active: {{ $scr.Get "dark_menu_text_active" }};
$sta-dark-menu-title: {{ $scr.Get "dark_menu_title" }};
$sta-background: {{ $scr.Get "background" }};
$sta-dark-background: {{ $scr.Get "dark_background" }};
@ -38,4 +46,5 @@ $sta-dark-home-section-even: {{ $scr.Get "dark_home_section_even" }};
@import "bootstrap_variables";
@import "_vendor/bootstrap/bootstrap";
@import "academic/academic";
@import "template";
@import "custom";

1
assets/scss/template.scss Normal file
View file

@ -0,0 +1 @@
// Templates override this file with their own SCSS styling.

29
layouts/partials/functions/parse_theme.html
View file

@ -31,23 +31,25 @@
{{- $scr.Set "light" ($theme.light | default true) -}}
{{ if $theme.light }}
{{- $scr.Set "background" ($theme.background | default "#fff") -}}
{{- $scr.Set "dark_background" "rgb(40, 42, 54)" -}}
{{- $scr.Set "home_section_odd" $theme.home_section_odd -}}
{{- $scr.Set "home_section_even" $theme.home_section_even -}}
{{- $scr.Set "dark_home_section_odd" "hsla(231, 15%, 18%, 1)" -}}
{{- $scr.Set "dark_home_section_even" "hsla(231, 15%, 16%, 1)" -}}
{{- $scr.Set "background" ($theme.background | default "rgb(255, 255, 255)") -}}
{{- $scr.Set "dark_background" ($theme.dark.background | default "hsla(231, 15%, 16%, 1)") -}}
{{- $scr.Set "home_section_odd" ($theme.home_section_odd | default "rgb(255, 255, 255)") -}}
{{- $scr.Set "home_section_even" ($theme.home_section_even | default "rgb(247, 247, 247)") -}}
{{- $scr.Set "dark_home_section_odd" ($theme.dark.home_section_odd | default "hsla(231, 15%, 18%, 1)") -}}
{{- $scr.Set "dark_home_section_even" ($theme.dark.home_section_even | default "hsla(231, 15%, 16%, 1)") -}}
{{ else }}
{{- $scr.Set "background" ($theme.background | default "#fff") -}}
{{- $scr.Set "background" ($theme.light.background | default "rgb(255, 255, 255)") -}}
{{- $scr.Set "dark_background" ($theme.background | default "rgb(40, 42, 54)") -}}
{{- $scr.Set "home_section_odd" "rgb(255, 255, 255)" -}}
{{- $scr.Set "home_section_even" "rgb(247, 247, 247)" -}}
{{- $scr.Set "dark_home_section_odd" $theme.home_section_odd -}}
{{- $scr.Set "dark_home_section_even" $theme.home_section_even -}}
{{- $scr.Set "home_section_odd" ($theme.light.home_section_odd | default "rgb(255, 255, 255)") -}}
{{- $scr.Set "home_section_even" ($theme.light.home_section_even | default "rgb(247, 247, 247)") -}}
{{- $scr.Set "dark_home_section_odd" ($theme.home_section_odd | default "hsla(231, 15%, 18%, 1)") -}}
{{- $scr.Set "dark_home_section_even" ($theme.home_section_even | default "hsla(231, 15%, 16%, 1)") -}}
{{ end }}
{{- $scr.Set "link" ($theme.link | default $theme.primary) -}}
{{- $scr.Set "link_hover" ($theme.link_hover | default $theme.primary) -}}
{{- $scr.Set "dark_link" ($theme.dark.link | default $theme.primary) -}}
{{- $scr.Set "dark_link_hover" ($theme.dark.link_hover | default $theme.primary) -}}
{{- $scr.Set "primary" $theme.primary -}}
@ -55,3 +57,8 @@
{{- $scr.Set "menu_text" $theme.menu_text -}}
{{- $scr.Set "menu_text_active" $theme.menu_text_active -}}
{{- $scr.Set "menu_title" $theme.menu_title -}}
{{- $scr.Set "dark_menu_primary" ($theme.dark.menu_primary | default "rgb(40, 42, 54)") -}}
{{- $scr.Set "dark_menu_text" ($theme.dark.menu_text | default "white") -}}
{{- $scr.Set "dark_menu_text_active" ($theme.dark.menu_text_active | default "rgba(255, 255, 255, 0.8)") -}}
{{- $scr.Set "dark_menu_title" ($theme.dark.menu_title | default "white") -}}