dark mode for header

This commit is contained in:
Sakshi Gupta
2026-01-02 14:36:42 +05:30
parent 6167f94bc3
commit 8eade71456
5 changed files with 124 additions and 12 deletions

View File

@@ -17,6 +17,38 @@
position: fixed;
top: -200px;
}
body.isDarkMode .ms-Layer {
.ms-Callout-main {
background-color: @BaseHigh !important;
}
.ms-Callout-beak {
background-color: @BaseHigh !important;
}
.ms-ContextualMenu {
background-color: @BaseHigh !important;
}
.ms-Dropdown-items {
background-color: @BaseHigh !important;
}
.ms-Dropdown-item {
background-color: @BaseHigh !important;
color: @BaseLight !important;
&:hover {
background-color: @BaseMediumHigh !important;
color: @BaseLight !important;
}
&.is-selected {
background-color: @BaseMediumHigh !important;
color: @BaseLight !important;
}
}
}
html {
font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@@ -129,6 +161,65 @@ body {
}
}
&.isDarkMode .accountSwitchContextualMenu {
background-color: @BaseHigh;
.ms-Callout-main {
background-color: @BaseHigh;
}
.ms-ContextualMenu-item {
background-color: @BaseHigh;
}
.ms-Dropdown {
.ms-Dropdown-title {
background-color: @BaseDark;
color: @BaseLight;
border-color: @BaseMediumHigh;
}
.ms-Dropdown-caretDownWrapper {
color: @BaseLight;
}
&:hover .ms-Dropdown-title {
background-color: @BaseHigh;
color: @BaseLight;
border-color: @BaseMedium;
}
}
.ms-Label {
color: @BaseLight;
}
}
&.isDarkMode .ms-Dropdown-callout {
.ms-Callout-main {
background-color: @BaseHigh;
}
.ms-Dropdown-items {
background-color: @BaseHigh;
}
.ms-Dropdown-item {
background-color: @BaseHigh;
color: @BaseLight;
&:hover {
background-color: @BaseMediumHigh;
color: @BaseLight;
}
&.is-selected {
background-color: @BaseMediumHigh;
color: @BaseLight;
}
}
}
.fixedleftpane {
background: @BaseLow;
height: 100vh;