Merge branch 'main' into feat/cloudintegration-azure-impl

* refactor: moving types to cloud provider specific namespace/pkg

* refactor: separating cloud provider types

* refactor: using upper case key for AWS

* feat: adding cloud integration azure types

* feat: adding azure services

* refactor: updating omitempty tags

* refactor: updating azure integration config

* feat: completing azure types

* refactor: lint issues

* feat: adding service definitions for azure

* refactor: update service names for Azure Blob Storage telemetry

* refactor: updating definitions with metrics and strategy

* refactor: updating command key

* fix: handle optional connection URL in AWS integration

* refactor: updating strategy struct

* refactor: updating telemetry strategy

* refactor: updating blob storage service name

* refactor: updating azure blob storage service name

* refactor: update Azure service identifiers

* refactor: updating service defs

* refactor: updating types

cmd/enterprise/server.go

@@ -167,7 +167,7 @@ func runServer(ctx context.Context, config signoz.Config, logger *slog.Logger) e
 			if err != nil {
 				return nil, err
 			}
-			azureCloudProviderModule := implcloudprovider.NewAzureCloudProvider()
+			azureCloudProviderModule := implcloudprovider.NewAzureCloudProvider(defStore)
 			cloudProvidersMap := map[cloudintegrationtypes.CloudProviderType]cloudintegration.CloudProviderModule{
 				cloudintegrationtypes.CloudProviderTypeAWS:   awsCloudProviderModule,
 				cloudintegrationtypes.CloudProviderTypeAzure: azureCloudProviderModule,

ee/authz/openfgaauthz/provider.go

@@ -86,6 +86,28 @@ func (provider *provider) BatchCheck(ctx context.Context, tupleReq map[string]*o
 	return provider.openfgaServer.BatchCheck(ctx, tupleReq)
 }
 
+func (provider *provider) CheckTransactions(ctx context.Context, subject string, orgID valuer.UUID, transactions []*authtypes.Transaction) ([]*authtypes.TransactionWithAuthorization, error) {
+	tuples, err := authtypes.NewTuplesFromTransactions(transactions, subject, orgID)
+	if err != nil {
+		return nil, err
+	}
+
+	batchResults, err := provider.openfgaServer.BatchCheck(ctx, tuples)
+	if err != nil {
+		return nil, err
+	}
+
+	results := make([]*authtypes.TransactionWithAuthorization, len(transactions))
+	for i, txn := range transactions {
+		result := batchResults[txn.ID.StringValue()]
+		results[i] = &authtypes.TransactionWithAuthorization{
+			Transaction: txn,
+			Authorized:  result.Authorized,
+		}
+	}
+	return results, nil
+}
+
 func (provider *provider) ListObjects(ctx context.Context, subject string, relation authtypes.Relation, objectType authtypes.Type) ([]*authtypes.Object, error) {
 	return provider.openfgaServer.ListObjects(ctx, subject, relation, objectType)
 }

ee/modules/cloudintegration/implcloudintegration/implcloudprovider/azurecloudprovider.go

@@ -2,27 +2,47 @@ package implcloudprovider
 
 import (
 	"context"
+	"sort"
 
 	"github.com/SigNoz/signoz/pkg/modules/cloudintegration"
 	"github.com/SigNoz/signoz/pkg/types/cloudintegrationtypes"
 )
 
-type azurecloudprovider struct{}
+type azurecloudprovider struct {
+	serviceDefinitions cloudintegrationtypes.ServiceDefinitionStore
+}
 
-func NewAzureCloudProvider() cloudintegration.CloudProviderModule {
-	return &azurecloudprovider{}
+func NewAzureCloudProvider(defStore cloudintegrationtypes.ServiceDefinitionStore) cloudintegration.CloudProviderModule {
+	return &azurecloudprovider{
+		serviceDefinitions: defStore,
+	}
 }
 
 func (provider *azurecloudprovider) GetConnectionArtifact(ctx context.Context, account *cloudintegrationtypes.Account, req *cloudintegrationtypes.GetConnectionArtifactRequest) (*cloudintegrationtypes.ConnectionArtifact, error) {
-	panic("implement me")
+	cliCommand := cloudintegrationtypes.NewAzureConnectionCLICommand(account.ID, req.Config.AgentVersion, req.Credentials, req.Config.Azure)
+	psCommand := cloudintegrationtypes.NewAzureConnectionPowerShellCommand(account.ID, req.Config.AgentVersion, req.Credentials, req.Config.Azure)
+
+	return &cloudintegrationtypes.ConnectionArtifact{
+		Azure: cloudintegrationtypes.NewAzureConnectionArtifact(cliCommand, psCommand),
+	}, nil
 }
 
 func (provider *azurecloudprovider) ListServiceDefinitions(ctx context.Context) ([]*cloudintegrationtypes.ServiceDefinition, error) {
-	panic("implement me")
+	return provider.serviceDefinitions.List(ctx, cloudintegrationtypes.CloudProviderTypeAzure)
 }
 
 func (provider *azurecloudprovider) GetServiceDefinition(ctx context.Context, serviceID cloudintegrationtypes.ServiceID) (*cloudintegrationtypes.ServiceDefinition, error) {
-	panic("implement me")
+	serviceDef, err := provider.serviceDefinitions.Get(ctx, cloudintegrationtypes.CloudProviderTypeAzure, serviceID)
+	if err != nil {
+		return nil, err
+	}
+
+	// override cloud integration dashboard id.
+	for index, dashboard := range serviceDef.Assets.Dashboards {
+		serviceDef.Assets.Dashboards[index].ID = cloudintegrationtypes.GetCloudIntegrationDashboardID(cloudintegrationtypes.CloudProviderTypeAzure, serviceID.StringValue(), dashboard.ID)
+	}
+
+	return serviceDef, nil
 }
 
 func (provider *azurecloudprovider) BuildIntegrationConfig(
@@ -30,5 +50,56 @@ func (provider *azurecloudprovider) BuildIntegrationConfig(
 	account *cloudintegrationtypes.Account,
 	services []*cloudintegrationtypes.StorableCloudIntegrationService,
 ) (*cloudintegrationtypes.ProviderIntegrationConfig, error) {
-	panic("implement me")
+	sort.Slice(services, func(i, j int) bool {
+		return services[i].Type.StringValue() < services[j].Type.StringValue()
+	})
+
+	var strategies []*cloudintegrationtypes.AzureTelemetryCollectionStrategy
+
+	for _, storedSvc := range services {
+		svcCfg, err := cloudintegrationtypes.NewServiceConfigFromJSON(cloudintegrationtypes.CloudProviderTypeAzure, storedSvc.Config)
+		if err != nil {
+			return nil, err
+		}
+
+		svcDef, err := provider.GetServiceDefinition(ctx, storedSvc.Type)
+		if err != nil {
+			return nil, err
+		}
+
+		strategy := svcDef.TelemetryCollectionStrategy.Azure
+		if strategy == nil {
+			continue
+		}
+
+		logsEnabled := svcCfg.IsLogsEnabled(cloudintegrationtypes.CloudProviderTypeAzure)
+		metricsEnabled := svcCfg.IsMetricsEnabled(cloudintegrationtypes.CloudProviderTypeAzure)
+
+		if !logsEnabled && !metricsEnabled {
+			continue
+		}
+
+		entry := &cloudintegrationtypes.AzureTelemetryCollectionStrategy{
+			ResourceProvider: strategy.ResourceProvider,
+			ResourceType:     strategy.ResourceType,
+		}
+
+		if metricsEnabled && strategy.Metrics != nil {
+			entry.Metrics = strategy.Metrics
+		}
+
+		if logsEnabled && strategy.Logs != nil {
+			entry.Logs = strategy.Logs
+		}
+
+		strategies = append(strategies, entry)
+	}
+
+	return &cloudintegrationtypes.ProviderIntegrationConfig{
+		Azure: cloudintegrationtypes.NewAzureIntegrationConfig(
+			account.Config.Azure.DeploymentRegion,
+			account.Config.Azure.ResourceGroups,
+			strategies,
+		),
+	}, nil
 }

ee/modules/cloudintegration/implcloudintegration/module.go

@@ -429,9 +429,13 @@ func (module *module) Collect(ctx context.Context, orgID valuer.UUID) (map[strin
 		stats["cloudintegration.aws.connectedaccounts.count"] = awsAccountsCount
 	}
 
-	// NOTE: not adding stats for services for now.
+	// get connected accounts for Azure
+	azureAccountsCount, err := module.store.CountConnectedAccounts(ctx, orgID, cloudintegrationtypes.CloudProviderTypeAzure)
+	if err == nil {
+		stats["cloudintegration.azure.connectedaccounts.count"] = azureAccountsCount
+	}
 
-	// TODO: add more cloud providers when supported
+	// NOTE: not adding stats for services for now.
 
 	return stats, nil
 }

frontend/.oxlintrc.json

@@ -286,7 +286,7 @@
     // Prevents useStore.getState() - export standalone actions instead
     "signoz/no-navigator-clipboard": "error",
     // Prevents navigator.clipboard - use useCopyToClipboard hook instead (disabled in tests via override)
-    "signoz/no-raw-absolute-path": "warn",
+    "signoz/no-raw-absolute-path": "error",
     // Prevents window.open(path), window.location.origin + path, window.location.href = path
     "no-restricted-imports": [
       "error",

frontend/index.html

@@ -40,12 +40,12 @@
 		<meta
 			data-react-helmet="true"
 			property="og:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"
 			name="twitter:image"
-			content="/images/signoz-hero-image.webp"
+			content="[[.BaseHref]]images/signoz-hero-image.webp"
 		/>
 		<meta
 			data-react-helmet="true"

frontend/src/components/AppLoading/AppLoading.styles.scss

@@ -74,7 +74,7 @@
 	width: 100%;
 	height: 100%;
 
-	background: radial-gradient(circle, var(--l1-foreground) 10%, transparent 0);
+	background: radial-gradient(circle, #fff 10%, transparent 0);
 	background-size: 12px 12px;
 	opacity: 1;
 

frontend/src/components/AuthError/AuthError.styles.scss

@@ -99,6 +99,36 @@
 	}
 }
 
+.lightMode {
+	.auth-error-container {
+		.error-content {
+			&__error-code {
+				color: var(--l2-foreground);
+			}
+
+			&__error-message {
+				color: var(--l1-foreground);
+			}
+
+			&__message-badge-label-text {
+				color: var(--l2-foreground);
+			}
+
+			&__message-item {
+				color: var(--l1-foreground);
+
+				&::before {
+					background: var(--l3-background);
+				}
+			}
+
+			&__scroll-hint-text {
+				color: var(--l2-foreground);
+			}
+		}
+	}
+}
+
 @keyframes horizontal-shaking {
 	0% {
 		transform: translateX(0);

frontend/src/components/AuthPageContainer/AuthFooter.styles.scss

@@ -87,3 +87,23 @@
 	background: var(--l3-background);
 	flex-shrink: 0;
 }
+
+.lightMode {
+	.auth-footer-content {
+		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
+	}
+
+	.auth-footer-icon {
+		filter: brightness(0) saturate(100%) invert(25%) sepia(8%) saturate(518%)
+			hue-rotate(192deg) brightness(80%) contrast(95%);
+		opacity: 0.9;
+	}
+
+	.auth-footer-text {
+		color: var(--text-neutral-light-200);
+	}
+
+	.auth-footer-link-icon {
+		color: var(--text-neutral-light-100);
+	}
+}

frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss

@@ -143,3 +143,28 @@
 		}
 	}
 }
+
+.lightMode {
+	.bg-dot-pattern {
+		background: radial-gradient(
+			circle,
+			var(--l3-background) 1px,
+			transparent 1px
+		);
+		background-size: 12px 12px;
+	}
+
+	.auth-page-gradient {
+		background: radial-gradient(
+			ellipse at center top,
+			color-mix(in srgb, var(--primary-background) 12%, transparent) 0%,
+			transparent 60%
+		);
+		opacity: 0.8;
+		filter: blur(200px);
+
+		@media (min-width: 768px) {
+			filter: blur(300px);
+		}
+	}
+}

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss

@@ -238,7 +238,18 @@
 		height: 2px;
 		bottom: 0;
 		left: 0;
-		background-color: var(--l1-background);
-		color: var(--l1-foreground);
+		background-color: var(--l1-foreground);
+	}
+}
+
+.lightMode {
+	.celery-task-graph-grid-container {
+		.celery-task-graph-worker-count {
+			background: unset;
+		}
+	}
+
+	.configure-option-Info {
+		border: 1px dashed var(--bg-robin-400);
 	}
 }

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -9,6 +9,7 @@ import { CreditCard, MessageSquareText, X } from 'lucide-react';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 export default function ChatSupportGateway(): JSX.Element {
 	const { notifications } = useNotifications();
@@ -54,7 +55,7 @@ export default function ChatSupportGateway(): JSX.Element {
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -77,11 +77,11 @@
 		width: 280px;
 
 		&::placeholder {
-			color: var(--l1-foreground);
+			color: white;
 		}
 
 		&:focus::placeholder {
-			color: rgba($color: var(--l1-foreground), $alpha: 0.4);
+			color: rgba($color: #ffffff, $alpha: 0.4);
 		}
 	}
 }
@@ -113,6 +113,42 @@
 	}
 }
 
