테마 수정
This commit is contained in:
parent
4f31f81c26
commit
916b4cb75a
|
@ -103,28 +103,51 @@ body.theme-pink-dark {
|
||||||
// -----------------------------------------------------------------------------------------------------
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
// Define the primary, accent and warn palettes
|
// Define the primary, accent and warn palettes
|
||||||
/*$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
|
$lgRed-light-theme-primary-palette: mat-palette($mat-grey,800);
|
||||||
$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
|
$lgRed-light-theme-accent-palette: mat-palette($lg-red, 400);
|
||||||
$pink-light-theme-warn-palette: mat-palette($mat-red);*/
|
$lgRed-light-theme-warn-palette: mat-palette($mat-cyan);
|
||||||
|
|
||||||
$pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
|
|
||||||
$pink-light-theme-accent-palette: mat-palette($daesang);
|
|
||||||
$pink-light-theme-warn-palette: mat-palette($mat-orange);
|
|
||||||
|
|
||||||
// Create the Material theme object
|
// Create the Material theme object
|
||||||
$pink-light-theme: mat-light-theme(
|
$lgRed-light-theme: mat-light-theme(
|
||||||
$pink-light-theme-primary-palette,
|
$lgRed-light-theme-primary-palette,
|
||||||
$pink-light-theme-accent-palette,
|
$lgRed-light-theme-accent-palette,
|
||||||
$pink-light-theme-warn-palette
|
$lgRed-light-theme-warn-palette
|
||||||
|
);
|
||||||
|
|
||||||
|
// Add ".theme-pink-dark" class to the body to activate this theme.
|
||||||
|
// Class name must start with "theme-" !!!
|
||||||
|
body.theme-lgRed{
|
||||||
|
// Generate the Angular Material theme
|
||||||
|
@include angular-material-theme($lgRed-light-theme);
|
||||||
|
|
||||||
|
// Apply the theme to the user components
|
||||||
|
@include components-theme($lgRed-light-theme);
|
||||||
|
@include ucap-material-theme($lgRed-light-theme);
|
||||||
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
//aqua-blue-daesang
|
||||||
|
// -----------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
$aquaBlue-light-theme-primary-palette: mat-palette($daesang-grey, 900);
|
||||||
|
$aquaBlue-theme-accent-palette: mat-palette($aquaBlue-daesang);
|
||||||
|
$aquaBlue-theme-warn-palette: mat-palette($mat-orange);
|
||||||
|
|
||||||
|
// Create the Material theme object
|
||||||
|
$aquaBlue-light-theme: mat-light-theme(
|
||||||
|
$aquaBlue-light-theme-primary-palette,
|
||||||
|
$aquaBlue-theme-accent-palette,
|
||||||
|
$aquaBlue-theme-warn-palette
|
||||||
);
|
);
|
||||||
|
|
||||||
// Add ".theme-pink-dark" class to the body to activate this theme.
|
// Add ".theme-pink-dark" class to the body to activate this theme.
|
||||||
// Class name must start with "theme-" !!!
|
// Class name must start with "theme-" !!!
|
||||||
body.theme-default {
|
body.theme-default {
|
||||||
// Generate the Angular Material theme
|
// Generate the Angular Material theme
|
||||||
@include angular-material-theme($pink-light-theme);
|
@include angular-material-theme($aquaBlue-light-theme);
|
||||||
|
|
||||||
// Apply the theme to the user components
|
// Apply the theme to the user components
|
||||||
@include components-theme($pink-light-theme);
|
@include components-theme($aquaBlue-light-theme);
|
||||||
@include ucap-material-theme($pink-light-theme);
|
@include ucap-material-theme($aquaBlue-light-theme);
|
||||||
}
|
}
|
||||||
|
|
|
@ -46,12 +46,12 @@ ol {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
$lg-red: (
|
$lg-red: (
|
||||||
50: #faf3f6,
|
50: #fff9fc,
|
||||||
100: #f8bbd0,
|
100: #f8bbd0,
|
||||||
200: #f48fb1,
|
200: #f48fb1,
|
||||||
300: #f06292,
|
/*300: #f06292,*/300:#ef4c73,
|
||||||
400: #ef4c73,
|
400: #ec407a,
|
||||||
/* 400: #ec407a,*/ 500: #ed097e,
|
500: #ed097e,
|
||||||
600: #d81b60,
|
600: #d81b60,
|
||||||
700: #c2185b,
|
700: #c2185b,
|
||||||
800: #ad1457,
|
800: #ad1457,
|
||||||
|
@ -84,7 +84,7 @@ $lg-red: (
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
||||||
$daesang: (
|
$aquaBlue-daesang: (
|
||||||
50: #f9feff,
|
50: #f9feff,
|
||||||
//#e0f7fa,
|
//#e0f7fa,
|
||||||
100: #b2ebf2,
|
100: #b2ebf2,
|
||||||
|
@ -173,6 +173,10 @@ $daesang-grey: (
|
||||||
$gradient-light: mat-color($accent, G100);
|
$gradient-light: mat-color($accent, G100);
|
||||||
|
|
||||||
//basic
|
//basic
|
||||||
|
.bg-primary-darkest{
|
||||||
|
background: mat-color($primary, 900);
|
||||||
|
color: mat-color($primary, default-contrast);
|
||||||
|
}
|
||||||
.bg-primary-dark {
|
.bg-primary-dark {
|
||||||
background: mat-color($primary, 900);
|
background: mat-color($primary, 900);
|
||||||
color: mat-color($primary, default-contrast);
|
color: mat-color($primary, default-contrast);
|
||||||
|
@ -186,7 +190,7 @@ $daesang-grey: (
|
||||||
color: mat-color($primary, default-contrast);
|
color: mat-color($primary, default-contrast);
|
||||||
}
|
}
|
||||||
.bg-accent-darkest {
|
.bg-accent-darkest {
|
||||||
background: mat-color($accent, 900);
|
background: mat-color($accent, 800);
|
||||||
color: mat-color($primary, default-contrast);
|
color: mat-color($primary, default-contrast);
|
||||||
}
|
}
|
||||||
.bg-accent-dark {
|
.bg-accent-dark {
|
||||||
|
@ -209,7 +213,7 @@ $daesang-grey: (
|
||||||
color: mat-color($primary);
|
color: mat-color($primary);
|
||||||
}
|
}
|
||||||
.text-accent-darkest {
|
.text-accent-darkest {
|
||||||
color: mat-color($accent, 900);
|
color: mat-color($accent, 800);
|
||||||
}
|
}
|
||||||
.text-accent-color {
|
.text-accent-color {
|
||||||
color: mat-color($accent);
|
color: mat-color($accent);
|
||||||
|
|
|
@ -56,7 +56,7 @@
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="send-message-button bg-accent-darkest"
|
class="send-message-button bg-primary-darkest"
|
||||||
mat-icon-button
|
mat-icon-button
|
||||||
type="submit"
|
type="submit"
|
||||||
aria-label="Send message"
|
aria-label="Send message"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user