mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-11 21:50:05 +00:00
e27cff0553
* added a dark theme toggle button on Copyjobs next to refresh button and covered full feature * Fix formatting in Utils.test.ts * updated infor icon , error icon and text on jobs details page * rebased from master * updated the conflicts * updated the conflicts * fixed the test suit * fixed review comments * test fix --------- Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
137 lines
3.6 KiB
Plaintext
137 lines
3.6 KiB
Plaintext
@import "../../less/Common/Constants";
|
|
:root {
|
|
// Light theme variables
|
|
--colorNeutralBackground1: @BaseLight;
|
|
--colorNeutralBackground2: @BaseLow;
|
|
--colorNeutralBackground3: @BaseMediumLow;
|
|
--colorNeutralForeground1: @BaseHigh;
|
|
--colorNeutralForeground2: @BaseMediumHigh;
|
|
--colorNeutralForeground3: @BaseMedium;
|
|
--colorNeutralForeground4: @BaseLow;
|
|
--colorNeutralStroke1: @BaseMedium;
|
|
--colorCompoundBrandStroke1: @SelectionColor;
|
|
--colorBrandForeground1: @LinkColor;
|
|
--colorPaletteRedForeground1: @ErrorColor;
|
|
--colorSuccessGreen: #107c10;
|
|
--overlayBackground: rgba(0, 0, 0, 0.4);
|
|
--colorBrandBackground: @SelectionColor;
|
|
--colorBrandBackgroundHover: @AccentMediumHigh;
|
|
--colorBrandBackgroundPressed: @AccentMedium;
|
|
--colorNeutralForegroundOnBrand: @BaseLight;
|
|
}
|
|
|
|
// Dark theme variables
|
|
body.isDarkMode {
|
|
--colorNeutralBackground1: #1e1e1e;
|
|
--colorNeutralBackground2: #2d2d2d;
|
|
--colorNeutralBackground3: #404040;
|
|
--colorNeutralForeground1: #ffffff;
|
|
--colorNeutralForeground2: #d2d2d2;
|
|
--colorNeutralForeground3: #a0a0a0;
|
|
--colorNeutralForeground4: #6e6e6e;
|
|
--colorNeutralStroke1: #484848;
|
|
--colorCompoundBrandStroke1: #4db6e8;
|
|
--colorBrandForeground1: #4db6e8;
|
|
--colorPaletteRedForeground1: #f25d5d;
|
|
--colorSuccessGreen: #107c10;
|
|
--overlayBackground: rgba(0, 0, 0, 0.4);
|
|
--colorBrandBackground: #0078d4;
|
|
--colorBrandBackgroundHover: #106ebe;
|
|
--colorBrandBackgroundPressed: #005a9e;
|
|
--colorNeutralForegroundOnBrand: #ffffff;
|
|
}
|
|
|
|
// Theme Mixins
|
|
.theme-background() {
|
|
background-color: var(--colorNeutralBackground1);
|
|
color: var(--colorNeutralForeground1);
|
|
}
|
|
|
|
.theme-surface() {
|
|
background-color: var(--colorNeutralBackground2);
|
|
color: var(--colorNeutralForeground1);
|
|
}
|
|
|
|
.theme-border() {
|
|
border-color: var(--colorNeutralStroke1);
|
|
}
|
|
|
|
.theme-input() {
|
|
background-color: var(--colorNeutralBackground2);
|
|
color: var(--colorNeutralForeground1);
|
|
border: 1px solid var(--colorNeutralStroke1);
|
|
|
|
&::placeholder {
|
|
color: var(--colorNeutralForeground3);
|
|
}
|
|
|
|
&:focus,
|
|
&:focus-within {
|
|
border-color: var(--colorCompoundBrandStroke1);
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
:global {
|
|
.ms-TextField {
|
|
.ms-TextField-fieldGroup {
|
|
&:focus-within {
|
|
border-color: var(--colorCompoundBrandStroke1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Checkbox styling for better visibility in dark theme
|
|
.ms-Checkbox {
|
|
.ms-Checkbox-checkbox {
|
|
border-color: var(--colorNeutralStroke1);
|
|
background-color: var(--colorNeutralBackground2);
|
|
}
|
|
|
|
&:hover .ms-Checkbox-checkbox {
|
|
border-color: var(--colorNeutralForeground2);
|
|
}
|
|
|
|
.ms-Checkbox-label {
|
|
color: var(--colorNeutralForeground1);
|
|
}
|
|
|
|
.ms-Checkbox-text {
|
|
color: var(--colorNeutralForeground1);
|
|
}
|
|
|
|
&.is-checked {
|
|
.ms-Checkbox-checkbox {
|
|
background-color: var(--colorBrandBackground);
|
|
border-color: var(--colorBrandBackground);
|
|
}
|
|
|
|
&:hover .ms-Checkbox-checkbox {
|
|
background-color: var(--colorBrandBackgroundHover);
|
|
border-color: var(--colorBrandBackgroundHover);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Additional dark mode specific adjustments
|
|
body.isDarkMode {
|
|
.ms-Checkbox {
|
|
.ms-Checkbox-checkbox {
|
|
border-width: 1px;
|
|
border-color: var(--colorNeutralForeground3);
|
|
background-color: var(--colorNeutralBackground2);
|
|
}
|
|
|
|
&:hover .ms-Checkbox-checkbox {
|
|
border-color: var(--colorNeutralForeground2);
|
|
background-color: var(--colorNeutralBackground3);
|
|
}
|
|
|
|
&.is-checked .ms-Checkbox-checkbox {
|
|
background-color: var(--colorBrandBackground);
|
|
border-color: var(--colorBrandBackground);
|
|
}
|
|
}
|
|
}
|