+.lightMode {
+	.time-options-container {
+		.time-options-item {
+			&.active {
+				background-color: rgba($color: #ffffff, $alpha: 0.2);
+
+				&:hover {
+					cursor: pointer;
+					background-color: rgba($color: #ffffff, $alpha: 0.3);
+				}
+			}
+
+			&:hover {
+				cursor: pointer;
+				background-color: rgba($color: #ffffff, $alpha: 0.3);
+			}
+		}
+	}
+
+	.timeSelection-input {
+		display: flex;
+		gap: 8px;
+		align-items: center;
+		padding: 4px 8px;
+		padding-left: 0px !important;
+
+		input::placeholder {
+			color: var(---bg-ink-300);
+		}
+
+		input:focus::placeholder {
+			color: rgba($color: #000000, $alpha: 0.4);
+		}
+	}
+}
+
 .date-time-popover__footer {
 	border-top: 1px solid var(--l1-border);
 	padding: 8px 14px;
@@ -264,3 +300,34 @@
 		background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
 	}
 }
+
+.lightMode {
+	.timezone-container {
+		.timezone {
+			background: rgb(179 179 179 / 15%);
+			&__icon {
+				stroke: var(--l1-foreground);
+			}
+		}
+	}
+
+	.custom-time-picker {
+		.timeSelection-input {
+			&:hover {
+				border-color: var(--l1-border) !important;
+			}
+		}
+	}
+
+	.timezone-badge {
+		background: rgb(179 179 179 / 15%);
+	}
+
+	.time-input-suffix-icon-badge {
+		background: rgb(179 179 179 / 15%);
+
+		&:hover {
+			background: rgb(179 179 179 / 20%);
+		}
+	}
+}

frontend/src/components/CustomTimePicker/TimezonePicker.styles.scss

@@ -129,3 +129,20 @@ $item-spacing: 8px;
 		width: 15px;
 	}
 }
+
+.lightMode {
+	.timezone-picker {
+		&__search {
+			.search-icon {
+				stroke: var(--l1-foreground);
+			}
+		}
+	}
+	.timezone-name-wrapper {
+		&__selected-icon {
+			.check-icon {
+				stroke: var(--l1-foreground);
+			}
+		}
+	}
+}

frontend/src/components/DropDown/DropDown.styles.scss

@@ -1,5 +1,9 @@
 .dropdown-button {
-	color: var(--l1-foreground);
+	color: #fff;
+}
+
+.dropdown-button--dark {
+	color: #000;
 }
 
 .dropdown-icon {

frontend/src/components/DropDown/DropDown.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
 
 import './DropDown.styles.scss';
 
@@ -11,6 +12,8 @@ function DropDown({
 	element: JSX.Element[];
 	onDropDownItemClick?: MenuProps['onClick'];
 }): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
 	const items: MenuProps['items'] = element.map(
 		(e: JSX.Element, index: number) => ({
 			label: e,
@@ -32,7 +35,7 @@ function DropDown({
 		>
 			<Button
 				type="link"
-				className={`dropdown-button`}
+				className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'}
 				onClick={(e): void => {
 					e.preventDefault();
 					setDdOpen(true);

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -28,6 +28,7 @@ import { useAppContext } from 'providers/App/App';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
+import { getAbsoluteUrl } from 'utils/basePath';
 import { toAPIError } from 'utils/errorUtils';
 
 import DeleteMemberDialog from './DeleteMemberDialog';
@@ -381,7 +382,7 @@ function EditMemberDrawer({
 				pathParams: { id: member.id },
 			});
 			if (response?.data?.token) {
-				const link = `${window.location.origin}/password-reset?token=${response.data.token}`;
+				const link = getAbsoluteUrl(`/password-reset?token=${response.data.token}`);
 				setResetLink(link);
 				setResetLinkExpiresAt(
 					response.data.expiresAt

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -13,6 +13,7 @@ import GetMinMax from 'lib/getMinMax';
 import { Check, Info, Link2 } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 const routesToBeSharedWithTime = [
 	ROUTES.LOGS_EXPLORER,
@@ -80,17 +81,13 @@ function ShareURLModal(): JSX.Element {
 
 				urlQuery.delete(QueryParams.relativeTime);
 
-				currentUrl = `${window.location.origin}${
-					location.pathname
-				}?${urlQuery.toString()}`;
+				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
 			} else {
 				urlQuery.delete(QueryParams.startTime);
 				urlQuery.delete(QueryParams.endTime);
 
 				urlQuery.set(QueryParams.relativeTime, selectedTime);
-				currentUrl = `${window.location.origin}${
-					location.pathname
-				}?${urlQuery.toString()}`;
+				currentUrl = getAbsoluteUrl(`${location.pathname}?${urlQuery.toString()}`);
 			}
 		}
 

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -17,6 +17,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 import { ROLES } from 'types/roles';
 import { EMAIL_REGEX } from 'utils/app';
+import { getBaseUrl } from 'utils/basePath';
 import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
@@ -191,7 +192,7 @@ function InviteMembersModal({
 					email: row.email.trim(),
 					name: '',
 					role: row.role as ROLES,
-					frontendBaseUrl: window.location.origin,
+					frontendBaseUrl: getBaseUrl(),
 				});
 			} else {
 				await inviteUsers({
@@ -199,7 +200,7 @@ function InviteMembersModal({
 						email: row.email.trim(),
 						name: '',
 						role: row.role,
-						frontendBaseUrl: window.location.origin,
+						frontendBaseUrl: getBaseUrl(),
 					})),
 				});
 			}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -14,6 +14,7 @@ import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';
+import { getBaseUrl } from 'utils/basePath';
 
 import './LaunchChatSupport.styles.scss';
 
@@ -154,7 +155,7 @@ function LaunchChatSupport({
 		});
 
 		updateCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	};
 

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,6 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { ArrowUpRight } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
 
@@ -14,7 +15,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 	const handleClick = (): void => {
 		onClick?.();
 		if (url) {
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	};
 	return (

frontend/src/components/MembersTable/MembersTable.styles.scss

@@ -196,3 +196,17 @@
 		opacity: 0.5;
 	}
 }
+
+.lightMode {
+	.members-table {
+		.ant-table-tbody {
+			> tr.members-table-row--tinted > td {
+				background: rgba(0, 0, 0, 0.015);
+			}
+
+			> tr:hover > td {
+				background: rgba(0, 0, 0, 0.03) !important;
+			}
+		}
+	}
+}

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -20,6 +20,7 @@ import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
 } from 'pages/MessagingQueues/MessagingQueuesUtils';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuid } from 'uuid';
 
 import './MessagingQueueHealthCheck.styles.scss';
@@ -76,7 +77,7 @@ function ErrorTitleAndKey({
 		if (isCloudUserVal && !!link) {
 			history.push(link);
 		} else {
-			window.open(KAFKA_SETUP_DOC_LINK, '_blank');
+			openInNewTab(KAFKA_SETUP_DOC_LINK);
 		}
 	};
 	return {

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.styles.scss

@@ -167,3 +167,22 @@
 		padding-right: 8px;
 	}
 }
+
+.lightMode {
+	.config-btn {
+		&.missing-config-btn {
+			background: var(--bg-amber-100);
+			color: var(--bg-amber-500);
+
+			&:hover {
+				color: var(--bg-amber-600) !important;
+			}
+		}
+
+		.missing-config-btn {
+			.config-btn-content {
+				border-right: 1px solid var(--bg-amber-600);
+			}
+		}
+	}
+}

frontend/src/components/NewSelect/styles.scss

@@ -16,7 +16,7 @@ $custom-border-color: #2c3044;
 	}
 
 	.ant-select-selection-placeholder {
-		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 
 	// Base styles are for dark mode
@@ -48,6 +48,10 @@ $custom-border-color: #2c3044;
 			visibility: visible !important;
 			pointer-events: none;
 			z-index: 2;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85) !important;
+			}
 		}
 
 		&.ant-select-focused .ant-select-selection-placeholder {
@@ -63,6 +67,10 @@ $custom-border-color: #2c3044;
 		color: var(--l2-foreground);
 		z-index: 1;
 		pointer-events: none;
+
+		.lightMode & {
+			color: rgba(0, 0, 0, 0.85);
+		}
 	}
 
 	.ant-select-selector {
@@ -106,7 +114,7 @@ $custom-border-color: #2c3044;
 	}
 
 	.ant-select-selection-placeholder {
-		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 
 	// Customize tags in multiselect (dark mode by default)
@@ -172,9 +180,7 @@ $custom-border-color: #2c3044;
 .custom-multiselect-dropdown-container {
 	z-index: 1050 !important;
 	padding: 0;
-	box-shadow:
-		0 3px 6px -4px rgba(0, 0, 0, 0.5),
-		0 6px 16px 0 rgba(0, 0, 0, 0.4),
+	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.5), 0 6px 16px 0 rgba(0, 0, 0, 0.4),
 		0 9px 28px 8px rgba(0, 0, 0, 0.3);
 	background-color: var(--l2-background);
 	border: 1px solid var(--l1-border);
@@ -209,7 +215,7 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 }
 
@@ -567,7 +573,7 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
+		color: color-mix(in srgb, var(--border) 45%, transparent);
 	}
 
 	.status-message {
@@ -798,10 +804,8 @@ $custom-border-color: #2c3044;
 	.custom-multiselect-dropdown-container {
 		background-color: var(--l1-background);
 		border: 1px solid var(--l1-border);
-		box-shadow:
-			0 3px 6px -4px rgba(0, 0, 0, 0.12),
-			0 6px 16px 0 rgba(0, 0, 0, 0.08),
-			0 9px 28px 8px rgba(0, 0, 0, 0.05);
+		box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+			0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
 		.empty-message {
 			color: var(--l2-foreground);
@@ -972,9 +976,11 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			z-index: 2;
 			pointer-events: none;
-			transition:
-				opacity 0.2s ease,
-				visibility 0.2s ease;
+			transition: opacity 0.2s ease, visibility 0.2s ease;
+
+			.lightMode & {
+				color: rgba(0, 0, 0, 0.85);
+			}
 		}
 
 		&:focus-within .all-text {

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -249,6 +249,57 @@
 	}
 }
 
+.lightMode {
+	.query-aggregation-container {
+		.aggregation-container {
+			.query-aggregation-select-container {
+				.query-aggregation-select-editor {
+					.cm-editor {
+						.cm-tooltip-autocomplete {
+							background: var(--l1-background) !important;
+							border: 1px solid var(--l1-border) !important;
+							box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+							backdrop-filter: none;
+
+							ul {
+								li {
+									&:hover,
+									&[aria-selected='true'] {
+										background: var(--l3-background) !important;
+									}
+								}
+							}
+						}
+
+						.cm-line {
+							::-moz-selection {
+								background: var(--l2-background) !important;
+								opacity: 0.5 !important;
+							}
+
+							::selection {
+								background: var(--l1-background) !important;
+								opacity: 0.5 !important;
+							}
+
+							.cm-function {
+								color: var(--primary-background) !important;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+	.query-aggregation-error-popover {
+		.ant-popover-inner {
+			background-color: var(--l1-background);
+			border: none;
+			box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+		}
+	}
+}
+
 .query-aggregation-error-popover {
 	.ant-popover-inner {
 		background-color: var(--l1-border);

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.styles.scss

@@ -121,3 +121,44 @@
 		}
 	}
 }
+
+.lightMode {
+	.qb-trace-operator {
+		&-arrow {
+			&::before {
+				background: repeating-linear-gradient(
+					to right,
+					var(--l3-background),
+					var(--l3-background) 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
+			&::after {
+				background-color: var(--l3-background);
+			}
+		}
+		&.non-list-view {
+			&::before {
+				background: repeating-linear-gradient(
+					to bottom,
+					var(--l3-background),
+					var(--l3-background) 4px,
+					transparent 4px,
+					transparent 8px
+				);
+			}
+		}
+
+		&-label-with-input {
+			border: 1px solid var(--l1-border) !important;
+			background: var(--l1-background) !important;
+
+			.label {
+				color: var(--l1-foreground) !important;
+				border-right: 1px solid var(--l1-border) !important;
+				background: var(--l1-background) !important;
+			}
+		}
+	}
+}

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -152,7 +152,7 @@
 	width: 100%;
 	height: 100%;
 
-	background: radial-gradient(circle, var(--l1-foreground) 10%, transparent 0);
+	background: radial-gradient(circle, #fff 10%, transparent 0);
 	background-size: 12px 12px;
 	opacity: 1;
 

frontend/src/components/ServiceAccountsTable/ServiceAccountsTable.styles.scss

@@ -197,3 +197,17 @@
 		background-color: var(--l1-border);
 	}
 }
+
+.lightMode {
+	.sa-table {
+		.ant-table-tbody {
+			> tr.sa-table-row--tinted > td {
+				background: rgba(0, 0, 0, 0.015);
+			}
+
+			> tr:hover > td {
+				background: rgba(0, 0, 0, 0.03) !important;
+			}
+		}
+	}
+}

frontend/src/components/WarningPopover/WarningPopover.styles.scss

@@ -169,12 +169,9 @@
 		gap: 3px;
 		background: var(--l1-border);
 		border-radius: 20px;
-		box-shadow:
-			0px 103px 12px 0px rgba(0, 0, 0, 0.01),
-			0px 66px 18px 0px rgba(0, 0, 0, 0.01),
-			0px 37px 22px 0px rgba(0, 0, 0, 0.03),
-			0px 17px 17px 0px rgba(0, 0, 0, 0.04),
-			0px 4px 9px 0px rgba(0, 0, 0, 0.04);
+		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
+			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
+			0px 17px 17px 0px rgba(0, 0, 0, 0.04), 0px 4px 9px 0px rgba(0, 0, 0, 0.04);
 	}
 
 	&__scroll-hint-text {
@@ -186,3 +183,29 @@
 		letter-spacing: -0.06px;
 	}
 }
+
+.lightMode {
+	.warning-content {
+		&__warning-code {
+			color: var(--l2-foreground);
+		}
+		&__warning-message {
+			color: var(--l1-foreground);
+		}
+		&__message-item {
+			color: var(--l1-foreground);
+		}
+		&__message-badge {
+			&-label-text {
+				color: var(--l1-foreground);
+			}
+			.key-value-label__value {
+				color: var(--l1-foreground);
+			}
+		}
+		&__docs-button {
+			background: var(--l1-background);
+			color: var(--l2-foreground);
+		}
+	}
+}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss

@@ -157,3 +157,9 @@
 .view-all-drawer {
 	border-radius: 4px;
 }
+
+.lightMode {
+	.ant-table {
+		background: inherit;
+	}
+}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -9,6 +9,7 @@ import {
 } from 'container/ApiMonitoring/utils';
 import { UnfoldVertical } from 'lucide-react';
 import { SuccessResponse } from 'types/api';
+import { openInNewTab } from 'utils/navigation';
 
 import emptyStateUrl from '@/assets/Icons/emptyState.svg';
 
@@ -94,20 +95,14 @@ function DependentServices({
 					}}
 					onRow={(record): { onClick: () => void; className: string } => ({
 						onClick: (): void => {
-							const url = new URL(
-								`/services/${
-									record.serviceData.serviceName &&
-									record.serviceData.serviceName !== '-'
-										? record.serviceData.serviceName
-										: ''
-								}`,
-								window.location.origin,
-							);
+							const serviceName =
+								record.serviceData.serviceName && record.serviceData.serviceName !== '-'
+									? record.serviceData.serviceName
+									: '';
 							const urlQuery = new URLSearchParams();
 							urlQuery.set(QueryParams.startTime, timeRange.startTime.toString());
 							urlQuery.set(QueryParams.endTime, timeRange.endTime.toString());
-							url.search = urlQuery.toString();
-							window.open(url.toString(), '_blank');
+							openInNewTab(`/services/${serviceName}?${urlQuery.toString()}`);
 						},
 						className: 'clickable-row',
 					})}

frontend/src/container/ApiMonitoring/Explorer/Explorer.styles.scss

@@ -134,9 +134,7 @@
 
 			.ant-table-thead
 				> tr
-				> th:not(:last-child):not(.ant-table-selection-column):not(
-					.ant-table-row-expand-icon-cell
-				):not([colspan])::before {
+				> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
 				background-color: transparent;
 			}
 
@@ -226,3 +224,54 @@
 		}
 	}
 }
+
+.lightMode {
+	.api-quick-filter-left-section {
+		.api-quick-filters-header {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+		}
+	}
+
+	.api-module-right-section {
+		.toolbar {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+		}
+	}
+
+	.no-filtered-domains-message-container {
+		.no-filtered-domains-message-content {
+			.no-filtered-domains-message {
+				.no-domain-title {
+					color: var(--l1-foreground);
+				}
+
+				.no-domain-subtitle {
+					color: var(--l2-foreground);
+
+					.attribute {
+						font-family: 'Space Mono';
+					}
+				}
+			}
+		}
+	}
+	.api-monitoring-domain-list-table {
+		.ant-table {
+			.ant-table-cell {
+				color: var(--l1-foreground);
+			}
+
+			.table-row-light {
+				background: none;
+			}
+
+			.table-row-dark {
+				background: none;
+			}
+
+			.round-metric-tag {
+				color: var(--l1-foreground);
+			}
+		}
+	}
+}

frontend/src/container/AppLayout/index.tsx

@@ -73,6 +73,7 @@ import {
 import { UserPreference } from 'types/api/preferences/preference';
 import AppReducer from 'types/reducer/app';
 import { USER_ROLES } from 'types/roles';
+import { getBaseUrl } from 'utils/basePath';
 import { showErrorNotification } from 'utils/error';
 import { eventEmitter } from 'utils/getEventEmitter';
 import {
@@ -461,7 +462,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 
 	const handleFailedPayment = useCallback((): void => {
 		manageCreditCard({
-			url: window.location.origin,
+			url: getBaseUrl(),
 		});
 	}, [manageCreditCard]);
 

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -31,6 +31,7 @@ import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
+import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
 
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
@@ -324,7 +325,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			updateCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		} else {
 			logEvent('Billing : Manage Billing', {
@@ -333,7 +334,7 @@ export default function BillingContainer(): JSX.Element {
 			});
 
 			manageCreditCard({
-				url: window.location.origin,
+				url: getBaseUrl(),
 			});
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -7,6 +7,7 @@ import { FeatureKeys } from 'constants/features';
 import { useAppContext } from 'providers/App/App';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import { getOptionList } from './config';
 import { AlertTypeCard, SelectTypeContainer } from './styles';
@@ -55,7 +56,7 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 			page: 'New alert data source selection page',
 		});
 
-		window.open(url, '_blank');
+		openInNewTab(url);
 	}
 	const renderOptions = useMemo(
 		() => (

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -14,6 +14,7 @@ import { IUser } from 'providers/App/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import { ROUTING_POLICIES_ROUTE } from './constants';
 import { RoutingPolicyBannerProps } from './types';
@@ -387,7 +388,7 @@ export function NotificationChannelsNotFoundContent({
 							style={{ padding: '0 4px' }}
 							type="link"
 							onClick={(): void => {
-								window.open(ROUTES.CHANNELS_NEW, '_blank');
+								openInNewTab(ROUTES.CHANNELS_NEW);
 							}}
 						>
 							here.

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -46,6 +46,7 @@ function DomainUpdateToast({
 					className="custom-domain-toast-visit-btn"
 					suffix={<ExternalLink size={12} />}
 					onClick={(): void => {
+						// oxlint-disable-next-line signoz/no-raw-absolute-path
 						window.open(url, '_blank', 'noopener,noreferrer');
 					}}
 				>
@@ -74,10 +75,8 @@ export default function CustomDomainSettings(): JSX.Element {
 	const [isPollingEnabled, setIsPollingEnabled] = useState(false);
 	const [hosts, setHosts] = useState<ZeustypesHostDTO[] | null>(null);
 
-	const [
-		updateDomainError,
-		setUpdateDomainError,
-	] = useState<AxiosError<RenderErrorResponseDTO> | null>(null);
+	const [updateDomainError, setUpdateDomainError] =
+		useState<AxiosError<RenderErrorResponseDTO> | null>(null);
 
 	const [customDomainSubdomain, setCustomDomainSubdomain] = useState<
 		string | undefined
@@ -90,10 +89,8 @@ export default function CustomDomainSettings(): JSX.Element {
 		refetch: refetchHosts,
 	} = useGetHosts();
 
-	const {
-		mutate: updateSubDomain,
-		isLoading: isLoadingUpdateCustomDomain,
-	} = usePutHost<AxiosError<RenderErrorResponseDTO>>();
+	const { mutate: updateSubDomain, isLoading: isLoadingUpdateCustomDomain } =
+		usePutHost<AxiosError<RenderErrorResponseDTO>>();
 
 	const stripProtocol = (url: string): string => url?.split('://')[1] ?? url;
 
@@ -137,7 +134,7 @@ export default function CustomDomainSettings(): JSX.Element {
 			{
 				onSuccess: () => {
 					setIsPollingEnabled(true);
-					refetchHosts();
+					void refetchHosts();
 					setIsEditModalOpen(false);
 					setCustomDomainSubdomain(subdomain);
 					const newUrl = `https://${subdomain}.${dnsSuffix}`;

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -28,7 +28,7 @@
 			}
 
 			.dashboard-title {
-				color: var(--l1-foreground);
+				color: #fff;
 				font-family: Inter;
 				font-size: 16px;
 				font-style: normal;
@@ -463,3 +463,135 @@
 		}
 	}
 }
+
+.lightMode {
+	.dashboard-description-container {
+		color: var(--l1-foreground);
+
+		.dashboard-details {
+			.left-section {
+				.dashboard-title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			.right-section {
+				.icons {
+					border: 1px solid var(--l1-border);
+					background: var(--l1-background);
+					color: var(--l1-foreground);
+				}
+
+				.configure-button {
+					border: 1px solid var(--l1-border);
+					background: var(--l1-background);
+					color: var(--l1-foreground);
+				}
+			}
+		}
+
+		.dashboard-description-section {
+			color: var(--l1-foreground);
+		}
+	}
+	.dashboard-settings {
+		.ant-popover-inner {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background) !important;
+		}
+
+		.menu-content {
+			display: flex;
+			flex-direction: column;
+
+			.section-1 {
+				border-bottom: 1px solid var(--l1-border);
+
+				.ant-btn {
+					color: var(--l1-foreground);
+				}
+			}
+			.section-2 {
+				border-bottom: 1px solid var(--l1-border);
+
+				.ant-btn {
+					color: var(--l1-foreground);
+				}
+			}
+		}
+	}
+
+	.rename-dashboard {
+		.ant-modal-content {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background);
+
+			.ant-modal-header {
+				background: var(--l1-background);
+				border-bottom: 1px solid var(--l1-border);
+
+				.ant-modal-title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			.ant-modal-body {
+				.dashboard-content {
+					.name-text {
+						color: var(--l1-foreground);
+					}
+
+					.dashboard-name-input {
+						border: 1px solid var(--l1-border);
+						background: var(--l1-background);
+					}
+				}
+			}
+
+			.ant-modal-footer {
+				.dashboard-rename {
+					.cancel-btn {
+						background: var(--l3-background);
+					}
+				}
+			}
+		}
+	}
+
+	.section-naming {
+		.ant-modal-content {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background);
+
+			.ant-modal-header {
+				background: var(--l1-background);
+				border-bottom: 1px solid var(--l1-border);
+
+				.ant-modal-title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			.ant-modal-body {
+				.section-naming-content {
+					.name-text {
+						color: var(--l1-foreground);
+					}
+
+					.section-name-input {
+						border: 1px solid var(--l1-border);
+						background: var(--l1-background);
+					}
+				}
+			}
+
+			.ant-modal-footer {
+				.dashboard-rename {
+					.cancel-btn {
+						background: var(--l3-background);
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/container/DashboardContainer/DashboardSettings/General/GeneralSettings.styles.scss

@@ -141,3 +141,58 @@
 		}
 	}
 }
+
+.lightMode {
+	.overview-content {
+		.overview-settings {
+			border: 1px solid var(--l1-border);
+
+			.name-icon-input {
+				.dashboard-image-input {
+					.ant-select-selector {
+						border: 1px solid var(--l1-border);
+						background: var(--l3-background);
+					}
+				}
+
+				.dashboard-name-input {
+					border: 1px solid var(--l1-border);
+					background: var(--l3-background);
+				}
+			}
+
+			.dashboard-name {
+				color: var(--l1-foreground);
+			}
+
+			.description-text-area {
+				border: 1px solid var(--l1-border);
+				background: var(--l3-background);
+			}
+		}
+
+		.overview-settings-footer {
+			border-top: 1px solid var(--l1-border);
+			background: var(--l1-background);
+
+			.unsaved {
+				.unsaved-dot {
+					background: var(--primary-background);
+				}
+				.unsaved-changes {
+					color: var(--bg-robin-400);
+				}
+			}
+			.footer-action-btns {
+				.discard-btn {
+					color: var(--l1-foreground);
+					background-color: var(--l3-background);
+				}
+
+				.save-btn {
+					color: var(--l3-background);
+				}
+			}
+		}
+	}
+}

frontend/src/container/DashboardContainer/DashboardSettings/PublicDashboard/index.tsx

@@ -15,6 +15,8 @@ import { useDashboardStore } from 'providers/Dashboard/store/useDashboardStore';
 import { PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
 import APIError from 'types/api/error';
 import { USER_ROLES } from 'types/roles';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
 
 import './PublicDashboard.styles.scss';
 
@@ -212,7 +214,7 @@ function PublicDashboardSetting(): JSX.Element {
 
 		try {
 			setCopyPublicDashboardURL(
-				`${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+				getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 			);
 			toast.success('Copied Public Dashboard URL successfully');
 		} catch (error) {
@@ -221,7 +223,7 @@ function PublicDashboardSetting(): JSX.Element {
 	};
 
 	const publicDashboardURL = useMemo(
-		() => `${window.location.origin}${publicDashboardResponse?.data?.publicPath}`,
+		() => getAbsoluteUrl(publicDashboardResponse?.data?.publicPath ?? ''),
 		[publicDashboardResponse],
 	);
 
@@ -294,7 +296,7 @@ function PublicDashboardSetting(): JSX.Element {
 								icon={<ExternalLink size={12} />}
 								onClick={(): void => {
 									if (publicDashboardURL) {
-										window.open(publicDashboardURL, '_blank');
+										openInNewTab(publicDashboardURL);
 									}
 								}}
 							/>

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.styles.scss

@@ -100,6 +100,27 @@
 	max-width: 500px;
 }
 
+.lightMode {
+	.variable-item {
+		.variable-name {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background);
+			color: var(--bg-robin-300);
+		}
+
+		.variable-value {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background);
+			color: var(--l1-foreground);
+
+			&:hover,
+			&:focus-within {
+				outline: 1px solid var(--bg-robin-400);
+			}
+		}
+	}
+}
+
 .cycle-error-alert {
 	margin-bottom: 12px;
 	padding: 4px 12px;

frontend/src/container/DashboardContainer/PanelTypeSelectionModal/PanelTypeSelectionModal.styles.scss

@@ -116,3 +116,50 @@
 		}
 	}
 }
+
+.lightMode {
+	.panel-type-selection-modal {
+		.ant-modal-content {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background);
+
+			.ant-modal-header {
+				background: var(--l1-background);
+				border-bottom: 1px solid var(--l1-border);
+
+				.ant-modal-title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			.ant-modal-body {
+				.panel-selection {
+					.selected {
+						background: var(--l2-background);
+					}
+
+					.ant-card {
+						border: 1px solid var(--l1-border);
+
+						.ant-card-body {
+							.ant-typography {
+								color: var(--l2-foreground);
+							}
+						}
+					}
+				}
+			}
+
+			.ant-modal-footer {
+				border-top: 1px solid var(--l1-border);
+				background: var(--l1-background);
+
+				.ant-btn {
+					color: var(--l1-foreground);
+
+					background: var(--primary-background);
+				}
+			}
+		}
+	}
+}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -61,3 +61,11 @@
 		width: 14px;
 	}
 }
+
+.lightMode {
+	.dashboard-breadcrumbs {
+		.dashboard-btn {
+			color: var(--l1-foreground);
+		}
+	}
+}

frontend/src/container/DownloadV2/DownloadV2.styles.scss

@@ -57,3 +57,32 @@
 		}
 	}
 }
+
+.lightMode {
+	.download-logs-popover {
+		.ant-popover-inner {
+			border: 1px solid var(--l1-border);
+			background: linear-gradient(
+				139deg,
+				color-mix(in srgb, var(--card) 80%, transparent) 0%,
+				color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+			);
+
+			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+
+			.download-logs-content {
+				.action-btns {
+					color: var(--l1-foreground);
+				}
+				.action-btns:hover {
+					&.ant-btn-text {
+						background-color: var(--l3-background) !important;
+					}
+				}
+				.export-heading {
+					color: var(--l2-foreground);
+				}
+			}
+		}
+	}
+}

frontend/src/container/ForgotPassword/index.tsx

@@ -9,6 +9,7 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import APIError from 'types/api/error';
 import { OrgSessionContext } from 'types/api/v2/sessions/context/get';
+import { getBaseUrl } from 'utils/basePath';
 
 import tvUrl from '@/assets/svgs/tv.svg';
 
@@ -104,7 +105,7 @@ function ForgotPassword({
 			data: {
 				email: values.email,
 				orgId: currentOrgId,
-				frontendBaseURL: window.location.origin,
+				frontendBaseURL: getBaseUrl(),
 			},
 		});
 	}, [form, forgotPasswordMutate, initialOrgId, hasMultipleOrgs]);

frontend/src/container/FormAlertRules/BasicInfo.tsx

@@ -15,6 +15,7 @@ import { AlertDef, Labels } from 'types/api/alerts/def';
 import { Channels } from 'types/api/channels/getAll';
 import APIError from 'types/api/error';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
+import { openInNewTab } from 'utils/navigation';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import ChannelSelect from './ChannelSelect';
@@ -87,7 +88,7 @@ function BasicInfo({
 			dataSource: ALERTS_DATA_SOURCE_MAP[alertDef?.alertType as AlertTypes],
 			ruleId: isNewRule ? 0 : alertDef?.id,
 		});
-		window.open(ROUTES.CHANNELS_NEW, '_blank');
+		openInNewTab(ROUTES.CHANNELS_NEW);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 	const hasLoggedEvent = useRef(false);

frontend/src/container/FormAlertRules/FormAlertRules.styles.scss

@@ -119,6 +119,41 @@
 	}
 }
 
+.lightMode {
+	.main-container {
+		.plot-tag {
+			background: var(--l3-background);
+		}
+	}
+	.ant-modal-content {
+		background-color: var(--l1-foreground);
+		.ant-modal-confirm-title {
+			color: var(--l1-foreground);
+		}
+
+		.ant-modal-confirm-content {
+			.ant-typography {
+				color: var(--l1-foreground);
+			}
+		}
+
+		.ant-modal-confirm-btns {
+			button:nth-of-type(1) {
+				background-color: var(--l3-background);
+				border: none;
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	.info-help-btns {
+		.doc-redirection-btn {
+			color: var(--bg-aqua-600) !important;
+			border-color: var(--bg-aqua-600) !important;
+		}
+	}
+}
+
 .create-notification-btn {
 	box-shadow: none;
 }

frontend/src/container/FormAlertRules/index.tsx

@@ -55,6 +55,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { isModifierKeyPressed } from 'utils/app';
 import { compositeQueryToQueryEnvelope } from 'utils/compositeQueryToQueryEnvelope';
+import { openInNewTab } from 'utils/navigation';
 
 import BasicInfo from './BasicInfo';
 import ChartPreview from './ChartPreview';
@@ -777,7 +778,7 @@ function FormAlertRules({
 				queryType: currentQuery.queryType,
 				link: url,
 			});
-			window.open(url, '_blank');
+			openInNewTab(url);
 		}
 	}
 

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.styles.scss

@@ -174,3 +174,23 @@
 		}
 	}
 }
+
+.lightMode {
+	.dashboard-empty-state {
+		.dashboard-content {
+			.heading {
+				.icons {
+					color: var(--l1-foreground);
+				}
+
+				.welcome {
+					color: var(--l1-foreground);
+				}
+
+				.welcome-info {
+					color: var(--l1-foreground);
+				}
+			}
+		}
+	}
+}

frontend/src/container/GridCardLayout/GridCardLayout.styles.scss

@@ -333,3 +333,100 @@
 		}
 	}
 }
+
+.lightMode {
+	.fullscreen-grid-container {
+		.react-grid-layout {
+			.row-panel {
+				background: var(--l2-background);
+
+				.settings-icon {
+					color: var(--l1-foreground);
+				}
+
+				.row-icon {
+					color: var(--l1-foreground);
+				}
+
+				.section-title {
+					color: var(--l1-foreground);
+				}
+			}
+		}
+	}
+
+	.widget-full-view {
+		.ant-modal-content {
+			background-color: var(--l1-foreground);
+
+			.ant-modal-header {
+				background-color: var(--l1-foreground);
+			}
+		}
+	}
+
+	.row-settings {
+		.ant-popover-inner {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background);
+
+			.menu-content {
+				.section-1 {
+					.rename-btn {
+						color: var(--l1-foreground);
+					}
+				}
+
+				.section-2 {
+					border-top: 1px solid var(--l1-border);
+					.remove-section {
+						color: var(--bg-cherry-400);
+					}
+				}
+			}
+		}
+	}
+
+	.rename-section {
+		.ant-modal-content {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background);
+
+			.ant-modal-header {
+				background: var(--l1-background);
+				border-bottom: 1px solid var(--l1-border);
+
+				.ant-modal-title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			.ant-modal-body {
+				.typography {
+					color: var(--l2-foreground);
+				}
+
+				.ant-form-item {
+					.action-btns {
+						.cancel-btn {
+							color: var(--l1-foreground);
+							background: var(--l3-background);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.view-onclick-show-button {
+		background: var(--l2-background);
+		border-color: var(--l1-foreground);
+		color: var(--l1-foreground);
+
+		.menu-item {
+			&:hover {
+				background-color: var(--l2-foreground);
+			}
+		}
+	}
+}

frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss

@@ -55,6 +55,14 @@
 	padding-right: 0.25rem;
 }
 
+.lightMode {
+	.widget-header-container {
+		.ant-input-group-addon {
+			background-color: inherit;
+		}
+	}
+}
+
 .long-tooltip {
 	.ant-tooltip-content {
 		max-height: 500px;

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -10,6 +10,7 @@ import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import dialsUrl from '@/assets/Icons/dials.svg';
 
@@ -114,7 +115,7 @@ export default function Dashboards({
 							dashboardName: dashboard.data.title,
 						});
 						if (event.metaKey || event.ctrlKey) {
-							window.open(getLink(), '_blank');
+							openInNewTab(getLink());
 						} else {
 							safeNavigate(getLink());
 						}

frontend/src/container/Home/DataSourceInfo/DataSourceInfo.tsx

@@ -9,6 +9,7 @@ import { Link2 } from 'lucide-react';
 import Card from 'periscope/components/Card/Card';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
+import { openInNewTab } from 'utils/navigation';
 
 import containerPlusUrl from '@/assets/Icons/container-plus.svg';
 import helloWaveUrl from '@/assets/Icons/hello-wave.svg';
@@ -51,7 +52,7 @@ function DataSourceInfo({
 		if (activeLicense && activeLicense.platform === LicensePlatform.CLOUD) {
 			history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 		} else {
-			window?.open(DOCS_LINKS.ADD_DATA_SOURCE, '_blank', 'noopener noreferrer');
+			openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 		}
 	};
 

frontend/src/container/Home/Home.styles.scss

@@ -227,9 +227,7 @@
 		.ant-typography {
 			color: var(--l2-foreground);
 			font-variant-numeric: lining-nums tabular-nums slashed-zero;
-			font-feature-settings:
-				'dlig' on,
-				'salt' on;
+			font-feature-settings: 'dlig' on, 'salt' on;
 			font-family: Inter;
 			font-size: 11px !important;
 			font-style: normal;
@@ -482,10 +480,10 @@
 					border-radius: 2px;
 					border: 1px solid var(--l1-border);
 					background: var(--l2-background);
+					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 					&.selected {
-						background: var(--l3-background);
-						color: var(--primary);
+						background: var(--l2-background);
 					}
 				}
 			}

frontend/src/container/Home/HomeChecklist/HomeChecklist.tsx

@@ -8,6 +8,7 @@ import { ArrowRight, ArrowRightToLine, BookOpenText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { LicensePlatform } from 'types/api/licensesV3/getActive';
 import { USER_ROLES } from 'types/roles';
+import { openInNewTab } from 'utils/navigation';
 
 import './HomeChecklist.styles.scss';
 
@@ -99,11 +100,7 @@ function HomeChecklist({
 														) {
 															history.push(item.toRoute || '');
 														} else {
-															window?.open(
-																item.docsLink || '',
-																'_blank',
-																'noopener noreferrer',
-															);
+															openInNewTab(item.docsLink || '');
 														}
 													}}
 												>
@@ -119,7 +116,7 @@ function HomeChecklist({
 																step: item.id,
 															});
 
-															window?.open(item.docsLink, '_blank', 'noopener noreferrer');
+															openInNewTab(item.docsLink ?? '');
 														}}
 													>
 														<BookOpenText size={16} />

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -21,9 +21,9 @@ import { DataSource } from 'types/common/queryBuilder';
 import { USER_ROLES } from 'types/roles';
 
 import floppyDiscUrl from '@/assets/Icons/floppy-disc.svg';
+import logsUrl from '@/assets/Icons/logs.svg';
 
 import { getItemIcon } from '../constants';
-import { ScrollText } from '@signozhq/icons';
 
 export default function SavedViews({
 	onUpdateChecklistDoneItem,
@@ -54,20 +54,17 @@ export default function SavedViews({
 		isError: metricsViewsError,
 	} = useGetAllViews(DataSource.METRICS);
 
-	const logsViews = useMemo(
-		() => [...(logsViewsData?.data.data || [])],
-		[logsViewsData],
-	);
+	const logsViews = useMemo(() => [...(logsViewsData?.data.data || [])], [
+		logsViewsData,
+	]);
 
-	const tracesViews = useMemo(
-		() => [...(tracesViewsData?.data.data || [])],
-		[tracesViewsData],
-	);
+	const tracesViews = useMemo(() => [...(tracesViewsData?.data.data || [])], [
+		tracesViewsData,
+	]);
 
-	const metricsViews = useMemo(
-		() => [...(metricsViewsData?.data.data || [])],
-		[metricsViewsData],
-	);
+	const metricsViews = useMemo(() => [...(metricsViewsData?.data.data || [])], [
+		metricsViewsData,
+	]);
 
 	useEffect(() => {
 		if (selectedEntity === 'logs') {
@@ -351,7 +348,7 @@ export default function SavedViews({
 									className={selectedEntity === 'logs' ? 'selected tab' : 'tab'}
 									onClick={(): void => handleTabChange('logs')}
 								>
-									<ScrollText size={14} />
+									<img src={logsUrl} alt="logs-icon" className="logs-icon" />
 									Logs
 								</Button>
 								<Button

frontend/src/container/Home/Services/ServiceMetrics.tsx

@@ -31,6 +31,7 @@ import { GlobalReducer } from 'types/reducer/globalTime';
 import { Tags } from 'types/reducer/trace';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -79,11 +80,7 @@ const EmptyState = memo(
 								) {
 									history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 								} else {
-									window?.open(
-										DOCS_LINKS.ADD_DATA_SOURCE,
-										'_blank',
-										'noopener noreferrer',
-									);
+									openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 								}
 							}}
 						>

frontend/src/container/Home/Services/ServiceTraces.tsx

@@ -17,6 +17,7 @@ import { ServicesList } from 'types/api/metrics/getService';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { USER_ROLES } from 'types/roles';
 import { isModifierKeyPressed } from 'utils/app';
+import { openInNewTab } from 'utils/navigation';
 
 import triangleRulerUrl from '@/assets/Icons/triangle-ruler.svg';
 
@@ -133,11 +134,7 @@ export default function ServiceTraces({
 									) {
 										history.push(ROUTES.GET_STARTED_WITH_CLOUD);
 									} else {
-										window?.open(
-											DOCS_LINKS.ADD_DATA_SOURCE,
-											'_blank',
-											'noopener noreferrer',
-										);
+										openInNewTab(DOCS_LINKS.ADD_DATA_SOURCE);
 									}
 								}}
 							>

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx

@@ -51,6 +51,7 @@ import {
 	LogsAggregatorOperator,
 	TracesAggregatorOperator,
 } from 'types/common/queryBuilder';
+import { openInNewTab } from 'utils/navigation';
 import { v4 as uuidv4 } from 'uuid';
 
 import { filterDuplicateFilters } from '../commonUtils';
@@ -569,10 +570,7 @@ function K8sBaseDetails<T>({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
 		} else if (selectedView === VIEW_TYPES.TRACES) {
 			const compositeQuery = {
 				...initialQueryState,
@@ -591,10 +589,7 @@ function K8sBaseDetails<T>({
 
 			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
 
-			window.open(
-				`${window.location.origin}${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`,
-				'_blank',
-			);
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
 		}
 	};
 

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/entityTraces.styles.scss

@@ -132,9 +132,7 @@
 
 			.ant-table-thead
 				> tr
-				> th:not(:last-child):not(.ant-table-selection-column):not(
-					.ant-table-row-expand-icon-cell
-				):not([colspan])::before {
+				> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
 				background-color: transparent;
 			}
 
@@ -148,3 +146,50 @@
 		}
 	}
 }
+
+.lightMode {
+	.entity-metric-traces-header {
+		.filter-section {
+			border-top: 1px solid var(--l1-border);
+			border-bottom: 1px solid var(--l1-border);
+
+			.ant-select-selector {
+				border-color: var(--l1-border) !important;
+				color: var(--l2-foreground);
+			}
+		}
+	}
+
+	.entity-metric-traces-table {
+		.ant-table {
+			border-radius: 3px;
+			border: 1px solid var(--l1-border);
+
+			.ant-table-thead > tr > th {
+				background: var(--l1-foreground);
+				color: var(--l2-foreground);
+			}
+
+			.ant-table-thead > tr > th:has(.entityname-column-header) {
+				background: var(--l1-foreground);
+			}
+
+			.ant-table-cell {
+				background: var(--l1-foreground);
+				color: var(--l1-foreground);
+			}
+
+			.ant-table-cell:has(.entityname-column-value) {
+				background: var(--l1-foreground);
+			}
+
+			.entityname-column-value {
+				color: var(--l1-foreground);
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: rgba(0, 0, 0, 0.04);
+			}
+		}
+	}
+}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/entityDetails.styles.scss

@@ -192,6 +192,63 @@
 	}
 }
 
+.lightMode {
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--l1-border);
+		background: var(--l1-foreground);
+	}
+
+	.entity-detail-drawer {
+		.title {
+			color: var(--l2-foreground);
+		}
+
+		.entity-detail-drawer__entity {
+			.ant-typography {
+				color: var(--l2-foreground);
+				background: transparent;
+			}
+		}
+
+		.radio-button {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-foreground);
+			color: var(--l2-foreground);
+		}
+
+		.views-tabs {
+			.tab {
+				background: var(--l1-foreground);
+			}
+
+			.selected_view {
+				background: var(--l3-background);
+				border: 1px solid var(--l1-border);
+				color: var(--l2-foreground);
+			}
+
+			.selected_view::before {
+				background: var(--l3-background);
+				border-left: 1px solid var(--l1-border);
+			}
+		}
+
+		.compass-button {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-foreground);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+
+		.tabs-and-search {
+			.action-btn {
+				border: 1px solid var(--l1-border);
+				background: var(--l1-foreground);
+				color: var(--l2-foreground);
+			}
+		}
+	}
+}
+
 .entity-metric-traces {
 	margin-top: 1rem;
 
@@ -325,9 +382,7 @@
 
 			.ant-table-thead
 				> tr
-				> th:not(:last-child):not(.ant-table-selection-column):not(
-					.ant-table-row-expand-icon-cell
-				):not([colspan])::before {
+				> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
 				background-color: transparent;
 			}
 
@@ -342,6 +397,53 @@
 	}
 }
 
+.lightMode {
+	.entity-metric-traces-header {
+		.filter-section {
+			border-top: 1px solid var(--l1-border);
+			border-bottom: 1px solid var(--l1-border);
+
+			.ant-select-selector {
+				border-color: var(--l1-border) !important;
+				color: var(--l2-foreground);
+			}
+		}
+	}
+
+	.entity-metric-traces-table {
+		.ant-table {
+			border-radius: 3px;
+			border: 1px solid var(--l1-border);
+
+			.ant-table-thead > tr > th {
+				background: var(--l1-foreground);
+				color: var(--l2-foreground);
+			}
+
+			.ant-table-thead > tr > th:has(.entityname-column-header) {
+				background: var(--l1-foreground);
+			}
+
+			.ant-table-cell {
+				background: var(--l1-foreground);
+				color: var(--l1-foreground);
+			}
+
+			.ant-table-cell:has(.entityname-column-value) {
+				background: var(--l1-foreground);
+			}
+
+			.entityname-column-value {
+				color: var(--l3-background);
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: rgba(0, 0, 0, 0.04);
+			}
+		}
+	}
+}
+
 .entity-metrics-logs-container {
 	margin-top: 1rem;
 

frontend/src/container/IngestionSettings/IngestionSettings.styles.scss

@@ -202,11 +202,7 @@
 							letter-spacing: -0.07px;
 							font-variant-numeric: lining-nums tabular-nums stacked-fractions
 								slashed-zero;
-							font-feature-settings:
-								'dlig' on,
-								'salt' on,
-								'cpsp' on,
-								'case' on;
+							font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 						}
 					}
 
@@ -255,11 +251,7 @@
 			> a {
 				color: var(--l2-foreground);
 				font-variant-numeric: lining-nums tabular-nums slashed-zero;
-				font-feature-settings:
-					'dlig' on,
-					'salt' on,
-					'case' on,
-					'cpsp' on;
+				font-feature-settings: 'dlig' on, 'salt' on, 'case' on, 'cpsp' on;
 				font-size: var(--font-size-sm);
 				font-style: normal;
 				font-weight: var(--font-weight-normal);
@@ -773,6 +765,206 @@
 	box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
 }
 
+.lightMode {
+	.ingestion-key-container {
+		.ingestion-key-content {
+			.title {
+				color: var(--l1-foreground);
+			}
+
+			.ant-table-row {
+				.ant-table-cell {
+					background: var(--l1-background);
+				}
+
+				&:hover {
+					.ant-table-cell {
+						background: var(--l1-background) !important;
+					}
+				}
+
+				.column-render {
+					border: 1px solid var(--l1-border);
+					background: var(--l1-background);
+
+					.ant-collapse {
+						border: none;
+
+						.ant-collapse-header {
+							background: var(--l1-background);
+						}
+
+						.ant-collapse-content {
+							border-top: 1px solid var(--l1-border);
+						}
+					}
+
+					.title-with-action {
+						.ingestion-key-title {
+							.ant-typography {
+								color: var(--l1-foreground);
+							}
+						}
+
+						.ingestion-key-value {
+							background: var(--l3-background);
+
+							.ant-typography {
+								color: var(--l2-foreground);
+							}
+
+							.copy-key-btn {
+								cursor: pointer;
+							}
+						}
+
+						.action-btn {
+							.ant-typography {
+								color: var(--l2-foreground);
+							}
+						}
+					}
+
+					.ingestion-key-details {
+						border-top: 1px solid var(--l1-border);
+
+						.ingestion-key-tag {
+							background: var(--l3-background);
+
+							.tag-text {
+								color: var(--l1-foreground);
+							}
+						}
+
+						.ingestion-key-created-by {
+							color: var(--l2-foreground);
+						}
+
+						.ingestion-key-last-used-at {
+							.ant-typography {
+								color: var(--l2-foreground);
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.delete-ingestion-key-modal {
+		.ant-modal-content {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background);
+
+			.ant-modal-header {
+				background: var(--l1-background);
+
+				.title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			.ant-modal-body {
+				.ant-typography {
+					color: var(--l2-foreground);
+				}
+
+				.ingestion-key-input {
+					.ant-input {
+						background: var(--l3-background);
+						color: var(--l1-foreground);
+					}
+				}
+			}
+
+			.ant-modal-footer {
+				.cancel-btn {
+					background: var(--l3-background);
+					color: var(--l1-foreground);
+				}
+			}
+		}
+	}
+
+	.ingestion-key-info-container {
+		.user-email {
+			background: var(--l3-background);
+		}
+
+		.limits-data {
+			border: 1px solid var(--l1-border);
+		}
+	}
+
+	.ingestion-key-modal {
+		.ant-modal-content {
+			border-radius: 4px;
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background);
+			box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+			padding: 0;
+
+			.ant-modal-header {
+				background: none;
+				border-bottom: 1px solid var(--l1-border);
+				padding: 16px;
+			}
+		}
+	}
+
+	.ingestion-key-access-role {
+		.ant-radio-button-wrapper {
+			&.ant-radio-button-wrapper-checked {
+				color: var(--l1-foreground);
+				background: var(--l3-background);
+				border-color: var(--l1-border);
+
+				&:hover {
+					color: var(--l1-foreground);
+					background: var(--l3-background);
+					border-color: var(--l1-border);
+
+					&::before {
+						background-color: var(--l3-background);
+					}
+				}
+
+				&:focus {
+					color: var(--l1-foreground);
+					background: var(--l3-background);
+					border-color: var(--l1-border);
+				}
+			}
+		}
+
+		.tab {
+			border: 1px solid var(--l1-border);
+
+			&::before {
+				background: var(--l3-background);
+			}
+
+			&.selected {
+				background: var(--l3-background);
+			}
+		}
+	}
+
+	.copyable-text {
+		background: var(--l3-background);
+	}
+
+	.ingestion-key-expires-at {
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+	}
+
+	.expires-at .ant-picker {
+		border-color: var(--l1-border) !important;
+	}
+}
+
 .mt-8 {
 	margin-top: 8px;
 }
@@ -885,3 +1077,26 @@
 		color: var(--l2-foreground);
 	}
 }
+
+.lightMode {
+	.ingestion-setup-details-links {
+		background: color-mix(in srgb, var(--primary-background) 10%, transparent);
+		color: var(--accent-primary);
+
+		.learn-more {
+			color: var(--accent-primary);
+		}
+	}
+
+	.ingestion-url-error-tooltip {
+		.ingestion-url-error-content {
+			.ingestion-url-error-code {
+				color: var(--bg-amber-500);
+			}
+		}
+
+		.ingestion-url-error-message {
+			color: var(--l1-foreground);
+		}
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards.tsx

@@ -4,6 +4,7 @@ import {
 	CloudintegrationtypesServiceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { withBasePath } from 'utils/basePath';
 
 import './ServiceDashboards.styles.scss';
 
@@ -44,7 +45,11 @@ function ServiceDashboards({
 									return;
 								}
 								if (event.metaKey || event.ctrlKey) {
-									window.open(dashboardUrl, '_blank', 'noopener,noreferrer');
+									window.open(
+										withBasePath(dashboardUrl),
+										'_blank',
+										'noopener,noreferrer',
+									);
 									return;
 								}
 								safeNavigate(dashboardUrl);
@@ -54,7 +59,11 @@ function ServiceDashboards({
 									return;
 								}
 								if (event.button === 1) {
-									window.open(dashboardUrl, '_blank', 'noopener,noreferrer');
+									window.open(
+										withBasePath(dashboardUrl),
+										'_blank',
+										'noopener,noreferrer',
+									);
 								}
 							}}
 							onKeyDown={(event): void => {

frontend/src/container/Licenses/Licenses.styles.scss

@@ -9,8 +9,6 @@
 
 		.licenses-page-header-title {
 			color: var(--l1-foreground);
-			background: var(--l1-background);
-			border-right: 1px solid var(--l1-border);
 			text-align: center;
 			font-family: Inter;
 			font-size: 13px;
@@ -56,3 +54,38 @@
 		}
 	}
 }
+
+.lightMode {
+	.licenses-page {
+		.licenses-page-header {
+			border-bottom: 1px solid var(--l1-border);
+			background: var(--card);
+			backdrop-filter: blur(20px);
+
+			.licenses-page-header-title {
+				color: var(--l1-foreground);
+
+				background: var(--l1-background);
+				border-right: 1px solid var(--l1-border);
+			}
+		}
+
+		.licenses-page-content-container {
+			.licenses-page-content {
+				background: var(--l1-background);
+
+				&::-webkit-scrollbar-track {
+					background: transparent;
+				}
+
+				&::-webkit-scrollbar-thumb {
+					background: var(--l3-background);
+				}
+
+				&::-webkit-scrollbar-thumb:hover {
+					background: var(--l3-background);
+				}
+			}
+		}
+	}
+}

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertInfoCard.tsx

@@ -1,5 +1,6 @@
 import { ArrowRightOutlined } from '@ant-design/icons';
 import { Typography } from 'antd';
+import { openInNewTab } from 'utils/navigation';
 
 interface AlertInfoCardProps {
 	header: string;
@@ -19,7 +20,7 @@ function AlertInfoCard({
 			className="alert-info-card"
 			onClick={(): void => {
 				onClick();
-				window.open(link, '_blank');
+				openInNewTab(link);
 			}}
 		>
 			<div className="alert-card-text">

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.styles.scss

@@ -176,3 +176,15 @@
 		cursor: pointer;
 	}
 }
+
+.lightMode {
+	.info-text {
+		color: var(--bg-robin-600) !important;
+	}
+
+	.info-link-container {
+		.anticon {
+			color: var(--bg-robin-400);
+		}
+	}
+}

frontend/src/container/ListAlertRules/AlertsEmptyState/InfoLinkText.tsx

@@ -1,5 +1,6 @@
 import { ArrowRightOutlined, PlayCircleFilled } from '@ant-design/icons';
 import { Flex, Typography } from 'antd';
+import { openInNewTab } from 'utils/navigation';
 
 interface InfoLinkTextProps {
 	infoText: string;
@@ -20,7 +21,7 @@ function InfoLinkText({
 		<Flex
 			onClick={(): void => {
 				onClick();
-				window.open(link, '_blank');
+				openInNewTab(link);
 			}}
 			className="info-link-container"
 		>

frontend/src/container/ListOfDashboard/DashboardList.styles.scss

@@ -224,11 +224,7 @@
 							color: var(--l2-foreground);
 							font-variant-numeric: lining-nums tabular-nums stacked-fractions
 								slashed-zero;
-							font-feature-settings:
-								'dlig' on,
-								'salt' on,
-								'cpsp' on,
-								'case' on;
+							font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 							font-family: Inter;
 							font-size: 12px;
 							font-style: normal;
@@ -253,11 +249,7 @@
 							color: var(--l2-foreground);
 							font-variant-numeric: lining-nums tabular-nums stacked-fractions
 								slashed-zero;
-							font-feature-settings:
-								'dlig' on,
-								'salt' on,
-								'cpsp' on,
-								'case' on;
+							font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 							font-family: Inter;
 							font-size: 12px;
 							font-style: normal;
@@ -281,11 +273,7 @@
 							color: var(--l2-foreground);
 							font-variant-numeric: lining-nums tabular-nums stacked-fractions
 								slashed-zero;
-							font-feature-settings:
-								'dlig' on,
-								'salt' on,
-								'cpsp' on,
-								'case' on;
+							font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 							font-family: Inter;
 							font-size: 12px;
 							font-style: normal;
@@ -319,11 +307,7 @@
 							color: var(--l2-foreground);
 							font-variant-numeric: lining-nums tabular-nums stacked-fractions
 								slashed-zero;
-							font-feature-settings:
-								'dlig' on,
-								'salt' on,
-								'cpsp' on,
-								'case' on;
+							font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 							font-family: Inter;
 							font-size: 12px;
 							font-style: normal;
@@ -344,11 +328,7 @@
 			> a {
 				color: var(--l2-foreground);
 				font-variant-numeric: lining-nums tabular-nums slashed-zero;
-				font-feature-settings:
-					'dlig' on,
-					'salt' on,
-					'case' on,
-					'cpsp' on;
+				font-feature-settings: 'dlig' on, 'salt' on, 'case' on, 'cpsp' on;
 				font-size: var(--font-size-sm);
 				font-style: normal;
 				font-weight: var(--font-weight-normal);
@@ -952,11 +932,7 @@
 								color: var(--l2-foreground);
 								font-variant-numeric: lining-nums tabular-nums stacked-fractions
 									slashed-zero;
-								font-feature-settings:
-									'dlig' on,
-									'salt' on,
-									'cpsp' on,
-									'case' on;
+								font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 								font-family: Inter;
 								font-size: 12.805px;
 								font-style: normal;
@@ -990,11 +966,7 @@
 									color: var(--l2-foreground);
 									font-variant-numeric: lining-nums tabular-nums stacked-fractions
 										slashed-zero;
-									font-feature-settings:
-										'dlig' on,
-										'salt' on,
-										'cpsp' on,
-										'case' on;
+									font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 									font-family: Inter;
 									font-size: 12.805px;
 									font-style: normal;
@@ -1016,11 +988,7 @@
 								color: var(--l2-foreground);
 								font-variant-numeric: lining-nums tabular-nums stacked-fractions
 									slashed-zero;
-								font-feature-settings:
-									'dlig' on,
-									'salt' on,
-									'cpsp' on,
-									'case' on;
+								font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 								font-family: Inter;
 								font-size: 12.805px;
 								font-style: normal;
@@ -1054,11 +1022,7 @@
 									color: var(--l2-foreground);
 									font-variant-numeric: lining-nums tabular-nums stacked-fractions
 										slashed-zero;
-									font-feature-settings:
-										'dlig' on,
-										'salt' on,
-										'cpsp' on,
-										'case' on;
+									font-feature-settings: 'dlig' on, 'salt' on, 'cpsp' on, 'case' on;
 									font-family: Inter;
 									font-size: 12.805px;
 									font-style: normal;
@@ -1114,6 +1078,305 @@
 	}
 }
 
+.lightMode {
+	.dashboards-list-container {
+		.dashboards-list-view-content {
+			.title {
+				color: var(--l1-foreground);
+			}
+			.subtitle {
+				color: var(--muted-foreground);
+			}
+
+			.ant-table-row {
+				.ant-table-cell {
+					background: var(--l1-background);
+				}
+
+				&:hover {
+					.ant-table-cell {
+						background: var(--l1-background) !important;
+					}
+				}
+
+				.dashboard-list-item {
+					border: 1px solid var(--l1-border);
+					background: var(--card);
+
+					.dashboard-title {
+						color: var(--l2-foreground);
+
+						.title {
+							color: var(--l1-foreground);
+						}
+					}
+
+					.title-with-action {
+						.dashboard-title {
+							.ant-typography {
+								color: var(--l1-foreground);
+							}
+						}
+
+						.action-btn {
+							.ant-typography {
+								color: var(--l1-foreground);
+							}
+						}
+					}
+
+					.dashboard-details {
+						.dashboard-tag {
+							background: var(--l3-background);
+							.tag-text {
+								color: var(--l1-foreground);
+							}
+						}
+						.created-by {
+							.dashboard-tag {
+								background: var(--l3-background);
+
+								.tag-text {
+									color: var(--l1-foreground);
+								}
+							}
+							.dashboard-created-by {
+								color: var(--l2-foreground);
+							}
+						}
+
+						.updated-by {
+							.text {
+								color: var(--l2-foreground);
+							}
+
+							.dashboard-tag {
+								background: var(--l3-background);
+
+								.tag-text {
+									color: var(--l1-foreground);
+								}
+							}
+							.dashboard-created-by {
+								color: var(--l2-foreground);
+							}
+						}
+
+						.dashboard-created-by {
+							color: var(--l1-foreground);
+						}
+
+						.dashboard-created-at {
+							.ant-typography {
+								color: var(--l1-foreground);
+							}
+						}
+					}
+				}
+			}
+		}
+		.no-search {
+			.text {
+				color: var(--muted-foreground);
+			}
+		}
+
+		.all-dashboards-header {
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
+
+			.typography {
+				color: var(--l2-foreground);
+			}
+
+			.right-actions {
+				color: var(--l2-foreground);
+			}
+		}
+		.dashboard-empty-state {
+			.text {
+				.no-dashboard {
+					color: var(--l2-foreground);
+				}
+				.info {
+					color: var(--l2-foreground);
+				}
+			}
+		}
+		.dashboard-error-state {
+			.error-text {
+				color: var(--muted-foreground);
+			}
+
+			.action-btns {
+				.retry-btn {
+					background: var(--l3-background);
+					color: var(--l1-foreground);
+				}
+			}
+		}
+	}
+
+	.delete-view-modal {
+		.ant-modal-content {
+			border: 1px solid var(--l1-border);
+			background: var(--card);
+
+			.ant-modal-header {
+				background: var(--card);
+
+				.title {
+					color: var(--l1-foreground);
+				}
+			}
+
+			.ant-modal-body {
+				.ant-typography {
+					color: var(--l1-foreground);
+				}
+
+				.save-view-input {
+					.ant-input {
+						background: var(--l2-background);
+						color: var(--l1-foreground);
+					}
+				}
+			}
+
+			.ant-modal-footer {
+				.cancel-btn {
+					background: var(--l3-background);
+					color: var(--l2-foreground);
+				}
+			}
+		}
+	}
+
+	.dashboard-actions {
+		.ant-popover-inner {
+			border: 1px solid var(--l1-border);
+			background: var(--card);
+
+			.dashboard-action-content {
+				.section-1 {
+					.action-btn {
+						color: var(--l2-foreground);
+					}
+				}
+
+				.section-2 {
+					border-top: 1px solid var(--l1-border);
+				}
+			}
+		}
+	}
+
+	.sort-dashboards {
+		.ant-popover-inner {
+			border: 1px solid var(--l1-border);
+			background: var(--card);
+
+			.sort-content {
+				.sort-heading {
+					color: var(--l2-foreground);
+				}
+
+				.sort-btns {
+					color: var(--l2-foreground);
+				}
+			}
+		}
+	}
+
+	.configure-group {
+		.ant-popover-inner {
+			border: 1px solid var(--l1-border);
+			background: var(--card);
+			.configure-content {
+				.configure-btn {
+					color: var(--l2-foreground);
+				}
+			}
+		}
+	}
+
+	.configure-metadata-root {
+		.ant-modal-content {
+			border: 1px solid var(--l1-border);
+			background: var(--card);
+
+			.ant-modal-header {
+				background: var(--card);
+				border-bottom: 1px solid var(--l1-border);
+			}
+
+			.ant-modal-body {
+				.configure-content {
+					.configure-preview {
+						border: 0.915px solid var(--l1-border);
+						background: var(--l2-background);
+
+						.header {
+							.title {
+								color: var(--l2-foreground);
+							}
+						}
+
+						.details {
+							.createdAt {
+								.formatted-time {
+									color: var(--l2-foreground);
+								}
+
+								.user {
+									.user-tag {
+										color: var(--l2-foreground);
+										background-color: var(--l3-background);
+									}
+
+									.dashboard-created-by {
+										color: var(--l2-foreground);
+									}
+								}
+							}
+
+							.updatedAt {
+								.formatted-time {
+									color: var(--l2-foreground);
+								}
+
+								.user {
+									.user-tag {
+										color: var(--l2-foreground);
+										background-color: var(--l3-background);
+									}
+
+									.dashboard-created-by {
+										color: var(--l2-foreground);
+									}
+								}
+							}
+						}
+					}
+
+					.metadata-action {
+						.connection-line {
+							border: 1px dashed var(--l1-border);
+						}
+					}
+				}
+			}
+
+			.ant-modal-footer {
+				.save-changes {
+					border: 1px solid var(--l1-border);
+					background: var(--l2-background);
+				}
+			}
+		}
+	}
+}
+
 .title-toolip {
 	.ant-tooltip-content {
 		.ant-tooltip-inner {

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.styles.scss

@@ -194,3 +194,76 @@
 		border-top: 1px solid var(--l1-border);
 	}
 }
+
+.lightMode {
+	.new-dashboard-templates-modal {
+		.ant-modal-content {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-foreground);
+		}
+
+		.new-dashboard-templates-content-header {
+			border-bottom: 1px solid var(--l1-border);
+		}
+
+		.new-dashboard-templates-content {
+			.new-dashboard-templates-list {
+				border-right: 1px solid var(--l1-border);
+
+				.templates-list {
+					.template-list-item {
+						.template-name {
+							color: var(--l3-background);
+						}
+
+						&:hover {
+							background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
+						}
+
+						&.active {
+							background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
+						}
+					}
+				}
+			}
+
+			.new-dashboard-template-preview {
+				.template-preview-header {
+					.template-preview-title {
+						.template-preview-icon {
+							border: 1px solid var(--l1-border);
+							background: var(--l1-foreground);
+						}
+
+						.template-info {
+							.template-name {
+								color: var(--l3-background);
+							}
+
+							.template-description {
+								color: var(--l2-foreground);
+							}
+						}
+					}
+
+					.create-dashboard-btn {
+						.ant-btn {
+							box-shadow: none;
+						}
+					}
+				}
+
+				.template-preview-image {
+					img {
+						border: 1px solid var(--l1-border);
+						background: var(--l1-foreground);
+					}
+				}
+			}
+		}
+
+		.ant-modal-footer {
+			border-top: 1px solid var(--l1-border);
+		}
+	}
+}

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -83,6 +83,8 @@ import {
 } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { isModifierKeyPressed } from 'utils/app';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 import dashboardsUrl from '@/assets/Icons/dashboards.svg';
@@ -457,7 +459,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														window.open(getLink(), '_blank');
+														openInNewTab(getLink());
 													}}
 												>
 													Open in New Tab
@@ -469,7 +471,7 @@ function DashboardsList(): JSX.Element {
 													onClick={(e): void => {
 														e.stopPropagation();
 														e.preventDefault();
-														setCopy(`${window.location.origin}${getLink()}`);
+														setCopy(getAbsoluteUrl(getLink()));
 													}}
 												>
 													Copy Link

frontend/src/container/ListOfDashboard/TableComponents/DeleteButton.styles.scss

@@ -7,3 +7,9 @@
 .delete-btn:hover {
 	background-color: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
 }
+
+.lightMode {
+	.delete-btn:hover {
+		background-color: rgba(0, 0, 0, 0.06) !important;
+	}
+}

frontend/src/container/ListOfDashboard/TableComponents/Name.tsx

@@ -1,6 +1,7 @@
 import { LockFilled } from '@ant-design/icons';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
+import { openInNewTab } from 'utils/navigation';
 
 import { Data } from '../DashboardsList';
 import { TableLinkText } from './styles';
@@ -12,7 +13,7 @@ function Name(name: Data['name'], data: Data): JSX.Element {
 
 	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
 		if (event.metaKey || event.ctrlKey) {
-			window.open(getLink(), '_blank');
+			openInNewTab(getLink());
 		} else {
 			history.push(getLink());
 		}

frontend/src/container/LogDetailedView/ContextView/ContextLogRenderer.tsx

@@ -17,6 +17,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import { ILog } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { withBasePath } from 'utils/basePath';
 
 import { useContextLogData } from './useContextLogData';
 
@@ -116,7 +117,7 @@ function ContextLogRenderer({
 			);
 
 			const link = `${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`;
-			window.open(link, '_blank', 'noopener,noreferrer');
+			window.open(withBasePath(link), '_blank', 'noopener,noreferrer');
 		},
 		[query, urlQuery],
 	);

frontend/src/container/LogDetailedView/TableView.tsx

@@ -34,6 +34,7 @@ import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
 import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { openInNewTab } from 'utils/navigation';
 
 import { ActionItemProps } from './ActionItem';
 import FieldRenderer from './FieldRenderer';
@@ -191,7 +192,7 @@ function TableView({
 
 			if (event.ctrlKey || event.metaKey) {
 				// open the trace in new tab
-				window.open(route, '_blank');
+				openInNewTab(route);
 			} else {
 				history.push(route);
 			}

frontend/src/container/LogDetailedView/TableView/TableViewActions.styles.scss

@@ -58,3 +58,14 @@
 		}
 	}
 }
+
+.lightMode {
+	.table-view-actions-content {
+		.ant-popover-inner {
+			border: 1px solid var(--l1-border);
+			background: var(--l1-background) !important;
+			backdrop-filter: none;
+			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+		}
+	}
+}

frontend/src/container/Login/Login.styles.scss

@@ -160,6 +160,55 @@
 	}
 }
 
+.lightMode {
+	.login-form-card {
+		background: var(--l2-background);
+	}
+
+	.login-error-container {
+		.error-content {
+			background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+			border-color: color-mix(in srgb, var(--danger-background) 20%, transparent);
+
+			&__error-code {
+				color: var(--l2-foreground);
+			}
+
+			&__error-message {
+				color: var(--l1-foreground);
+			}
+
+			&__docs-button {
+				color: var(--l1-foreground);
+				border-color: var(--l1-border);
+				background: transparent;
+
+				&:hover {
+					color: var(--l2-foreground);
+					border-color: var(--l1-border);
+					background: transparent;
+				}
+			}
+
+			&__message-badge-label-text {
+				color: var(--l2-foreground);
+			}
+
+			&__message-item {
+				color: var(--l1-foreground);
+
+				&::before {
+					background: var(--l3-background);
+				}
+			}
+
+			&__scroll-hint-text {
+				color: var(--l2-foreground);
+			}
+		}
+	}
+}
+
 .password-label-container {
 	display: flex;
 	justify-content: space-between;

frontend/src/container/Login/index.tsx

@@ -60,10 +60,8 @@ function Login(): JSX.Element {
 	const [sessionsContext, setSessionsContext] = useState<SessionsContext>();
 	const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
 	const [sessionsOrgId, setSessionsOrgId] = useState<string>('');
-	const [
-		sessionsContextLoading,
-		setIsLoadingSessionsContext,
-	] = useState<boolean>(false);
+	const [sessionsContextLoading, setIsLoadingSessionsContext] =
+		useState<boolean>(false);
 	const [form] = Form.useForm<FormValues>();
 	const [errorMessage, setErrorMessage] = useState<APIError>();
 
@@ -213,6 +211,7 @@ function Login(): JSX.Element {
 			if (isCallbackAuthN) {
 				const url = form.getFieldValue('url');
 
+				// oxlint-disable-next-line signoz/no-raw-absolute-path
 				window.location.href = url;
 			}
 		} catch (error) {
@@ -328,7 +327,6 @@ function Login(): JSX.Element {
 								data-testid="email"
 								required
 								placeholder="e.g. john@signoz.io"
-								autoFocus
 								disabled={versionLoading}
 								className="login-form-input"
 								onPressEnter={onNextHandler}

frontend/src/container/Login/styles.ts

@@ -10,6 +10,10 @@ export const Label = styled.label`
 	color: var(--l1-foreground);
 	margin-bottom: 12px;
 	display: block;
+
+	.lightMode & {
+		color: var(--text-ink-500);
+	}
 `;
 
 export const FormContainer = styled(Form)`
@@ -46,10 +50,20 @@ export const FormContainer = styled(Form)`
 		background: var(--l3-background) !important;
 		border-color: var(--l1-border) !important;
 		color: var(--l1-foreground) !important;
+
+		.lightMode & {
+			background: var(--bg-vanilla-200) !important;
+			border-color: var(--bg-vanilla-300) !important;
+			color: var(--text-ink-500) !important;
+		}
 	}
 
 	& .ant-input::placeholder {
 		color: var(--l3-foreground) !important;
+
+		.lightMode & {
+			color: var(--text-neutral-light-200) !important;
+		}
 	}
 
 	& .ant-input:focus,

frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss

@@ -323,3 +323,50 @@
 		}
 	}
 }
+
+.lightMode {
+	.logs-list-view-container {
+		.logs-list-table-view-container {
+			table {
+				thead {
+					tr {
+						th {
+							color: var(--l1-foreground) !important;
+						}
+
+						border-bottom: 1px solid var(--l1-border) !important;
+					}
+
+					border-bottom: 1px solid var(--l1-border) !important;
+					background-color: var(--l1-background) !important;
+
+					tr {
+						&:hover {
+							background-color: var(--l3-background) !important;
+						}
+					}
+				}
+
+				tbody {
+					tr {
+						&:hover {
+							background-color: var(--l3-background) !important;
+						}
+
+						border-bottom: 1px solid var(--l1-border) !important;
+					}
+				}
+			}
+
+			.sticky-header-table-container {
+				&::-webkit-scrollbar-thumb {
+					background: var(--l3-background);
+				}
+
+				&::-webkit-scrollbar-thumb:hover {
+					background: var(--l1-background);
+				}
+			}
+		}
+	}
+}

frontend/src/container/LogsExplorerList/TanStackTableView/index.tsx

@@ -34,6 +34,7 @@ import ROUTES from 'constants/routes';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDragColumns from 'hooks/useDragColumns';
+import { getAbsoluteUrl } from 'utils/basePath';
 
 import { infinityDefaultStyles } from '../InfinityTableView/config';
 import { TanStackTableStyled } from '../InfinityTableView/styles';
@@ -239,7 +240,7 @@ const TanStackTableView = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 				urlQuery.delete(QueryParams.activeLogId);
 				urlQuery.delete(QueryParams.relativeTime);
 				urlQuery.set(QueryParams.activeLogId, `"${logId}"`);
-				const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`;
+				const link = getAbsoluteUrl(`${pathname}?${urlQuery.toString()}`);
 
 				setCopy(link);
 				toast.success('Copied to clipboard', { position: 'top-right' });

frontend/src/container/LogsExplorerList/TanStackTableView/styles/TanStackHeaderRow.styles.scss

@@ -102,9 +102,7 @@
 	font-size: 12px;
 	line-height: 16px;
 	font-weight: 500;
-	transition:
-		background-color 120ms ease,
-		color 120ms ease;
+	transition: background-color 120ms ease, color 120ms ease;
 
 	&:hover {
 		background: var(--l2-background-hover);
@@ -145,12 +143,10 @@
 	left: 50%;
 	width: 4px;
 	transform: translateX(-50%);
-	background: var(--l2-background);
+	background: var(--l2-border);
 	opacity: 1;
 	pointer-events: none;
-	transition:
-		background 120ms ease,
-		width 120ms ease;
+	transition: background 120ms ease, width 120ms ease;
 }
 
 .tanstack-header-cell.is-resizing .tanstack-resize-handle-line {

frontend/src/container/LogsExplorerList/logsTableVirtuosoScrollbar.scss

@@ -1,6 +1,6 @@
 .logs-table-virtuoso-scroll {
 	scrollbar-width: thin;
-	scrollbar-color: var(--l3-background) transparent;
+	scrollbar-color: var(--bg-slate-300) transparent;
 
 	&::-webkit-scrollbar {
 		width: 4px;
@@ -16,11 +16,23 @@
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--l3-background);
+		background: var(--bg-slate-300);
 		border-radius: 9999px;
 	}
 
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(--l3-background);
+		background: var(--bg-slate-200);
+	}
+}
+
+.lightMode .logs-table-virtuoso-scroll {
+	scrollbar-color: var(--bg-vanilla-300) transparent;
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--bg-vanilla-300);
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--bg-vanilla-100);
 	}
 }

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -263,6 +263,24 @@
 	}
 }
 
+.lightMode {
+	.logs-explorer-views-container {
+		.views-tabs-container {
+			.views-tabs {
+				.selected_view {
+					background: white;
+					color: var(--text-robin-400);
+					border: 1px solid var(--bg-robin-400);
+				}
+
+				.selected_view::before {
+					background: var(--bg-robin-400);
+				}
+			}
+		}
+	}
+}
+
 .order-by-container {
 	display: flex;
 	align-items: center;

frontend/src/container/MetricsApplication/utils.ts

@@ -1,5 +1,6 @@
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
+import { withBasePath } from 'utils/basePath';
 
 import { TopOperationList } from './TopOperationsTable';
 import { NavigateToTraceProps } from './types';
@@ -37,7 +38,7 @@ export const navigateToTrace = ({
 	}=${JSONCompositeQuery}`;
 
 	if (openInNewTab) {
-		window.open(newTraceExplorerPath, '_blank');
+		window.open(withBasePath(newTraceExplorerPath), '_blank');
 	} else {
 		safeNavigate(newTraceExplorerPath);
 	}

frontend/src/container/MetricsExplorer/Explorer/Explorer.styles.scss

@@ -179,6 +179,16 @@
 	}
 }
 
+.lightMode {
+	.metrics-explorer-explore-container {
+		.explore-tabs {
+			.selected-view {
+				background: var(--l3-background);
+			}
+		}
+	}
+}
+
 .dashboards-and-alerts-popover-container {
 	display: flex;
 	gap: 16px;

frontend/src/container/MetricsExplorer/MetricDetails/DashboardsAndAlertsPopover.tsx

@@ -9,6 +9,7 @@ import {
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { Bell, Grid } from 'lucide-react';
+import { openInNewTab } from 'utils/navigation';
 import { pluralize } from 'utils/pluralize';
 
 import { DashboardsAndAlertsPopoverProps } from './types';
@@ -67,9 +68,8 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={alert.alertId}
 						onClick={(): void => {
-							window.open(
+							openInNewTab(
 								`${ROUTES.ALERT_OVERVIEW}?${QueryParams.ruleId}=${alert.alertId}`,
-								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"
@@ -90,11 +90,10 @@ function DashboardsAndAlertsPopover({
 					<Typography.Link
 						key={dashboard.dashboardId}
 						onClick={(): void => {
-							window.open(
+							openInNewTab(
 								generatePath(ROUTES.DASHBOARD, {
 									dashboardId: dashboard.dashboardId,
 								}),
-								'_blank',
 							);
 						}}
 						className="dashboards-popover-content-item"

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.styles.scss

@@ -382,6 +382,81 @@
 	}
 }
 
+.lightMode {
+	.metric-details-header {
+		.ant-btn {
+			background-color: var(--bg-white-400);
+		}
+	}
+
+	.metric-details-content {
+		.metrics-accordion {
+			.metrics-accordion-header {
+				.action-menu {
+					.action-button {
+						.ant-typography {
+							color: var(--l1-border);
+						}
+					}
+				}
+			}
+
+			.metrics-accordion-content {
+				.metric-metadata-key {
+					.field-renderer-container {
+						.label {
+							color: var(--l2-foreground);
+						}
+					}
+
+					.all-attributes-key {
+						.all-attributes-contribution {
+							color: var(--l1-border);
+						}
+					}
+				}
+
+				.metric-metadata-value {
+					background-color: var(--l3-background);
+					.all-attributes-value {
+						.ant-btn {
+							background-color: var(--l2-foreground);
+							.ant-typography {
+								color: var(--l1-border);
+							}
+							&:hover {
+								background-color: var(--l1-foreground);
+							}
+						}
+					}
+
+					.field-renderer-container {
+						.label {
+							color: var(--l1-border);
+						}
+					}
+				}
+			}
+		}
+	}
+	.top-attributes-content {
+		.top-attributes-item-progress {
+			.top-attributes-item-progress-bar {
+				background-color: var(--bg-robin-400);
+			}
+
+			.top-attributes-item-count {
+				background-color: var(--bg-robin-300);
+			}
+
+			.top-attributes-item-key,
+			.top-attributes-item-count {
+				color: var(--l1-border);
+			}
+		}
+	}
+}
+
 .metric-metadata-value {
 	.y-axis-unit-selector-component {
 		.ant-select {
@@ -510,6 +585,24 @@
 	color: var(--bg-robin-400) !important;
 }
 
+.lightMode {
+	.attribute-key-popover-overlay,
+	.all-values-popover-overlay {
+		.ant-popover-inner {
+			border: 1px solid var(--l2-foreground);
+			background: var(--l1-foreground) !important;
+		}
+	}
+
+	.all-values-popover {
+		.all-values-item {
+			&:hover {
+				background: rgba(0, 0, 0, 0.04);
+			}
+		}
+	}
+}
+
 @keyframes fade-in-out {
 	0% {
 		opacity: 0;

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -177,9 +177,7 @@
 
 			.ant-table-thead
 				> tr
-				> th:not(:last-child):not(.ant-table-selection-column):not(
-					.ant-table-row-expand-icon-cell
-				):not([colspan])::before {
+				> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
 				background-color: transparent;
 			}
 
@@ -230,6 +228,29 @@
 	}
 }
 
+.lightMode {
+	.metrics-table-container {
+		.ant-table {
+			.ant-table-tbody > tr:hover > td {
+				background: rgba(0, 0, 0, 0.04);
+			}
+		}
+
+		.ant-pagination {
+			.ant-pagination-item {
+				&-active {
+					background: var(--primary-background);
+					border-color: var(--bg-robin-500);
+
+					a {
+						color: var(--l1-foreground) !important;
+					}
+				}
+			}
+		}
+	}
+}
+
 .metric-type-renderer {
 	border-radius: 50px;
 	max-height: 24px;

frontend/src/container/MySettings/LicenseSection/LicenseSection.styles.scss

@@ -57,3 +57,28 @@
 		}
 	}
 }
+
+.lightMode {
+	.license-section {
+		.license-section-header {
+			.license-section-title {
+				color: var(--l1-foreground);
+			}
+		}
+
+		.license-section-content {
+			.license-section-content-item {
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
+
+				.license-section-content-item-title-action {
+					color: var(--l1-foreground);
+				}
+
+				.license-section-content-item-description {
+					color: var(--l1-foreground);
+				}
+			}
+		}
+	}
+}

frontend/src/container/MySettings/MySettings.styles.scss

@@ -153,3 +153,62 @@
 
 	border-radius: 3px;
 }
+
+.lightMode {
+	.user-info-section {
+		.user-info-section-header {
+			.user-info-section-title {
+				color: var(--l1-foreground);
+			}
+
+			.user-info-section-subtitle {
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	.user-preference-section {
+		.user-preference-section-header {
+			.user-preference-section-title {
+				color: var(--l1-foreground);
+			}
+
+			.user-preference-section-subtitle {
+				color: var(--l1-foreground);
+			}
+		}
+
+		.user-preference-section-content {
+			.user-preference-section-content-item {
+				border: 1px solid var(--l1-border);
+				background: var(--l1-background);
+
+				.user-preference-section-content-item-title-action {
+					color: var(--l1-foreground);
+				}
+
+				.user-preference-section-content-item-description {
+					color: var(--l1-foreground);
+				}
+
+				.auto-theme-info {
+					background: var(--l2-background);
+					border: 1px solid var(--l1-border);
+
+					.auto-theme-status {
+						color: var(--l1-foreground);
+
+						strong {
+							color: var(--accent-primary);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.reset-password-card {
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+	}
+}

frontend/src/container/NewWidget/LeftContainer/QuerySection/QuerySection.styles.scss

@@ -12,7 +12,7 @@
 			align-items: center;
 			justify-content: center;
 			gap: 4px;
-			color: var(--l1-foreground);
+			color: #fff;
 			font-family: Inter;
 			font-size: 12px;
 			font-style: normal;

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraph.styles.scss

@@ -32,3 +32,17 @@
 		justify-content: end;
 	}
 }
+
+.lightMode {
+	.widget-graph {
+		background-color: var(--l1-background);
+		background-image: radial-gradient(var(--l2-foreground) 1px, transparent 0);
+		background-size: 20px 20px;
+
+		.header {
+			.plot-tag {
+				background: var(--l3-background);
+			}
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.styles.scss

@@ -38,3 +38,11 @@
 		gap: 12px;
 	}
 }
+
+.lightMode {
+	.column-unit-selector {
+		.heading {
+			color: var(--l2-background);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.styles.scss

@@ -68,3 +68,25 @@
 		border-top: 1px solid var(--l1-border);
 	}
 }
+
+.lightMode {
+	.context-link-form-container {
+		.url-parameters-section {
+			.parameter-row {
+				.delete-parameter-btn {
+					color: var(--l1-border);
+
+					&:hover {
+						color: var(--danger-background) !important;
+						border-color: var(--danger-background) !important;
+						background-color: var(--bg-cherry-100);
+					}
+				}
+			}
+		}
+
+		.context-link-footer {
+			border-top-color: var(--l1-border);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -18,6 +18,7 @@ import {
 import useContextVariables from 'hooks/dashboard/useContextVariables';
 import { Plus, Trash2 } from 'lucide-react';
 import { ContextLinkProps, Widgets } from 'types/api/dashboard/getAll';
+import { getBaseUrl } from 'utils/basePath';
 
 import VariablesDropdown from './VariablesDropdown';
 
@@ -84,7 +85,7 @@ function UpdateContextLinks({
 	);
 
 	// Function to get current domain
-	const getCurrentDomain = (): string => window.location.origin;
+	const getCurrentDomain = (): string => getBaseUrl();
 
 	// Function to handle variable selection from dropdown
 	const handleVariableSelect = (

frontend/src/container/NewWidget/RightContainer/ContextLinks/styles.scss

@@ -111,3 +111,35 @@
 .add-context-link-button {
 	width: 100%;
 }
+
+.lightMode {
+	.context-links-text {
+		color: var(--l2-background);
+	}
+
+	.context-link-item {
+		&:hover {
+			background-color: var(--l2-background);
+		}
+
+		.context-link-label {
+			color: var(--l1-border);
+		}
+
+		.context-link-url {
+			color: var(--l1-border);
+		}
+
+		.drag-handle-icon {
+			color: var(--l1-border);
+		}
+
+		.delete-context-link-btn {
+			&:hover {
+				color: var(--danger-background);
+				border-color: var(--danger-background);
+				background-color: var(--bg-cherry-100);
+			}
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/LegendColors/LegendColors.styles.scss

@@ -142,3 +142,28 @@
 		gap: 8px;
 	}
 }
+
+.lightMode {
+	.legend-colors-container {
+		.legend-colors-content {
+			.legend-items {
+				&::-webkit-scrollbar-thumb {
+					background: var(--l2-foreground);
+				}
+
+				&::-webkit-scrollbar-thumb:hover {
+					background: var(--l3-background);
+				}
+
+				scrollbar-color: var(--l2-foreground) transparent;
+			}
+
+			.legend-item {
+				&:hover {
+					background-color: var(--l3-background);
+					border-color: var(--l1-border);
+				}
+			}
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/RightContainer.styles.scss

@@ -222,3 +222,95 @@
 		line-height: 16px; /* 133.333% */
 	}
 }
+
+.lightMode {
+	.right-container {
+		background-color: var(--l1-background);
+		.section-heading,
+		.section-heading-small {
+			color: var(--l2-foreground);
+		}
+		.header {
+			.header-text {
+				color: var(--l2-foreground);
+			}
+		}
+
+		.panel-config {
+			.panel-type-select {
+				.ant-select-selector {
+					border: 1px solid var(--l1-border);
+					background: var(--l2-background);
+				}
+
+				.select-option {
+					.display {
+						color: var(--l2-foreground);
+					}
+				}
+			}
+
+			.y-axis-unit-selector-v2 {
+				.y-axis-unit-selector-component {
+					.ant-select {
+						.ant-select-selector {
+							border: 1px solid var(--l1-border);
+							background: var(--l2-background);
+						}
+					}
+				}
+			}
+
+			.toggle-card {
+				border: 1px solid var(--l1-border);
+				background: var(--l2-background);
+
+				.fill-gaps-text {
+					color: var(--l2-foreground);
+				}
+				.toggle-card-description {
+					color: var(--l2-foreground);
+				}
+			}
+
+			.panel-time-text {
+				color: var(--l2-foreground);
+			}
+
+			.y-axis-unit-selector,
+			.y-axis-unit-selector-v2 {
+				.heading {
+					color: var(--l2-foreground);
+				}
+
+				.input {
+					border: 1px solid var(--l1-border);
+					background: var(--l2-background);
+
+					.ant-input {
+						background: var(--l2-background);
+					}
+				}
+			}
+			.soft-min-max {
+				.container {
+					border: 1px solid var(--l1-border);
+					background: var(--l2-background);
+
+					.text {
+						color: var(--l2-foreground);
+					}
+					.input {
+						border-left: 1px solid var(--l1-border);
+					}
+				}
+			}
+		}
+	}
+
+	.select-option {
+		.display {
+			color: var(--l2-foreground);
+		}
+	}
+}

frontend/src/container/NewWidget/RightContainer/SettingSections/HistogramBucketsSection/HistogramBucketsSection.styles.scss

@@ -36,3 +36,20 @@
 		}
 	}
 }
+
+.lightMode {
+	.histogram-settings__bucket-config {
+		.histogram-settings__merge-label {
+			color: var(--l2-background);
+		}
+
+		.histogram-settings__bucket-input {
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
+
+			.ant-input {
+				background: var(--l2-background);
+			}
+		}
+	}
+}