Skip to content

Update default theme to modern monochrome look #817

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jjroelofs merged 5 commits into from
May 18, 2026
Merged

Update default theme to modern monochrome look #817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0b18dd8
Update default look to modern monochrome, rename old default
May 18, 2026
95247ac
Update SCSS fallback variables to match new monochrome default
May 18, 2026
ccf9223
Merge branch '8.x' into jur/8.x/816-update-default-look-and-feel
May 18, 2026
2c15775
Rebuild CSS artifact after merge
May 18, 2026
dce9407
Update CSS fallback defaults to match new install config
May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions config/install/dxpr_theme.settings.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ block_design_regions:
help: 0
content: 0
footer: 0
boxed_layout: 1
boxed_layout: 0
sticky_footer: 1
boxed_layout_boxbg: '#ffffff'
box_max_width: '1580'
Expand All @@ -42,8 +42,8 @@ gutter_container_mobile: '30'
body_line_height: '1.6'
body_font_size: '16'
nav_font_size: '16'
headings_line_height: '1.1'
scale_factor: '1.34'
headings_line_height: '1.2'
scale_factor: '1.25'
h1_font_size: '52'
h2_font_size: '38'
h3_font_size: '29'
Expand Down Expand Up @@ -109,8 +109,8 @@ header_top_layout: '0'
header_style: normal
header_top_bg_opacity: '1'
header_top_height: '100'
header_top_fixed: 1
header_top_sticky: 1
header_top_fixed: 0
header_top_sticky: 0
header_top_sticky_show: always
header_top_height_sticky_offset: '60'
header_top_height_scroll: '50'
Expand All @@ -137,11 +137,11 @@ dropdown_hover_background: ''
dropdown_hover_background_custom: ''
dropdown_hover_text_color: ''
dropdown_hover_text_color_custom: ''
hamburger_menu: 'three-dash'
hamburger_menu: 'two-dash'
hamburger_animation: 'cross'
menu_type: uppercase
menu_link_spacing: '10'
menu_hover: opacity
menu_type: ''
menu_link_spacing: '20'
menu_hover: text
menu_border_position: bottom
menu_border_animate: drop
menu_border_position_offset: '0'
Expand All @@ -154,7 +154,7 @@ secondary_header_hide: hidden_none
custom_css_site: ''
custom_javascript_site: ''
block_preset: ''
block_card: ''
block_card: 'card card-body'
block_background: ''
block_background_custom: '#eeeeee'
block_padding: '0'
Expand Down
2 changes: 1 addition & 1 deletion css/base/variables.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/vendor-extensions/bootstrap-theme.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

37 changes: 37 additions & 0 deletions dxpr_theme.post_update.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,3 +123,40 @@ function dxpr_theme_post_update_n3_settings_update() {

return t('Theme settings CSS file has been updated.');
}

