From 85a3f013e1d4510bc247f21a8a2fc0e6767f81aa Mon Sep 17 00:00:00 2001 From: geordanny Date: Fri, 19 Dec 2025 14:53:48 -0500 Subject: [PATCH 1/2] add suport for more themes --- _config.yml | 2 +- _sass/theme/_contrast_dark.scss | 77 ++++++++++++++++++ _sass/theme/_contrast_light.scss | 74 +++++++++++++++++ _sass/theme/_dirt_dark.scss | 65 +++++++++++++++ _sass/theme/_dirt_light.scss | 58 ++++++++++++++ _sass/theme/_mint_dark.scss | 131 +++++++++++++++++++++++++++++++ _sass/theme/_mint_light.scss | 63 +++++++++++++++ _sass/theme/_sunrise_dark.scss | 59 ++++++++++++++ _sass/theme/_sunrise_light.scss | 63 +++++++++++++++ 9 files changed, 591 insertions(+), 1 deletion(-) create mode 100644 _sass/theme/_contrast_dark.scss create mode 100644 _sass/theme/_contrast_light.scss create mode 100644 _sass/theme/_dirt_dark.scss create mode 100644 _sass/theme/_dirt_light.scss create mode 100644 _sass/theme/_mint_dark.scss create mode 100644 _sass/theme/_mint_light.scss create mode 100644 _sass/theme/_sunrise_dark.scss create mode 100644 _sass/theme/_sunrise_light.scss diff --git a/_config.yml b/_config.yml index 2cf8e69ca03..c407e9a867f 100644 --- a/_config.yml +++ b/_config.yml @@ -8,7 +8,7 @@ # Basic Site Settings locale : "en-US" -site_theme : "default" # Currently available options are "default", "air" +site_theme : "sunrise" # the available themes options are "default", "air", "sunrise", "mint", "dirt" and "contrast" title : "Your Name / Site Title" title_separator : "-" name : &name "Your Name" diff --git a/_sass/theme/_contrast_dark.scss b/_sass/theme/_contrast_dark.scss new file mode 100644 index 00000000000..1aa4ce9efcc --- /dev/null +++ b/_sass/theme/_contrast_dark.scss @@ -0,0 +1,77 @@ +/* ========================================================================== + CONTRAST THEME - DARK VERSION + ========================================================================== */ +/* Color codes used for the theme */ +$primary-color : #ff6c60; +$background : #000000; +$background-light : #1a1a1a; +$background-lighter : #2a2a2a; +$text : #ffffff; +$text-muted : #d9d9d9; +$link : #96cbfe; +$link-dark : #c6c5fe; +$link-light : #ff73fd; +$footer : #000000; +$border : #4d4d4d; +$border-light : #666666; + +/* Color codes used for the site */ +$danger-color : #ff6c60; +$info-color : #96cbfe; +$notice-color : #ffffff; +$success-color : #a8ff60; +$warning-color : #e9c062; + +/* Other basic settings for the template */ +$border-radius : 4px; +$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); +$global-transition : all 0.2s ease-in-out; +$masthead-height : 70px; +$navicon-width : 28px; +$navicon-height : 4px; +$sidebar-link-max-width : 250px; +$sidebar-screen-min-width : 1024px; + +/* Dark theme for the site */ +html[data-theme="dark"] { + --global-base-color : #{$background}; + --global-bg-color : #{$background}; + --global-footer-bg-color : #{$footer}; + --global-border-color : #{$border}; + --global-dark-border-color : #{$border-light}; + --global-code-background-color : #{$background-light}; + --global-code-text-color : #{$text-muted}; + --global-fig-caption-color : #{$text-muted}; + --global-link-color : #{$link}; + --global-link-color-hover : #{$link-dark}; + --global-link-color-visited : #{$link-light}; + --global-masthead-link-color : #{$text}; + --global-masthead-link-color-hover : #{$link-dark}; + --global-text-color : #{$text}; + --global-text-color-light : #{$text-muted}; + --global-thead-color : #{$background-lighter}; +} + +/* Override notice colors for high contrast in dark mode */ +html[data-theme="dark"] { + .page__content { + .notice, + .notice--primary, + .notice--info, + .notice--warning, + .notice--success, + .notice--danger { + color: #{$text}; + border-color: #{$text}; + } + } + + .page__footer { + color: #ffffff; + } + + .page__footer-follow .social-icons i, + .page__footer-follow .social-icons .svg-inline--fa { + color: inherit; + } +} diff --git a/_sass/theme/_contrast_light.scss b/_sass/theme/_contrast_light.scss new file mode 100644 index 00000000000..88377c39658 --- /dev/null +++ b/_sass/theme/_contrast_light.scss @@ -0,0 +1,74 @@ +/* ========================================================================== + CONTRAST THEME - LIGHT VERSION + ========================================================================== */ +/* Color codes used for the theme */ +$primary-color : #b60000; +$dark-primary-color : mix(#000, $primary-color, 40%); +$darker-primary-color : mix(#000, $primary-color, 60%); +$light-primary-color : mix(#fff, $primary-color, 50%); +$lighter-primary-color : mix(#fff, $primary-color, 90%); +$background : #ffffff; +$background-light : #fafafa; +$background-lighter : #ffffff; +$text : #000000; +$text-muted : #404040; +$link : #0000ff; +$link-dark : #0000cc; +$link-light : #3333ff; +$footer : #000000; +$border : #c0c0c0; +$border-dark : #808080; + +/* Color codes used for the site */ +$danger-color : #ff0000; +$info-color : #0000ff; +$notice-color : #000000; +$success-color : #008000; +$warning-color : #ff8800; + +/* Other basic settings for the template */ +$border-radius : 4px; +$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); +$global-transition : all 0.2s ease-in-out; +$masthead-height : 70px; +$navicon-width : 28px; +$navicon-height : 4px; +$sidebar-link-max-width : 250px; +$sidebar-screen-min-width : 1024px; + +/* Light theme for the site */ +:root { + --global-base-color : #{$text}; + --global-bg-color : #{$background}; + --global-footer-bg-color : #{$footer}; + --global-border-color : #{$border}; + --global-dark-border-color : #{$border-dark}; + --global-code-background-color : #{$background-light}; + --global-code-text-color : #{$text}; + --global-fig-caption-color : #{$text-muted}; + --global-link-color : #{$link}; + --global-link-color-hover : #{$link-dark}; + --global-link-color-visited : #{$primary-color}; + --global-masthead-link-color : #{$text}; + --global-masthead-link-color-hover : #{$text-muted}; + --global-text-color : #{$text}; + --global-text-color-light : #{$text-muted}; + --global-thead-color : #{$border}; +} + +/* Override notice colors for high contrast */ +.page__content { + .notice, + .notice--primary, + .notice--info, + .notice--warning, + .notice--success, + .notice--danger { + color: #{$text}; + border-color: #{$text}; + } +} + +footer { + color: #ffffff; +} diff --git a/_sass/theme/_dirt_dark.scss b/_sass/theme/_dirt_dark.scss new file mode 100644 index 00000000000..aeed27e7223 --- /dev/null +++ b/_sass/theme/_dirt_dark.scss @@ -0,0 +1,65 @@ +/* ========================================================================== + DIRT THEME - DARK VERSION + ========================================================================== */ +/* Color codes used for the theme */ +$primary-color : #b49368; +$dark-primary-color : mix(#000, $primary-color, 40%); +$darker-primary-color : mix(#000, $primary-color, 60%); +$light-primary-color : mix(#fff, $primary-color, 50%); +$lighter-primary-color : mix(#fff, $primary-color, 90%); +$background : #231e18; +$background-light : #302b25; +$background-lighter : #48413a; +$text : #e4d4c8; +$text-muted : #cabcb1; +$link : #d7c8bc; +$link-dark : #e4d4c8; +$link-light : #b4a490; +$footer : #302b25; +$border : #48413a; +$border-light : #5c5346; +$accent-color : #b49368; + +/* Color codes used for the site */ +$danger-color : #d35c5c; +$info-color : #88a4d3; +$notice-color : #ca7f32; +$success-color : #b7ba53; +$warning-color : #e0ac16; + +/* Other basic settings for the template */ +$border-radius : 4px; +$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); +$global-transition : all 0.2s ease-in-out; +$masthead-height : 70px; +$navicon-width : 28px; +$navicon-height : 4px; +$sidebar-link-max-width : 250px; +$sidebar-screen-min-width : 1024px; + +/* Dark theme for the site */ +html[data-theme="dark"] { + --global-base-color : #{$background}; + --global-bg-color : #{$background}; + --global-footer-bg-color : #{$footer}; + --global-border-color : #{$border}; + --global-dark-border-color : #{$border-light}; + --global-code-background-color : #{$background-light}; + --global-code-text-color : #{$text-muted}; + --global-fig-caption-color : #{$text-muted}; + --global-link-color : #{$link}; + --global-link-color-hover : #{$link-dark}; + --global-link-color-visited : #{$link-light}; + --global-masthead-link-color : #{$text}; + --global-masthead-link-color-hover : #{$accent-color}; + --global-text-color : #{$text}; + --global-text-color-light : #{$text-muted}; + --global-thead-color : #{$background-lighter}; +} + +/* Footer styling for dark mode */ +html[data-theme="dark"] { + footer { + color: #{$text}; + } +} diff --git a/_sass/theme/_dirt_light.scss b/_sass/theme/_dirt_light.scss new file mode 100644 index 00000000000..437e247050e --- /dev/null +++ b/_sass/theme/_dirt_light.scss @@ -0,0 +1,58 @@ +$primary-color : #343434; +$dark-primary-color : mix(#000, $primary-color, 40%); +$darker-primary-color : mix(#000, $primary-color, 60%); +$light-primary-color : mix(#fff, $primary-color, 50%); +$lighter-primary-color : mix(#fff, $primary-color, 90%); +$background : #f3f3f3; +$background-light : #fafafa; +$background-lighter : #ffffff; +$text : #343434; +$text-muted : #8e8b82; +$link : #343434; +$link-dark : mix(#000, $link, 25%); +$link-light : mix(#fff, $link, 25%); +$footer : #e9dcbe; +$border : #e9dcbe; +$border-light : mix(#fff, $border, 50%); + +/* Color codes used for the site */ +$danger-color : #d35c5c; +$info-color : #88a4d3; +$notice-color : #b49368; +$success-color : #6eb958; +$warning-color : #e0ac16; + +/* Other basic settings for the template */ +$border-radius : 4px; +$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); +$global-transition : all 0.2s ease-in-out; +$masthead-height : 70px; +$navicon-width : 28px; +$navicon-height : 4px; +$sidebar-link-max-width : 250px; +$sidebar-screen-min-width : 1024px; + +/* Light theme for the site */ +:root { + --global-base-color : #{$primary-color}; + --global-bg-color : #{$background}; + --global-footer-bg-color : #{$footer}; + --global-border-color : #{$border}; + --global-dark-border-color : #{$text-muted}; + --global-code-background-color : #{$background-lighter}; + --global-code-text-color : #{$darker-primary-color}; + --global-fig-caption-color : #{$text-muted}; + --global-link-color : #{$link}; + --global-link-color-hover : #{$link-dark}; + --global-link-color-visited : #{$link-light}; + --global-masthead-link-color : #{$text}; + --global-masthead-link-color-hover : #{$text-muted}; + --global-text-color : #{$text}; + --global-text-color-light : #{$text-muted}; + --global-thead-color : #{$border-light}; +} + +footer { + color: #{$text}; +} + diff --git a/_sass/theme/_mint_dark.scss b/_sass/theme/_mint_dark.scss new file mode 100644 index 00000000000..80bdb0fee04 --- /dev/null +++ b/_sass/theme/_mint_dark.scss @@ -0,0 +1,131 @@ +/* ========================================================================== + MINT THEME - LIGHT VERSION + ========================================================================== */ +/* Color codes used for the theme */ +$primary-color : #11999e; +$dark-primary-color : mix(#000, $primary-color, 40%); +$darker-primary-color : mix(#000, $primary-color, 60%); +$light-primary-color : mix(#fff, $primary-color, 50%); +$lighter-primary-color : mix(#fff, $primary-color, 90%); +$background : #f3f6f6; +$background-light : #ffffff; +$background-lighter : #fafbfb; +$text : #40514e; +$text-muted : #5c6d6a; +$link : #11999e; +$link-dark : mix(#000, $link, 25%); +$link-light : mix(#fff, $link, 25%); +$footer : #30e3ca; +$border : mix(#fff, #40514e, 75%); +$border-dark : mix(#fff, #40514e, 60%); + +/* Color codes used for the site */ +$danger-color : #e74c3c; +$info-color : #11999e; +$notice-color : #30e3ca; +$success-color : #2ecc71; +$warning-color : #f39c12; + +/* Other basic settings for the template */ +$border-radius : 4px; +$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); +$global-transition : all 0.2s ease-in-out; +$masthead-height : 70px; +$navicon-width : 28px; +$navicon-height : 4px; +$sidebar-link-max-width : 250px; +$sidebar-screen-min-width : 1024px; + +/* Light theme for the site */ +:root { + --global-base-color : #{$primary-color}; + --global-bg-color : #{$background}; + --global-footer-bg-color : #{$footer}; + --global-border-color : #{$border}; + --global-dark-border-color : #{$border-dark}; + --global-code-background-color : #{$background-light}; + --global-code-text-color : #{$darker-primary-color}; + --global-fig-caption-color : #{$text-muted}; + --global-link-color : #{$link}; + --global-link-color-hover : #{$link-dark}; + --global-link-color-visited : #{$link-light}; + --global-masthead-link-color : #{$text}; + --global-masthead-link-color-hover : #{$primary-color}; + --global-text-color : #{$text}; + --global-text-color-light : #{$text-muted}; + --global-thead-color : #{$lighter-primary-color}; +} + +/* Footer styling */ +.page__footer { + color: #ffffff !important; +} + +.page__footer-follow .social-icons i, +.page__footer-follow .social-icons .svg-inline--fa { + color: inherit; +} + + +/* ========================================================================== + MINT THEME - DARK VERSION + ========================================================================== */ +/* Color codes used for the theme */ +$primary-color : #30e3ca; +$background : #1a2421; +$background-light : #243430; +$background-lighter : #2e443f; +$text : #e8f5f3; +$text-muted : #b8d5d1; +$link : #4effd9; +$link-dark : #7cffdf; +$link-light : #2bd4bd; +$footer : #0f1614; +$border : #2e443f; +$border-light : #3d5950; +$accent-color : #30e3ca; + +/* Color codes used for the site */ +$danger-color : #e74c3c; +$info-color : #4effd9; +$notice-color : #30e3ca; +$success-color : #2ecc71; +$warning-color : #f39c12; + +/* Other basic settings for the template */ +$border-radius : 4px; +$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); +$global-transition : all 0.2s ease-in-out; +$masthead-height : 70px; +$navicon-width : 28px; +$navicon-height : 4px; +$sidebar-link-max-width : 250px; +$sidebar-screen-min-width : 1024px; + +/* Dark theme for the site */ +html[data-theme="dark"] { + --global-base-color : #{$background}; + --global-bg-color : #{$background}; + --global-footer-bg-color : #{$footer}; + --global-border-color : #{$border}; + --global-dark-border-color : #{$border-light}; + --global-code-background-color : #{$background-light}; + --global-code-text-color : #{$text-muted}; + --global-fig-caption-color : #{$text-muted}; + --global-link-color : #{$link}; + --global-link-color-hover : #{$link-dark}; + --global-link-color-visited : #{$link-light}; + --global-masthead-link-color : #{$text}; + --global-masthead-link-color-hover : #{$accent-color}; + --global-text-color : #{$text}; + --global-text-color-light : #{$text-muted}; + --global-thead-color : #{$background-lighter}; +} + +/* Footer styling for dark mode */ +html[data-theme="dark"] { + footer { + color: #{$text}; + } +} + diff --git a/_sass/theme/_mint_light.scss b/_sass/theme/_mint_light.scss new file mode 100644 index 00000000000..392c2f25e41 --- /dev/null +++ b/_sass/theme/_mint_light.scss @@ -0,0 +1,63 @@ + +/* ========================================================================== + MINT THEME - LIGHT VERSION + ========================================================================== */ +/* Color codes used for the theme */ +$primary-color : #11999e; +$dark-primary-color : mix(#000, $primary-color, 40%); +$darker-primary-color : mix(#000, $primary-color, 60%); +$light-primary-color : mix(#fff, $primary-color, 50%); +$lighter-primary-color : mix(#fff, $primary-color, 90%); +$background : #f3f6f6; +$background-light : #ffffff; +$background-lighter : #fafbfb; +$text : #40514e; +$text-muted : #5c6d6a; +$link : #11999e; +$link-dark : mix(#000, $link, 25%); +$link-light : mix(#fff, $link, 25%); +$footer : #30e3ca; +$border : mix(#fff, #40514e, 75%); +$border-dark : mix(#fff, #40514e, 60%); + +/* Color codes used for the site */ +$danger-color : #e74c3c; +$info-color : #11999e; +$notice-color : #30e3ca; +$success-color : #2ecc71; +$warning-color : #f39c12; + +/* Other basic settings for the template */ +$border-radius : 4px; +$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); +$global-transition : all 0.2s ease-in-out; +$masthead-height : 70px; +$navicon-width : 28px; +$navicon-height : 4px; +$sidebar-link-max-width : 250px; +$sidebar-screen-min-width : 1024px; + +/* Light theme for the site */ +:root { + --global-base-color : #{$primary-color}; + --global-bg-color : #{$background}; + --global-footer-bg-color : #{$footer}; + --global-border-color : #{$border}; + --global-dark-border-color : #{$border-dark}; + --global-code-background-color : #{$background-light}; + --global-code-text-color : #{$darker-primary-color}; + --global-fig-caption-color : #{$text-muted}; + --global-link-color : #{$link}; + --global-link-color-hover : #{$link-dark}; + --global-link-color-visited : #{$link-light}; + --global-masthead-link-color : #{$text}; + --global-masthead-link-color-hover : #{$primary-color}; + --global-text-color : #{$text}; + --global-text-color-light : #{$text-muted}; + --global-thead-color : #{$lighter-primary-color}; +} + +footer { + color: #{$text}; +} + diff --git a/_sass/theme/_sunrise_dark.scss b/_sass/theme/_sunrise_dark.scss new file mode 100644 index 00000000000..6479a237f2a --- /dev/null +++ b/_sass/theme/_sunrise_dark.scss @@ -0,0 +1,59 @@ +/* ========================================================================== + SUNSET THEME + ========================================================================== */ +/* Color codes used for the theme */ +$primary-color : #ff8793; +$dark-primary-color : #ff5568; +$darker-primary-color : #d4741f; +$light-primary-color : #ffb3bb; +$lighter-primary-color : #ffd4d9; +$background : #1a0f0a; +$background-light : #2d1912; +$background-lighter : #3d2a1a; +$text : #e8d5b7; +$text-muted : #b8a590; +$link : #ff8793; +$link-hover : #ffb3bb; +$link-visited : #ff5568; +$footer : #2d1912; +$border : #3d2a1a; +$border-dark : #5a3f28; +$code-bg : #0d0806; +$code-bg-dark : #0f0907; + +/* Color codes used for the site */ +$danger-color : #ff6b7f; +$info-color : #52adc8; +$notice-color : #f9b248; +$success-color : #78c978; +$warning-color : #f9b248; + +/* Other basic settings for the template */ +$border-radius : 4px; +$box-shadow : 0 1px 1px rgba(255, 255, 255, 0.125); +$global-transition : all 0.2s ease-in-out; +$masthead-height : 70px; +$navicon-width : 28px; +$navicon-height : 4px; +$sidebar-link-max-width : 250px; +$sidebar-screen-min-width : 1024px; + +/* Sunset dark theme CSS variables */ +html[data-theme="dark"] { + --global-base-color : #{$primary-color}; + --global-bg-color : #{$background}; + --global-footer-bg-color : #{$footer}; + --global-border-color : #{$light-primary-color}; + --global-dark-border-color : #{$background-light}; + --global-code-background-color : #{$code-bg}; + --global-code-text-color : #{$text}; + --global-fig-caption-color : #{$text-muted}; + --global-link-color : #{$link}; + --global-link-color-hover : #{$link-hover}; + --global-link-color-visited : #{$link-visited}; + --global-masthead-link-color : #{$text}; + --global-masthead-link-color-hover : #{$link-hover}; + --global-text-color : #{$text}; + --global-text-color-light : #{$text-muted}; + --global-thead-color : #{$background-lighter}; +} diff --git a/_sass/theme/_sunrise_light.scss b/_sass/theme/_sunrise_light.scss new file mode 100644 index 00000000000..4b87d9c6dd0 --- /dev/null +++ b/_sass/theme/_sunrise_light.scss @@ -0,0 +1,63 @@ +/* ========================================================================== + SUNRISE THEME - LIGHT VERSION + ========================================================================== */ +/* Color codes used for the theme */ +$primary-color : #fc3a52; +$dark-primary-color : mix(#000, $primary-color, 40%); +$darker-primary-color : mix(#000, $primary-color, 60%); +$light-primary-color : mix(#fff, $primary-color, 50%); +$lighter-primary-color : mix(#fff, $primary-color, 90%); +$background : #e8d5b7; +$background-light : mix(#fff, $background, 20%); +$background-lighter : #ffffff; +$text : #000000; +$text-muted : #0e2431; +$link : mix(#000, $primary-color, 10%); +$link-dark : mix(#000, $link, 25%); +$link-light : mix(#fff, $link, 25%); +$footer : #f9b248; +$border : mix(#000, $background, 20%); +$border-dark : mix(#000, $background, 30%); + +/* Color codes used for the site */ +$danger-color : #cc6666; +$info-color : #81a2be; +$notice-color : #de935f; +$success-color : #b5bd68; +$warning-color : #f0c674; + +/* Other basic settings for the template */ +$border-radius : 4px; +$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125); +$global-transition : all 0.2s ease-in-out; +$masthead-height : 70px; +$navicon-width : 28px; +$navicon-height : 4px; +$sidebar-link-max-width : 250px; +$sidebar-screen-min-width : 1024px; + +/* Light theme for the site */ +:root { + --global-base-color : #{$primary-color}; + --global-bg-color : #{$background}; + --global-footer-bg-color : #{$footer}; + --global-border-color : #{$border}; + --global-dark-border-color : #{$border-dark}; + --global-code-background-color : #{$background-light}; + --global-code-text-color : #{$text-muted}; + --global-fig-caption-color : #{$text-muted}; + --global-link-color : #{$link}; + --global-link-color-hover : #{$link-light}; + --global-link-color-visited : #{$link-dark}; + --global-masthead-link-color : #{$text}; + --global-masthead-link-color-hover : #{$text-muted}; + --global-text-color : #{$text}; + --global-text-color-light : #{$text-muted}; + --global-thead-color : #{$background-light}; +} + +.page__footer-follow .social-icons i, +.page__footer-follow .social-icons .svg-inline--fa { + color: inherit; +} + From 5b25b92ed8a9fd8875ca2d65c2d21dcefc8eb98e Mon Sep 17 00:00:00 2001 From: rjzupkoii Date: Sun, 21 Dec 2025 10:51:55 -0500 Subject: [PATCH 2/2] Revert site_theme to default --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index c407e9a867f..c12894359bf 100644 --- a/_config.yml +++ b/_config.yml @@ -8,7 +8,7 @@ # Basic Site Settings locale : "en-US" -site_theme : "sunrise" # the available themes options are "default", "air", "sunrise", "mint", "dirt" and "contrast" +site_theme : "default" # the available themes options are "default", "air", "sunrise", "mint", "dirt" and "contrast" title : "Your Name / Site Title" title_separator : "-" name : &name "Your Name"