FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mixins for forcing dark theme

Browse source
This commit is contained in:
Sharwin24 2024-12-29 13:33:37 -08:00
parent 786a25ea91
commit 147f8026e6
1 changed files with 22 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

32
assets/styles/mixins.scss
View file

@ -1,15 +1,17 @@
@function get-color($mode, $key) { @function get-color($mode, $key) {
@if map-has-key($themes, $mode) { @if map-has-key($themes, $mode) {
$theme: map-get($themes, $mode); $theme: map-get($themes, $mode);
@if map-has-key($theme, $key) { @if map-has-key($theme, $key) {
@return map-get($theme, $key); @return map-get($theme, $key);
} }
} }
@return red; // default color for debugging purpose @return red; // default color for debugging purpose
} }
@function get-light-color($key) { @function get-light-color($key) {
@return get-color('light', $key); @return get-color('dark', $key);
} }
@function get-dark-color($key) { @function get-dark-color($key) {
@ -23,8 +25,9 @@
} }
@mixin section-title-adjustment() { @mixin section-title-adjustment() {
h1 > span { h1>span {
margin-top: -55px; /* Size of fixed header */ margin-top: -55px;
/* Size of fixed header */
padding-bottom: 55px; padding-bottom: 55px;
display: block; display: block;
} }
@ -42,10 +45,11 @@
transition: all $transition-type $transition-duration; transition: all $transition-type $transition-duration;
} }
@mixin selection-color($theme: 'light') { @mixin selection-color($theme: 'dark') {
background: get-light-color('accent-color'); background: get-light-color('accent-color');
color: get-light-color('text-over-accent-color'); color: get-light-color('text-over-accent-color');
@if $theme == 'dark' {
@if $theme =='dark' {
background: get-dark-color('accent-color'); background: get-dark-color('accent-color');
color: get-dark-color('text-over-accent-color'); color: get-dark-color('text-over-accent-color');
} }
@ -53,20 +57,28 @@
@function get-alert-bg-color($type, $mode) { @function get-alert-bg-color($type, $mode) {
$colors: map-get($alerts, $type); $colors: map-get($alerts, $type);
@if $mode == 'light' {
@if $mode =='light' {
@return map-get($colors, 'bg-color'); @return map-get($colors, 'bg-color');
} @else { }
@else {
@return map-get($colors, 'text-color'); @return map-get($colors, 'text-color');
} }
@return red; @return red;
} }
@function get-alert-text-color($type, $mode) { @function get-alert-text-color($type, $mode) {
$colors: map-get($alerts, $type); $colors: map-get($alerts, $type);
@if $mode == 'light' {
@if $mode =='light' {
@return map-get($colors, 'text-color'); @return map-get($colors, 'text-color');
} @else { }
@else {
@return map-get($colors, 'bg-color'); @return map-get($colors, 'bg-color');
} }
@return red; @return red;
} }