By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
By continuing you indicate that you have read and agree to our Terms of service and Privacy policy
Explore Related Topics
Popular Libraries in Web Site
Trending New libraries in Web Site
Top Authors in Web Site
1
394 Libraries
1457
2
303 Libraries
9468
3
135 Libraries
33734
4
77 Libraries
5740
5
68 Libraries
6171
6
63 Libraries
1631
7
59 Libraries
642
8
54 Libraries
12104
9
54 Libraries
619
10
53 Libraries
2446
1
394 Libraries
1457
2
303 Libraries
9468
3
135 Libraries
33734
4
77 Libraries
5740
5
68 Libraries
6171
6
63 Libraries
1631
7
59 Libraries
642
8
54 Libraries
12104
9
54 Libraries
619
10
53 Libraries
2446
Trending Kits in Web Site
Trending Discussions on Web Site
QUESTION
Create new color scheme for dark-light mode in bootstrap sass
Asked 2022-Jan-16 at 19:50I want to create dark mode for a web site which use bootstrap. I have to add new root class which includes all boostrap colors. Here is my colors.scss:
1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10 "brd-default": $body-color
11 );
12
13I want create new class like this:
1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10 "brd-default": $body-color
11 );
12
13:root.dark{
14 // override colors and classes for dark mode
15 $primary:#012345;
16 $secondary:#111111;
17 $success:#222222;
18}
19So how can i copy and paste all bootstrap colors for new color scheme?
If i can add colors, i will change HTML class so my root(color scheme) will be:
in my styles.scss:
1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10 "brd-default": $body-color
11 );
12
13:root.dark{
14 // override colors and classes for dark mode
15 $primary:#012345;
16 $secondary:#111111;
17 $success:#222222;
18}
19@import "./colors";// custom colors
20@import "bootstrap/scss/functions";
21@import "bootstrap/scss/variables";
22@import "bootstrap/scss/utilities";
23ANSWER
Answered 2021-Aug-07 at 20:32As explained here, there's no way to attach a class to :root. However, you don't need this to achieve what you want.
Simply make a dark class then you can add that as desired to the html or body tag.
Make all the needed theme color changes inside .dark{}, and then @import "bootstrap". When .dark doesn't exist on the body, the theme colors will return to Bootstrap defaults.
1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10 "brd-default": $body-color
11 );
12
13:root.dark{
14 // override colors and classes for dark mode
15 $primary:#012345;
16 $secondary:#111111;
17 $success:#222222;
18}
19@import "./colors";// custom colors
20@import "bootstrap/scss/functions";
21@import "bootstrap/scss/variables";
22@import "bootstrap/scss/utilities";
23@import "functions";
24@import "variables";
25@import "mixins";
26
27
28.dark {
29
30 /* redefine theme colors for dark theme */
31 $primary: #012345;
32 $secondary: #111111;
33 $success: #222222;
34 $dark: #000;
35
36 $theme-colors: (
37 "primary": $primary,
38 "secondary": $secondary,
39 "success": $success,
40 "danger": $danger,
41 "info": $indigo,
42 "dark": $dark,
43 "light": $light,
44 );
45
46 /* redefine theme color variables */
47 @each $color, $value in $theme-colors {
48 --#{$variable-prefix}#{$color}: #{$value};
49 }
50
51 /* redefine theme color rgb vars (used for bg- colors) */
52 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
53 @each $color, $value in $theme-colors-rgb {
54 --#{$variable-prefix}#{$color}-rgb: #{$value};
55 }
56
57 $body-color: #eeeeee;
58 $body-bg: #263C5C;
59
60 --#{$variable-prefix}body-color: #{$body-color};
61 --#{$variable-prefix}body-bg: #{$body-bg};
62
63 @import "bootstrap";
64}
65
66
Community Discussions contain sources that include Stack Exchange Network
QUESTION
Create new color scheme for dark-light mode in bootstrap sass
Asked 2022-Jan-16 at 19:50I want to create dark mode for a web site which use bootstrap. I have to add new root class which includes all boostrap colors. Here is my colors.scss:
1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10 "brd-default": $body-color
11 );
12
13I want create new class like this:
1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10 "brd-default": $body-color
11 );
12
13:root.dark{
14 // override colors and classes for dark mode
15 $primary:#012345;
16 $secondary:#111111;
17 $success:#222222;
18}
19So how can i copy and paste all bootstrap colors for new color scheme?
If i can add colors, i will change HTML class so my root(color scheme) will be:
in my styles.scss:
1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10 "brd-default": $body-color
11 );
12
13:root.dark{
14 // override colors and classes for dark mode
15 $primary:#012345;
16 $secondary:#111111;
17 $success:#222222;
18}
19@import "./colors";// custom colors
20@import "bootstrap/scss/functions";
21@import "bootstrap/scss/variables";
22@import "bootstrap/scss/utilities";
23ANSWER
Answered 2021-Aug-07 at 20:32As explained here, there's no way to attach a class to :root. However, you don't need this to achieve what you want.
Simply make a dark class then you can add that as desired to the html or body tag.
Make all the needed theme color changes inside .dark{}, and then @import "bootstrap". When .dark doesn't exist on the body, the theme colors will return to Bootstrap defaults.
1$primary:#065FC6;
2$secondary:#263C5C;
3$success:#49C96D;
4$danger:#FD7972;
5$warning:#FF965D;
6$light:#F8F8F8;
7$body-color: #263C5C;
8
9$custom-colors: (
10 "brd-default": $body-color
11 );
12
13:root.dark{
14 // override colors and classes for dark mode
15 $primary:#012345;
16 $secondary:#111111;
17 $success:#222222;
18}
19@import "./colors";// custom colors
20@import "bootstrap/scss/functions";
21@import "bootstrap/scss/variables";
22@import "bootstrap/scss/utilities";
23@import "functions";
24@import "variables";
25@import "mixins";
26
27
28.dark {
29
30 /* redefine theme colors for dark theme */
31 $primary: #012345;
32 $secondary: #111111;
33 $success: #222222;
34 $dark: #000;
35
36 $theme-colors: (
37 "primary": $primary,
38 "secondary": $secondary,
39 "success": $success,
40 "danger": $danger,
41 "info": $indigo,
42 "dark": $dark,
43 "light": $light,
44 );
45
46 /* redefine theme color variables */
47 @each $color, $value in $theme-colors {
48 --#{$variable-prefix}#{$color}: #{$value};
49 }
50
51 /* redefine theme color rgb vars (used for bg- colors) */
52 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
53 @each $color, $value in $theme-colors-rgb {
54 --#{$variable-prefix}#{$color}-rgb: #{$value};
55 }
56
57 $body-color: #eeeeee;
58 $body-bg: #263C5C;
59
60 --#{$variable-prefix}body-color: #{$body-color};
61 --#{$variable-prefix}body-bg: #{$body-bg};
62
63 @import "bootstrap";
64}
65
66