/**
* Migrate existing sites from "default" to "dxpr-theme-2025" color scheme.
*
* The default scheme changed from blue/green to monochrome. Existing sites
* that use the old default are migrated to "dxpr-theme-2025" to preserve their look.
*/
function dxpr_theme_post_update_n4_migrate_default_scheme() {
/** @var \Drupal\Core\Extension\ThemeHandler $theme_handler */
$theme_handler = \Drupal::service('theme_handler');
$theme_list = $theme_handler->listInfo();

require_once $theme_handler
->getTheme('dxpr_theme')
->getPath() . '/dxpr_theme_callbacks.inc';

/** @var \Drupal\Core\Extension\Extension $theme */
foreach ($theme_list as $theme) {
$theme_name = $theme->getName();
if ('dxpr_theme' === ($theme->info['base theme'] ?? '') || 'dxpr_theme' === $theme_name) {
$config = \Drupal::configFactory()
->getEditable($theme_name . '.settings');
$scheme = $config->get('color_scheme');

if ($scheme === 'default' || $scheme === NULL) {
$config->set('color_scheme', 'dxpr-theme-2025');
$config->save();
}

if (function_exists('dxpr_theme_css_cache_build')) {
dxpr_theme_css_cache_build($theme_name);
}
}
}

return t('Sites using the old default color scheme have been migrated to "dxpr-theme-2025".');
}
32 changes: 31 additions & 1 deletion features/sooper-colors/color-settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,37 @@
}
},
"default": {
"title": "DXPR Theme Default",
"title": "Default",
"colors": {
"base": "#000000",
"basetext": "#ffffff",
"link": "#000000",
"accent1": "#353740",
"accent1text": "#ffffff",
"accent2": "#F7F7F8",
"accent2text": "#353740",
"text": "#353740",
"headings": "#171717",
"footer": "#ffffff",
"footertext": "#353740",
"secheader": "#000000",
"secheadertext": "#ffffff",
"card": "#F7F7F8",
"cardtext": "#171717",
"header": "#ffffff",
"headertext": "#171717",
"headerside": "#ffffff",
"headersidetext": "#171717",
"pagetitle": "#ffffff",
"pagetitletext": "#171717",
"graylight": "#6E6E80",
"graylighter": "#E5E5E5",
"silver": "#F7F7F8",
"body": "#ffffff"
}
},
"dxpr-theme-2025": {
"title": "DXPR Theme 2025",
"colors": {
"base": "#284ed9",
"basetext": "#ffffff",
Expand Down
37 changes: 32 additions & 5 deletions scss/base/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ $schemes: (
"silver": #b0b0b0,
"body": #101010,
),
"default": (
"dxpr-theme-2025": (
"base": #284ed9,
"basetext": #fff,
"link": #284ed9,
Expand All @@ -193,6 +193,33 @@ $schemes: (
"silver": #f1f1f1,
"body": #efefef,
),
"default": (
"base": #000,
"basetext": #fff,
"link": #000,
"accent1": #353740,
"accent1text": #fff,
"accent2": #F7F7F8,
"accent2text": #353740,
"text": #353740,
"headings": #171717,
"footer": #fff,
"footertext": #353740,
"secheader": #000,
"secheadertext": #fff,
"card": #F7F7F8,
"cardtext": #171717,
"header": #fff,
"headertext": #171717,
"headerside": #fff,
"headersidetext": #171717,
"pagetitle": #fff,
"pagetitletext": #171717,
"graylight": #6E6E80,
"graylighter": #E5E5E5,
"silver": #F7F7F8,
"body": #fff,
),
"earthy": (
"base": #8b5f32,
"basetext": #fff,
Expand Down Expand Up @@ -679,18 +706,18 @@ $schemes: (
--dxt-setting-header-top-height-scroll: 50px;
--dxt-setting-header-top-height-sticky-offset: 60px;
--dxt-setting-header-top-height: 100px;
--dxt-setting-headings-bold: normal;
--dxt-setting-headings-bold: bold;
--dxt-setting-headings-font-face: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--dxt-setting-headings-letter-spacing: 0em;
--dxt-setting-headings-line-height: 1.1;
--dxt-setting-headings-line-height: 1.2;
--dxt-setting-headings-uppercase: none;
--dxt-setting-layout-max-width: 1320px;
--dxt-setting-logo-height: 35%;
--dxt-setting-menu-border-color: var(--dxt-color-header);
--dxt-setting-menu-border-position-offset-sticky: 0px;
--dxt-setting-menu-border-position-offset: 0px;
--dxt-setting-menu-border-size: 2px;
--dxt-setting-menu-link-spacing: 10px;
--dxt-setting-menu-link-spacing: 20px;
--dxt-setting-nav-font-face: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--dxt-setting-nav-font-size: 16px;
--dxt-setting-nav-mobile-font-size: 14px;
Expand All @@ -701,7 +728,7 @@ $schemes: (
--dxt-setting-page-title-image-opacity: 1;
--dxt-setting-page-title-image-position: center center;
--dxt-setting-page-title-image-style: cover;
--dxt-setting-scale-factor: 1.34;
--dxt-setting-scale-factor: 1.25;
--dxt-setting-sitename-font-face: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--dxt-setting-title-align: left;
--dxt-setting-title-background: transparent;
Expand Down
40 changes: 20 additions & 20 deletions scss/includes/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@

// Main colors
// -------------------------
$primary: #284ed9; // Google Material Design Green 300
$accent1: #05e993; // Google Material Design Green 600
$accent2: #284fd8; // Google Material Design Green 900
$primary: #000;
$accent1: #353740;
$accent2: #F7F7F8;

// Material Design Layer Drop Shadows
$dxpr-theme-shadow-1: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
Expand All @@ -28,27 +28,27 @@ $dxpr-theme-shadow-5: 0 19px 38px rgb(0 0 0 / 30%), 0 15px 12px rgb(0 0 0 / 22%)

// using string literals for colors because color module doesn't handle short colors properly
// http: //stackoverflow.com/questions/9611571/can-i-turn-off-sass-rgb-color-name
$body-background: #{'#efefef'};
$body-background: #{'#ffffff'};
$header-color: #{'#ffffff'};
$header-text-color: #{'#696969'};
$header-side-color: #{'#20252a'};
$header-side-text-color: #{'#737a85'};
$page-title-color: #{'#284fdb'};
$page-title-text-color: #{'#fffeff'};
$header-text-color: #{'#171717'};
$header-side-color: #{'#ffffff'};
$header-side-text-color: #{'#171717'};
$page-title-color: #{'#ffffff'};
$page-title-text-color: #{'#171717'};
$gray-darker: #{'#222222'};
$gray-dark: #{'#303030'};
$text: #{'#555555'};
$text-headings: #{'#333333'};
$footer: #{'#21252a'};
$footer-text: #{'#747a85'};
$secondary-header: #{'#284fd9'};
$secondary-header-text: #{'#fffffe'};
$gray-light: #{'#cccccc'};
$gray-lighter: #{'#dddddd'};
$card: #{'#eeeeee'};
$card-text: #{'#444444'};
$text: #{'#353740'};
$text-headings: #{'#171717'};
$footer: #{'#ffffff'};
$footer-text: #{'#353740'};
$secondary-header: #{'#000000'};
$secondary-header-text: #{'#ffffff'};
$gray-light: #{'#6E6E80'};
$gray-lighter: #{'#E5E5E5'};
$card: #{'#F7F7F8'};
$card-text: #{'#171717'};
$black: #{'#111111'};
$silver: #{'#f1f1f1'};
$silver: #{'#F7F7F8'};

// Default color scheme map.
$default-color-map: (
Expand Down
Loading