src/frontend/packages/suse-theme/_index.scss
@import '~@stratosui/theme/helper';
@import './sass/colors';
// SUSE overrides
@import './sass/suse';
@function stratos-theme() {
@return (
default: create-suse-theme($stratos-theme),
dark: create-suse-dark-theme()
);
}
@function create-suse-theme($base-theme) {
$theme: stratos-theme-helper($base-theme);
// Modify some of the colors
$app-theme: map-get($theme, app-theme);
$app-theme: map-merge($app-theme, (
header-background-color: $suse-header-bar,
header-foreground-color: $suse-text,
header-background-span: true,
link-color: $suse-link-color,
link-active-color: darken($suse-link-color, 10%),
stratos-title-show-text: true,
underflow-background-color: $suse-primary-color,
underflow-foreground-color: $suse-text,
user-avatar-background-color: $suse-primary-color,
user-avatar-foreground-color: $suse-text,
user-avatar-header-invert-colors: false,
intro-screen-background-color: $suse-gray,
side-nav: (
background: $suse-side-nav-bg,
text: $suse-side-nav-text,
active: $suse-side-nav-active-bg,
active-text: $suse-side-nav-active-text,
hover: $suse-side-nav-active-bg,
hover-text: $suse-side-nav-active-text
)
));
$theme: map-merge($theme, (
app-theme: $app-theme
));
@return $theme;
}
@function create-suse-dark-theme() {
$theme: create-suse-theme($suse-dark-theme);
$app-theme: map-get($theme, app-theme);
$app-theme: map-merge($app-theme, (
link-color: $suse-dark-link-color,
link-active-color: darken($suse-dark-link-color, 10%),
underflow-background-color: $suse-dark-primary-color,
user-avatar-background-color: $suse-dark-primary-color,
side-nav: (
background: $suse-dark-side-nav-bg,
text: $suse-dark-side-nav-text,
active: $suse-dark-side-nav-active-bg,
active-text: $suse-dark-side-nav-active-text,
hover: $suse-dark-side-nav-active-bg,
hover-text: $suse-dark-side-nav-active-text
),
));
$theme: map-merge($theme, (
app-theme: $app-theme
));
@return $theme;
}