mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-22 03:04:07 +00:00
Dark theme for Explorer (#2185)
* First dark theme commits for command bar * Updated theme on sidebar * Updated tabs, sidebar, splash screen * settings theme changes * Dark theme applied to Monaco editor * Dark theme to stored procedures * Fixed sidebar scroll * Updated scroll issue in sidebar * Command bar items fixed * Fixed lint errors * fixed lint errors * settings side panel fixed * Second last iteration for css * Fixed all the issues of css * Updated the theme icon for now on DE to change the theme from portal/DE itself * Formatting issue resolved * Remove CloudShellTerminalComponent changes - revert to master version * Fixed test issue * Fixed formatting issue * Fix tests: update snapshots and revert xterm imports for compatibility * Fix xterm imports in CloudShellTerminalComponent to use @xterm packages * Fix Cloud Shell component imports for compatibility * Update test snapshots * Fix xterm package consistency across all CloudShell components * Fix TypeScript compilation errors in CloudShell components and query Documents - Standardized xterm package imports across CloudShell components to use legacy 'xterm' package - Fixed Terminal type compatibility issues in CommonUtils.tsx - Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations - Applied code formatting to ensure consistency * Update failing snapshot tests - Updated TreeNodeComponent snapshot tests for loading states - Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000) - All snapshot tests now pass * Fixed test issue * Fixed test issue * Updated the buttons for theme * Updated the Theme changes based on portal theme changes * Updated review comments * Updated the duplicate code and fixed the fabric react error * Few places styling added and resolving few comments * Fixed errors * Fixed comments * Fixed comments * Fixed comments * Fixed full text policy issue for mongoru accounts * Resolved comments for class Name and few others * Added css for homepage in ru accounts * Final commit with all the feedback issues resolved * Lint error resolved * Updated the review comments and few Ui issues * Resolved review comments and changed header bg and active state color * Moved svg code to different file and imported * css fixed for the hpome page boxed for ru account * Lint errors * Fixed boxes issue in ru accounts * Handled the initial theme from the portal * Updated snap * Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests * Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation * Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component --------- Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com> Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
This commit is contained in:
sakshigupta12feb
GitHub
134
src/less/ThemeSystem.less
Normal file
134
src/less/ThemeSystem.less
Normal file
@@ -0,0 +1,134 @@
|
||||
@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;
|
||||
--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;
|
||||
--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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user