refactor: remove light mode styles from various components and update color variables

* feat: base path config setup and plugin for gotmpl generation at build time

* feat: changed output path to dir level

* feat: refactor the interceptor and added gotmpl into gitignore

* feat: removed plugin and serving the index.html only as the template

* feat: updated the html template

* feat: updated base path utils and fixed navigation and translations

* feat: code refactor around feedbacks

* feat: applied suggested patch changes

* feat: code refactor around feedbacks

* feat(base-path): mirgate rule to oxlint

* feat(base-path): fix lint issues

* feat(base-path): configure local dev setup

docs/api/openapi.yml

@@ -668,8 +668,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
       type: object
     CloudintegrationtypesAgentReport:
       nullable: true
@@ -693,6 +693,90 @@ components:
           nullable: true
           type: array
       type: object
+    CloudintegrationtypesAzureAccountConfig:
+      properties:
+        deploymentRegion:
+          type: string
+        resourceGroups:
+          items:
+            type: string
+          type: array
+      required:
+      - deploymentRegion
+      - resourceGroups
+      type: object
+    CloudintegrationtypesAzureConnectionArtifact:
+      properties:
+        cliCommand:
+          type: string
+        cloudPowerShellCommand:
+          type: string
+      required:
+      - cliCommand
+      - cloudPowerShellCommand
+      type: object
+    CloudintegrationtypesAzureIntegrationConfig:
+      properties:
+        deploymentRegion:
+          type: string
+        resourceGroups:
+          items:
+            type: string
+          type: array
+        telemetryCollectionStrategy:
+          items:
+            $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
+          type: array
+      required:
+      - deploymentRegion
+      - resourceGroups
+      - telemetryCollectionStrategy
+      type: object
+    CloudintegrationtypesAzureLogsCollectionStrategy:
+      properties:
+        categoryGroups:
+          items:
+            type: string
+          type: array
+      required:
+      - categoryGroups
+      type: object
+    CloudintegrationtypesAzureMetricsCollectionStrategy:
+      type: object
+    CloudintegrationtypesAzureServiceConfig:
+      properties:
+        logs:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceLogsConfig'
+        metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceMetricsConfig'
+      required:
+      - logs
+      - metrics
+      type: object
+    CloudintegrationtypesAzureServiceLogsConfig:
+      properties:
+        enabled:
+          type: boolean
+      type: object
+    CloudintegrationtypesAzureServiceMetricsConfig:
+      properties:
+        enabled:
+          type: boolean
+      type: object
+    CloudintegrationtypesAzureTelemetryCollectionStrategy:
+      properties:
+        logs:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureLogsCollectionStrategy'
+        metrics:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureMetricsCollectionStrategy'
+        resourceProvider:
+          type: string
+        resourceType:
+          type: string
+      required:
+      - resourceProvider
+      - resourceType
+      type: object
     CloudintegrationtypesCloudIntegrationService:
       nullable: true
       properties:
@@ -737,8 +821,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSConnectionArtifact'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureConnectionArtifact'
       type: object
     CloudintegrationtypesCredentials:
       properties:
@@ -910,8 +994,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSPostableAccountConfig'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureAccountConfig'
       type: object
     CloudintegrationtypesPostableAgentCheckIn:
       properties:
@@ -934,8 +1018,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSIntegrationConfig'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureIntegrationConfig'
       type: object
     CloudintegrationtypesService:
       properties:
@@ -972,8 +1056,8 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSServiceConfig'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureServiceConfig'
       type: object
     CloudintegrationtypesServiceID:
       enum:
@@ -990,6 +1074,8 @@ components:
       - s3sync
       - sns
       - sqs
+      - storageaccountsblob
+      - cdnprofile
       type: string
     CloudintegrationtypesServiceMetadata:
       properties:
@@ -1018,16 +1104,32 @@ components:
       properties:
         aws:
           $ref: '#/components/schemas/CloudintegrationtypesAWSTelemetryCollectionStrategy'
-      required:
-      - aws
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesAzureTelemetryCollectionStrategy'
       type: object
     CloudintegrationtypesUpdatableAccount:
       properties:
         config:
-          $ref: '#/components/schemas/CloudintegrationtypesAccountConfig'
+          $ref: '#/components/schemas/CloudintegrationtypesUpdatableAccountConfig'
       required:
       - config
       type: object
+    CloudintegrationtypesUpdatableAccountConfig:
+      properties:
+        aws:
+          $ref: '#/components/schemas/CloudintegrationtypesAWSAccountConfig'
+        azure:
+          $ref: '#/components/schemas/CloudintegrationtypesUpdatableAzureAccountConfig'
+      type: object
+    CloudintegrationtypesUpdatableAzureAccountConfig:
+      properties:
+        resourceGroups:
+          items:
+            type: string
+          type: array
+      required:
+      - resourceGroups
+      type: object
     CloudintegrationtypesUpdatableService:
       properties:
         config:

frontend/.oxlintrc.json

@@ -286,6 +286,8 @@
     // 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",
+    // Prevents window.open(path), window.location.origin + path, window.location.href = path
     "no-restricted-imports": [
       "error",
       {
@@ -597,8 +599,9 @@
       "rules": {
         "import/first": "off",
         // Should ignore due to mocks
-        "signoz/no-navigator-clipboard": "off"
-        // Tests can use navigator.clipboard directly
+        "signoz/no-navigator-clipboard": "off",
+        // Tests can use navigator.clipboard directly,
+        "signoz/no-raw-absolute-path":"off"
       }
     },
     {

frontend/.stylelintrc.cjs

@@ -1,3 +1,4 @@
+// oxlint-disable-next-line typescript/no-require-imports
 const path = require('path');
 
 module.exports = {

frontend/index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<base href="[[.BaseHref]]" />
 		<meta
 			http-equiv="Cache-Control"
 			content="no-cache, no-store, must-revalidate, max-age: 0"
@@ -59,7 +60,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<script>
@@ -136,7 +137,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<link rel="stylesheet" href="css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

frontend/plugins/rules/no-raw-absolute-path.mjs

@@ -0,0 +1,152 @@
+/**
+ * Rule: no-raw-absolute-path
+ *
+ * Catches patterns that break at runtime when the app is served from a
+ * sub-path (e.g. /signoz/):
+ *
+ *   1. window.open(path, '_blank')
+ *      → use openInNewTab(path) which calls withBasePath internally
+ *
+ *   2. window.location.origin + path  /  `${window.location.origin}${path}`
+ *      → use getAbsoluteUrl(path)
+ *
+ *   3. frontendBaseUrl: window.location.origin  (bare origin usage)
+ *      → use getBaseUrl() to include the base path
+ *
+ *   4. window.location.href = path
+ *      → use withBasePath(path) or navigate() for internal navigation
+ *
+ * External URLs (first arg starts with "http") are explicitly allowed.
+ */
+
+function isOriginAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'origin' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isHrefAccess(node) {
+	return (
+		node.type === 'MemberExpression' &&
+		!node.computed &&
+		node.property.name === 'href' &&
+		node.object.type === 'MemberExpression' &&
+		!node.object.computed &&
+		node.object.property.name === 'location' &&
+		node.object.object.type === 'Identifier' &&
+		node.object.object.name === 'window'
+	);
+}
+
+function isExternalUrl(node) {
+	if (node.type === 'Literal' && typeof node.value === 'string') {
+		return node.value.startsWith('http://') || node.value.startsWith('https://');
+	}
+	if (node.type === 'TemplateLiteral' && node.quasis.length > 0) {
+		const raw = node.quasis[0].value.raw;
+		return raw.startsWith('http://') || raw.startsWith('https://');
+	}
+	return false;
+}
+
+
+// window.open(withBasePath(x)) and window.open(getAbsoluteUrl(x)) are already safe.
+function isSafeHelperCall(node) {
+	return (
+		node.type === 'CallExpression' &&
+		node.callee.type === 'Identifier' &&
+		(node.callee.name === 'withBasePath' || node.callee.name === 'getAbsoluteUrl')
+	);
+}
+
+export default {
+	meta: {
+		type: 'suggestion',
+		docs: {
+			description:
+				'Disallow raw window.open and origin-concatenation patterns that miss the runtime base path',
+			category: 'Base Path Safety',
+		},
+		schema: [],
+		messages: {
+			windowOpen:
+				'Use openInNewTab(path) instead of window.open(path, "_blank") — openInNewTab prepends the base path automatically.',
+			originConcat:
+				'Use getAbsoluteUrl(path) instead of window.location.origin + path — getAbsoluteUrl prepends the base path automatically.',
+			originDirect:
+				'Use getBaseUrl() instead of window.location.origin — getBaseUrl includes the base path.',
+			hrefAssign:
+				'Use withBasePath(path) or navigate() instead of window.location.href = path — ensures the base path is included.',
+		},
+	},
+
+	create(context) {
+		return {
+			// window.open(path, ...) — allow only external first-arg URLs
+			CallExpression(node) {
+				const { callee, arguments: args } = node;
+				if (
+					callee.type !== 'MemberExpression' ||
+					callee.object.type !== 'Identifier' ||
+					callee.object.name !== 'window' ||
+					callee.property.name !== 'open'
+				)
+					{return;}
+				if (args.length === 0) {return;}
+				if (isExternalUrl(args[0])) {return;}
+				if (isSafeHelperCall(args[0])) {return;}
+
+				context.report({ node, messageId: 'windowOpen' });
+			},
+
+			// window.location.origin + path
+			BinaryExpression(node) {
+				if (node.operator !== '+') {return;}
+				if (isOriginAccess(node.left) || isOriginAccess(node.right)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// `${window.location.origin}${path}`
+			TemplateLiteral(node) {
+				if (node.expressions.some(isOriginAccess)) {
+					context.report({ node, messageId: 'originConcat' });
+				}
+			},
+
+			// window.location.origin used directly (not in concatenation)
+			// Catches: frontendBaseUrl: window.location.origin
+			MemberExpression(node) {
+				if (!isOriginAccess(node)) {return;}
+
+				const parent = node.parent;
+				// Skip if parent is BinaryExpression with + (handled by BinaryExpression visitor)
+				if (parent.type === 'BinaryExpression' && parent.operator === '+') {return;}
+				// Skip if inside TemplateLiteral (handled by TemplateLiteral visitor)
+				if (parent.type === 'TemplateLiteral') {return;}
+
+				context.report({ node, messageId: 'originDirect' });
+			},
+
+			// window.location.href = path
+			AssignmentExpression(node) {
+				if (node.operator !== '=') {return;}
+				if (!isHrefAccess(node.left)) {return;}
+
+				// Allow external URLs
+				if (isExternalUrl(node.right)) {return;}
+				// Allow safe helper calls
+				if (isSafeHelperCall(node.right)) {return;}
+
+				context.report({ node, messageId: 'hrefAssign' });
+			},
+		};
+	},
+};

frontend/plugins/signoz.mjs

@@ -8,6 +8,7 @@
 import noZustandGetStateInHooks from './rules/no-zustand-getstate-in-hooks.mjs';
 import noNavigatorClipboard from './rules/no-navigator-clipboard.mjs';
 import noUnsupportedAssetPattern from './rules/no-unsupported-asset-pattern.mjs';
+import noRawAbsolutePath from './rules/no-raw-absolute-path.mjs';
 
 export default {
 	meta: {
@@ -17,5 +18,6 @@ export default {
 		'no-zustand-getstate-in-hooks': noZustandGetStateInHooks,
 		'no-navigator-clipboard': noNavigatorClipboard,
 		'no-unsupported-asset-pattern': noUnsupportedAssetPattern,
+		'no-raw-absolute-path': noRawAbsolutePath,
 	},
 };

frontend/src/ReactI18/index.tsx

@@ -2,6 +2,7 @@ import { initReactI18next } from 'react-i18next';
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-http-backend';
+import { getBasePath } from 'utils/basePath';
 
 import cacheBursting from '../../i18n-translations-hash.json';
 
@@ -24,7 +25,7 @@ i18n
 				const ns = namespace[0];
 				const pathkey = `/${language}/${ns}`;
 				const hash = cacheBursting[pathkey as keyof typeof cacheBursting] || '';
-				return `/locales/${language}/${namespace}.json?h=${hash}`;
+				return `${getBasePath()}locales/${language}/${namespace}.json?h=${hash}`;
 			},
 		},
 		react: {

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -795,7 +795,8 @@ export interface CloudintegrationtypesAccountDTO {
 }
 
 export interface CloudintegrationtypesAccountConfigDTO {
-	aws: CloudintegrationtypesAWSAccountConfigDTO;
+	aws?: CloudintegrationtypesAWSAccountConfigDTO;
+	azure?: CloudintegrationtypesAzureAccountConfigDTO;
 }
 
 /**
@@ -829,6 +830,86 @@ export interface CloudintegrationtypesAssetsDTO {
 	dashboards?: CloudintegrationtypesDashboardDTO[] | null;
 }
 
+export interface CloudintegrationtypesAzureAccountConfigDTO {
+	/**
+	 * @type string
+	 */
+	deploymentRegion: string;
+	/**
+	 * @type array
+	 */
+	resourceGroups: string[];
+}
+
+export interface CloudintegrationtypesAzureConnectionArtifactDTO {
+	/**
+	 * @type string
+	 */
+	cliCommand: string;
+	/**
+	 * @type string
+	 */
+	cloudPowerShellCommand: string;
+}
+
+export interface CloudintegrationtypesAzureIntegrationConfigDTO {
+	/**
+	 * @type string
+	 */
+	deploymentRegion: string;
+	/**
+	 * @type array
+	 */
+	resourceGroups: string[];
+	/**
+	 * @type array
+	 */
+	telemetryCollectionStrategy: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO[];
+}
+
+export interface CloudintegrationtypesAzureLogsCollectionStrategyDTO {
+	/**
+	 * @type array
+	 */
+	categoryGroups: string[];
+}
+
+export interface CloudintegrationtypesAzureMetricsCollectionStrategyDTO {
+	[key: string]: unknown;
+}
+
+export interface CloudintegrationtypesAzureServiceConfigDTO {
+	logs: CloudintegrationtypesAzureServiceLogsConfigDTO;
+	metrics: CloudintegrationtypesAzureServiceMetricsConfigDTO;
+}
+
+export interface CloudintegrationtypesAzureServiceLogsConfigDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+}
+
+export interface CloudintegrationtypesAzureServiceMetricsConfigDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled?: boolean;
+}
+
+export interface CloudintegrationtypesAzureTelemetryCollectionStrategyDTO {
+	logs?: CloudintegrationtypesAzureLogsCollectionStrategyDTO;
+	metrics?: CloudintegrationtypesAzureMetricsCollectionStrategyDTO;
+	/**
+	 * @type string
+	 */
+	resourceProvider: string;
+	/**
+	 * @type string
+	 */
+	resourceType: string;
+}
+
 /**
  * @nullable
  */
@@ -890,7 +971,8 @@ export interface CloudintegrationtypesCollectedMetricDTO {
 }
 
 export interface CloudintegrationtypesConnectionArtifactDTO {
-	aws: CloudintegrationtypesAWSConnectionArtifactDTO;
+	aws?: CloudintegrationtypesAWSConnectionArtifactDTO;
+	azure?: CloudintegrationtypesAzureConnectionArtifactDTO;
 }
 
 export interface CloudintegrationtypesCredentialsDTO {
@@ -1074,7 +1156,8 @@ export interface CloudintegrationtypesPostableAccountDTO {
 }
 
 export interface CloudintegrationtypesPostableAccountConfigDTO {
-	aws: CloudintegrationtypesAWSPostableAccountConfigDTO;
+	aws?: CloudintegrationtypesAWSPostableAccountConfigDTO;
+	azure?: CloudintegrationtypesAzureAccountConfigDTO;
 }
 
 /**
@@ -1109,7 +1192,8 @@ export interface CloudintegrationtypesPostableAgentCheckInDTO {
 }
 
 export interface CloudintegrationtypesProviderIntegrationConfigDTO {
-	aws: CloudintegrationtypesAWSIntegrationConfigDTO;
+	aws?: CloudintegrationtypesAWSIntegrationConfigDTO;
+	azure?: CloudintegrationtypesAzureIntegrationConfigDTO;
 }
 
 export interface CloudintegrationtypesServiceDTO {
@@ -1137,7 +1221,8 @@ export interface CloudintegrationtypesServiceDTO {
 }
 
 export interface CloudintegrationtypesServiceConfigDTO {
-	aws: CloudintegrationtypesAWSServiceConfigDTO;
+	aws?: CloudintegrationtypesAWSServiceConfigDTO;
+	azure?: CloudintegrationtypesAzureServiceConfigDTO;
 }
 
 export enum CloudintegrationtypesServiceIDDTO {
@@ -1154,6 +1239,8 @@ export enum CloudintegrationtypesServiceIDDTO {
 	s3sync = 's3sync',
 	sns = 'sns',
 	sqs = 'sqs',
+	storageaccountsblob = 'storageaccountsblob',
+	cdnprofile = 'cdnprofile',
 }
 export interface CloudintegrationtypesServiceMetadataDTO {
 	/**
@@ -1186,11 +1273,24 @@ export interface CloudintegrationtypesSupportedSignalsDTO {
 }
 
 export interface CloudintegrationtypesTelemetryCollectionStrategyDTO {
-	aws: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+	aws?: CloudintegrationtypesAWSTelemetryCollectionStrategyDTO;
+	azure?: CloudintegrationtypesAzureTelemetryCollectionStrategyDTO;
 }
 
 export interface CloudintegrationtypesUpdatableAccountDTO {
-	config: CloudintegrationtypesAccountConfigDTO;
+	config: CloudintegrationtypesUpdatableAccountConfigDTO;
+}
+
+export interface CloudintegrationtypesUpdatableAccountConfigDTO {
+	aws?: CloudintegrationtypesAWSAccountConfigDTO;
+	azure?: CloudintegrationtypesUpdatableAzureAccountConfigDTO;
+}
+
+export interface CloudintegrationtypesUpdatableAzureAccountConfigDTO {
+	/**
+	 * @type array
+	 */
+	resourceGroups: string[];
 }
 
 export interface CloudintegrationtypesUpdatableServiceDTO {

frontend/src/api/generatedAPIInstance.ts

@@ -1,5 +1,6 @@
 import {
 	interceptorRejected,
+	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -17,6 +18,7 @@ export const GeneratedAPIInstance = <T>(
 	return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
 };
 
+generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 generatedAPIAxiosInstance.interceptors.response.use(
 	interceptorsResponse,

frontend/src/api/index.ts

@@ -11,6 +11,7 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { getBasePath } from 'utils/basePath';
 import { eventEmitter } from 'utils/getEventEmitter';
 
 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
@@ -67,6 +68,39 @@ export const interceptorsRequestResponse = (
 	return value;
 };
 
+// Strips the leading '/' from path and joins with base — idempotent if already prefixed.
+// e.g. prependBase('/signoz/', '/api/v1/') → '/signoz/api/v1/'
+function prependBase(base: string, path: string): string {
+	return path.startsWith(base) ? path : base + path.slice(1);
+}
+
+// Prepends the runtime base path to outgoing requests so API calls work under
+// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
+// (dev baseURL is a full http:// URL, not an absolute path).
+export const interceptorsRequestBasePath = (
+	value: InternalAxiosRequestConfig,
+): InternalAxiosRequestConfig => {
+	const basePath = getBasePath();
+	if (basePath === '/') {
+		return value;
+	}
+
+	if (value.baseURL?.startsWith('/')) {
+		// Production relative baseURL: '/api/v1/' → '/signoz/api/v1/'
+		value.baseURL = prependBase(basePath, value.baseURL);
+	} else if (value.baseURL?.startsWith('http')) {
+		// Dev absolute baseURL (VITE_FRONTEND_API_ENDPOINT): 'https://host/api/v1/' → 'https://host/signoz/api/v1/'
+		const url = new URL(value.baseURL);
+		url.pathname = prependBase(basePath, url.pathname);
+		value.baseURL = url.toString();
+	} else if (!value.baseURL && value.url?.startsWith('/')) {
+		// Orval-generated client (empty baseURL, path in url): '/api/signoz/v1/rules' → '/signoz/api/signoz/v1/rules'
+		value.url = prependBase(basePath, value.url);
+	}
+
+	return value;
+};
+
 export const interceptorRejected = async (
 	value: AxiosResponse<any>,
 ): Promise<AxiosResponse<any>> => {
@@ -133,6 +167,7 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use(interceptorsRequestResponse);
+instance.interceptors.request.use(interceptorsRequestBasePath);
 instance.interceptors.response.use(interceptorsResponse, interceptorRejected);
 
 export const AxiosAlertManagerInstance = axios.create({
@@ -147,6 +182,7 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);
 
 // axios V3
 export const ApiV3Instance = axios.create({
@@ -158,6 +194,7 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V4
@@ -170,6 +207,7 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios V5
@@ -182,6 +220,7 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 // axios Base
@@ -194,6 +233,7 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
+LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //
 
 AxiosAlertManagerInstance.interceptors.response.use(
@@ -201,6 +241,7 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
+AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);
 
 export { apiV1 };
 export default instance;

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

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

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

@@ -99,36 +99,6 @@
 	}
 }
 
-.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,23 +87,3 @@
 	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,28 +143,3 @@
 		}
 	}
 }
-
-.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,18 +238,7 @@
 		height: 2px;
 		bottom: 0;
 		left: 0;
-		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);
+		background-color: var(--l1-background);
+		color: var(--l1-foreground);
 	}
 }

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

@@ -12,6 +12,7 @@ import { AppState } from 'store/reducers';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { withBasePath } from 'utils/basePath';
 
 export interface NavigateToExplorerProps {
 	filters: TagFilterItem[];
@@ -133,7 +134,7 @@ export function useNavigateToExplorer(): (
 				QueryParams.compositeQuery
 			}=${JSONCompositeQuery}`;
 
-			window.open(newExplorerPath, sameTab ? '_self' : '_blank');
+			window.open(withBasePath(newExplorerPath), sameTab ? '_self' : '_blank');
 		},
 		[
 			prepareQuery,

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

@@ -77,11 +77,11 @@
 		width: 280px;
 
 		&::placeholder {
-			color: white;
+			color: var(--l1-foreground);
 		}
 
 		&:focus::placeholder {
-			color: rgba($color: #ffffff, $alpha: 0.4);
+			color: rgba($color: var(--l1-foreground), $alpha: 0.4);
 		}
 	}
 }
@@ -113,42 +113,6 @@
 	}
 }
 
-.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;
@@ -300,34 +264,3 @@
 		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,20 +129,3 @@ $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,9 +1,5 @@
 .dropdown-button {
-	color: #fff;
-}
-
-.dropdown-button--dark {
-	color: #000;
+	color: var(--l1-foreground);
 }
 
 .dropdown-icon {

frontend/src/components/DropDown/DropDown.tsx

@@ -1,7 +1,6 @@
 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';
 
@@ -12,8 +11,6 @@ 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,
@@ -35,7 +32,7 @@ function DropDown({
 		>
 			<Button
 				type="link"
-				className={!isDarkMode ? 'dropdown-button--dark' : 'dropdown-button'}
+				className={`dropdown-button`}
 				onClick={(e): void => {
 					e.preventDefault();
 					setDdOpen(true);

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

@@ -196,17 +196,3 @@
 		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/MessagingQueueHealthCheck.styles.scss

@@ -167,22 +167,3 @@
 		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(--border) 45%, transparent);
+		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
 	}
 
 	// Base styles are for dark mode
@@ -48,10 +48,6 @@ $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 {
@@ -67,10 +63,6 @@ $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 {
@@ -114,7 +106,7 @@ $custom-border-color: #2c3044;
 	}
 
 	.ant-select-selection-placeholder {
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
 	}
 
 	// Customize tags in multiselect (dark mode by default)
@@ -180,7 +172,9 @@ $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);
@@ -215,7 +209,7 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
 	}
 }
 
@@ -573,7 +567,7 @@ $custom-border-color: #2c3044;
 	.empty-message {
 		padding: 12px;
 		text-align: center;
-		color: color-mix(in srgb, var(--border) 45%, transparent);
+		color: color-mix(in srgb, var(--l1-foreground) 45%, transparent);
 	}
 
 	.status-message {
@@ -804,8 +798,10 @@ $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);
@@ -976,11 +972,9 @@ $custom-border-color: #2c3044;
 			font-weight: 500;
 			z-index: 2;
 			pointer-events: none;
-			transition: opacity 0.2s ease, visibility 0.2s ease;
-
-			.lightMode & {
-				color: rgba(0, 0, 0, 0.85);
-			}
+			transition:
+				opacity 0.2s ease,
+				visibility 0.2s ease;
 		}
 
 		&:focus-within .all-text {

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

@@ -249,57 +249,6 @@
 	}
 }
 
-.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,44 +121,3 @@
 		}
 	}
 }
-
-.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, #fff 10%, transparent 0);
+	background: radial-gradient(circle, var(--l1-foreground) 10%, transparent 0);
 	background-size: 12px 12px;
 	opacity: 1;
 

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

@@ -197,17 +197,3 @@
 		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,9 +169,12 @@
 		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 {
@@ -183,29 +186,3 @@
 		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,9 +157,3 @@
 .view-all-drawer {
 	border-radius: 4px;
 }
-
-.lightMode {
-	.ant-table {
-		background: inherit;
-	}
-}

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

@@ -134,7 +134,9 @@
 
 			.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;
 			}
 
@@ -224,54 +226,3 @@
 		}
 	}
 }
-
-.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/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -28,7 +28,7 @@
 			}
 
 			.dashboard-title {
-				color: #fff;
+				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 16px;
 				font-style: normal;
@@ -463,135 +463,3 @@
 		}
 	}
 }
-
-.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,58 +141,3 @@
 		}
 	}
 }
-
-.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/DashboardVariablesSelection/DashboardVariableSelection.styles.scss

@@ -100,27 +100,6 @@
 	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,50 +116,3 @@
 		}
 	}
 }
-
-.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,11 +61,3 @@
 		width: 14px;
 	}
 }
-
-.lightMode {
-	.dashboard-breadcrumbs {
-		.dashboard-btn {
-			color: var(--l1-foreground);
-		}
-	}
-}

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

@@ -57,32 +57,3 @@
 		}
 	}
 }
-
-.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/FormAlertRules/FormAlertRules.styles.scss

@@ -119,41 +119,6 @@
 	}
 }
 
-.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/GridCardLayout/DashboardEmptyState/DashboardEmptyState.styles.scss

@@ -174,23 +174,3 @@
 		}
 	}
 }
-
-.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,100 +333,3 @@
 		}
 	}
 }
-
-.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,14 +55,6 @@
 	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/Home.styles.scss

@@ -227,7 +227,9 @@
 		.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;
@@ -480,10 +482,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(--l2-background);
+						background: var(--l3-background);
+						color: var(--primary);
 					}
 				}
 			}

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,17 +54,20 @@ 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') {
@@ -348,7 +351,7 @@ export default function SavedViews({
 									className={selectedEntity === 'logs' ? 'selected tab' : 'tab'}
 									onClick={(): void => handleTabChange('logs')}
 								>
-									<img src={logsUrl} alt="logs-icon" className="logs-icon" />
+									<ScrollText size={14} />
 									Logs
 								</Button>
 								<Button

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

@@ -132,7 +132,9 @@
 
 			.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;
 			}
 
@@ -146,50 +148,3 @@
 		}
 	}
 }
-
-.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,63 +192,6 @@
 	}
 }
 
-.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;
 
@@ -382,7 +325,9 @@
 
 			.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;
 			}
 
@@ -397,53 +342,6 @@
 	}
 }
 
-.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,7 +202,11 @@
 							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;
 						}
 					}
 
@@ -251,7 +255,11 @@
 			> 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);
@@ -765,206 +773,6 @@
 	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;
 }
@@ -1077,26 +885,3 @@
 		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/Licenses/Licenses.styles.scss

@@ -9,6 +9,8 @@
 
 		.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;
@@ -54,38 +56,3 @@
 		}
 	}
 }
-
-.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/AlertsEmptyState.styles.scss

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

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

@@ -224,7 +224,11 @@
 							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;
@@ -249,7 +253,11 @@
 							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;
@@ -273,7 +281,11 @@
 							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;
@@ -307,7 +319,11 @@
 							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;
@@ -328,7 +344,11 @@
 			> 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);
@@ -932,7 +952,11 @@
 								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;
@@ -966,7 +990,11 @@
 									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;
@@ -988,7 +1016,11 @@
 								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;
@@ -1022,7 +1054,11 @@
 									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;
@@ -1078,305 +1114,6 @@
 	}
 }
 
-.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,76 +194,3 @@
 		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/TableComponents/DeleteButton.styles.scss

@@ -7,9 +7,3 @@
 .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/LogDetailedView/TableView/TableViewActions.styles.scss

@@ -58,14 +58,3 @@
 		}
 	}
 }
-
-.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,55 +160,6 @@
 	}
 }
 
-.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/styles.ts

@@ -10,10 +10,6 @@ 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)`
@@ -50,20 +46,10 @@ 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,50 +323,3 @@
 		}
 	}
 }
-
-.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/styles/TanStackHeaderRow.styles.scss

@@ -102,7 +102,9 @@
 	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);
@@ -143,10 +145,12 @@
 	left: 50%;
 	width: 4px;
 	transform: translateX(-50%);
-	background: var(--l2-border);
+	background: var(--l2-background);
 	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(--bg-slate-300) transparent;
+	scrollbar-color: var(--l3-background) transparent;
 
 	&::-webkit-scrollbar {
 		width: 4px;
@@ -16,23 +16,11 @@
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background: var(--bg-slate-300);
+		background: var(--l3-background);
 		border-radius: 9999px;
 	}
 
 	&::-webkit-scrollbar-thumb:hover {
-		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);
+		background: var(--l3-background);
 	}
 }

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

@@ -263,24 +263,6 @@
 	}
 }
 
-.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/MetricsExplorer/Explorer/Explorer.styles.scss

@@ -179,16 +179,6 @@
 	}
 }
 
-.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/MetricDetails.styles.scss

@@ -382,81 +382,6 @@
 	}
 }
 
-.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 {
@@ -585,24 +510,6 @@
 	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,7 +177,9 @@
 
 			.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;
 			}
 
@@ -228,29 +230,6 @@
 	}
 }
 
-.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,28 +57,3 @@
 		}
 	}
 }
-
-.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,62 +153,3 @@
 
 	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: #fff;
+			color: var(--l1-foreground);
 			font-family: Inter;
 			font-size: 12px;
 			font-style: normal;

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

@@ -32,17 +32,3 @@
 		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,11 +38,3 @@
 		gap: 12px;
 	}
 }
-
-.lightMode {
-	.column-unit-selector {
-		.heading {
-			color: var(--l2-background);
-		}
-	}
-}

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

@@ -68,25 +68,3 @@
 		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/styles.scss

@@ -111,35 +111,3 @@
 .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,28 +142,3 @@
 		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,95 +222,3 @@
 		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,20 +36,3 @@
 		}
 	}
 }
-
-.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);
-			}
-		}
-	}
-}

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

@@ -8,7 +8,7 @@
 .color-selector-button {
 	border: none;
 	width: 100%;
-	background-color: var(--l1-border);
+	background-color: var(--l1-background);
 
 	.ant-btn {
 		box-shadow: none;

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

@@ -3,17 +3,8 @@
 	gap: 8px;
 	align-items: center;
 
-	.custom-color-typography-dark {
-		color: #fff !important;
-		font-family: 'Space Mono';
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 16px; /* 133.333% */
-	}
-
-	.custom-color-typography-light {
-		color: #000 !important;
+	.custom-color-text {
+		color: var(--l1-foreground) !important;
 		font-family: 'Space Mono';
 		font-size: 12px;
 		font-style: normal;

frontend/src/container/NewWidget/RightContainer/Threshold/CustomColor.tsx

@@ -1,24 +1,14 @@
 import { Typography } from 'antd';
-import { useIsDarkMode } from 'hooks/useDarkMode';
 
 import { CustomColorProps } from './types';
 
 import './CustomColor.styles.scss';
 
 function CustomColor({ color }: CustomColorProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
 	return (
 		<div className="custom-color-container">
 			<div className="custom-color-tag" style={{ background: color }} />
-			<Typography.Text
-				className={
-					isDarkMode
-						? `custom-color-typography-dark`
-						: `custom-color-typograph-light`
-				}
-			>
-				{color}
-			</Typography.Text>
+			<Typography.Text className={`custom-color-text`}>{color}</Typography.Text>
 		</div>
 	);
 }

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

@@ -20,7 +20,7 @@
 		flex-shrink: 0;
 		padding: 12px;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--l2-border);
 		background: var(--l2-background);
 
 		.edit-action-btns {
@@ -38,11 +38,11 @@
 				align-items: center;
 				gap: 10px;
 				flex-shrink: 0;
-				background: var(--l1-border);
+				background: var(--l2-background);
 			}
 
 			.ant-btn + .ant-btn {
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid var(--l2-border);
 			}
 
 			.edit-btn {
@@ -57,7 +57,7 @@
 		.time-series-alerts {
 			display: flex;
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--l2-border);
 			background: var(--l2-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			width: 100%;
@@ -81,7 +81,7 @@
 				width: 80%;
 				flex-shrink: 0;
 				border-radius: 2px;
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid var(--l2-border);
 				background: var(--l2-background);
 				box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 				color: var(--l1-foreground);
@@ -139,7 +139,7 @@
 		.threshold-units-selector {
 			display: flex;
 			border-radius: 2px 2px 0px 0px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--l2-border);
 			background: var(--l2-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			height: 32px;
@@ -161,7 +161,7 @@
 			.unit-selection {
 				width: 50%;
 				border: none;
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid var(--l2-border);
 				color: var(--l2-foreground);
 				font-family: 'Space Mono';
 				font-size: 12px;
@@ -188,14 +188,14 @@
 			.unit-selection-prev {
 				width: 50%;
 				border: none;
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid var(--l2-border);
 				color: var(--l2-foreground);
 				font-family: 'Space Mono';
 				font-size: 12px;
 				font-style: normal;
 				font-weight: 400;
 				line-height: 16px; /* 133.333% */
-				background: var(--l2-background);
+				background: var(--l1-background);
 			}
 		}
 
@@ -203,9 +203,9 @@
 			display: flex;
 			align-items: center;
 			border-radius: 0px 0px 2px 2px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--l2-border);
 			border-top: none;
-			background: var(--l2-background);
+			background: var(--l1-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			height: 32px;
 			flex-shrink: 0;
@@ -220,7 +220,7 @@
 				font-style: normal;
 				font-weight: 400;
 				line-height: 16px; /* 133.333% */
-				background: var(--l2-background);
+				background: var(--l1-background);
 
 				.ant-btn {
 					box-shadow: none;
@@ -230,8 +230,9 @@
 			.color-format {
 				width: 50%;
 				border: none;
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid var(--l2-border);
 				color: var(--l1-foreground);
+				background: var(--l1-background);
 				font-family: 'Space Mono';
 				font-size: 12px;
 				font-style: normal;
@@ -247,21 +248,21 @@
 					font-style: normal;
 					font-weight: 400;
 					line-height: 16px; /* 133.333% */
-					background-color: unset;
+					background: var(--l1-background);
 				}
 			}
 
 			.color-format-prev {
 				width: 50%;
 				border: none;
-				border-left: 1px solid var(--l1-border);
+				border-left: 1px solid var(--l2-border);
 				color: var(--l1-foreground);
 				font-family: 'Space Mono';
 				font-size: 12px;
 				font-style: normal;
 				font-weight: 400;
 				line-height: 16px; /* 133.333% */
-				background: var(--l2-background);
+				background: var(--l1-background);
 			}
 		}
 
@@ -281,8 +282,8 @@
 				gap: 6px;
 				flex: 1 0 0;
 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l1-border);
+				border: 1px solid var(--l2-border);
+				background: var(--l2-background);
 				box-shadow: none;
 			}
 
@@ -319,123 +320,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.operator-input-root {
-		color: var(--l2-background);
-	}
-	.threshold-container {
-		.threshold-card-container {
-			border: 1px solid var(--l1-border);
-			background: var(--l1-foreground);
-
-			.edit-action-btns {
-				.ant-btn {
-					background: var(--l3-background);
-				}
-
-				.ant-btn + .ant-btn {
-					border-left: 1px solid var(--l1-foreground);
-				}
-			}
-
-			.time-series-alerts {
-				border: 1px solid var(--l1-border);
-				background: var(--l1-foreground);
-
-				.label {
-					color: var(--l2-background);
-				}
-
-				.label-input {
-					border-left: 1px solid var(--l1-border);
-					background: var(--l3-background);
-					color: var(--l3-background);
-					border: 1px solid var(--l1-border);
-					box-shadow: none;
-				}
-			}
-
-			.value-table-alerts {
-				.operator-input {
-					.ant-select-selector {
-						background-color: var(--l3-background) !important;
-						color: var(--l3-background);
-					}
-				}
-
-				.typography {
-					color: var(--l2-background);
-				}
-				.typography-preview {
-					color: var(--l2-background);
-					border: 1px solid var(--l1-border);
-					background-color: var(--l3-background) !important;
-				}
-			}
-			.threshold-units-selector {
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-
-				.unit-input {
-					color: var(--l2-background);
-					background: var(--l3-background);
-				}
-
-				.unit-selection {
-					border-left: 1px solid var(--l1-foreground);
-					color: var(--l2-background);
-
-					.ant-select-selector {
-						background-color: var(--l3-background);
-						color: var(--l2-background);
-					}
-				}
-
-				.unit-selection-prev {
-					border-left: 1px solid var(--l1-foreground);
-					color: var(--l2-background);
-					background: var(--l3-background);
-				}
-			}
-
-			.thresholds-color-selector {
-				border: 1px solid var(--l1-border);
-				border-top: 1px solid var(--l1-foreground);
-				background: var(--l3-background);
-
-				.color-selector {
-					color: var(--l3-background);
-					background: var(--l3-background);
-					border: 1px solid var(--l1-border);
-					border-top: 1px solid var(--l1-foreground);
-				}
-				.color-format {
-					border-left: 1px solid var(--l1-foreground);
-					color: var(--l3-background);
-
-					.ant-select-selector {
-						color: var(--l2-background);
-					}
-				}
-
-				.color-format-prev {
-					border-left: 1px solid var(--l1-foreground);
-					color: var(--l3-background);
-					background: var(--l3-background);
-				}
-			}
-
-			.threshold-action-button {
-				.discard-btn {
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
-				}
-
-				.save-changes {
-					color: var(--l1-foreground);
-				}
-			}
-		}
-	}
-}

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

@@ -32,22 +32,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.threshold-selector-container {
-		.threshold-select {
-			.icon {
-				color: var(--l2-background);
-			}
-
-			.left-section {
-				.icon {
-					color: var(--l2-background);
-				}
-				.text {
-					color: var(--l2-background);
-				}
-			}
-		}
-	}
-}

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

@@ -11,11 +11,3 @@
 		color: var(--l2-foreground);
 	}
 }
-
-.lightMode {
-	.fill-mode-selector {
-		.fill-mode-label {
-			color: var(--l2-background);
-		}
-	}
-}

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

@@ -11,11 +11,3 @@
 		color: var(--l2-foreground);
 	}
 }
-
-.lightMode {
-	.line-interpolation-selector {
-		.line-interpolation-label {
-			color: var(--l2-background);
-		}
-	}
-}

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

@@ -11,11 +11,3 @@
 		color: var(--l2-foreground);
 	}
 }
-
-.lightMode {
-	.line-style-selector {
-		.line-style-label {
-			color: var(--l2-background);
-		}
-	}
-}

frontend/src/container/NoLogs/NoLogs.styles.scss

@@ -5,7 +5,6 @@
 	align-items: center;
 	flex-direction: column;
 
-	// border: 1px solid #1d212d;
 	border-radius: 3px;
 
 	.no-logs-container-content {

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.styles.scss

@@ -70,12 +70,6 @@ div[class*='-setup-instructions-container'] {
 	gap: 8px;
 }
 
-.lightMode {
-	.dataSourceName {
-		color: var(--l1-border);
-	}
-}
-
 .supported-languages-container {
 	.disabled {
 		cursor: not-allowed;

frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.styles.scss

@@ -180,80 +180,6 @@
 	padding: 24px 0;
 }
 
-.lightMode {
-	.entity-value {
-		background-color: color-mix(
-			in srgb,
-			var(--primary-background) 10%,
-			transparent
-		) !important;
-		border-color: color-mix(
-			in srgb,
-			var(--primary-background) 10%,
-			transparent
-		) !important;
-	}
-
-	.environment,
-	.supported-language {
-		&.selected {
-			color: var(--accent-primary);
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 10%,
-				transparent
-			) !important;
-			border-color: color-mix(
-				in srgb,
-				var(--primary-background) 10%,
-				transparent
-			) !important;
-		}
-
-		&:hover {
-			color: var(--accent-primary);
-			background-color: color-mix(
-				in srgb,
-				var(--primary-background) 10%,
-				transparent
-			) !important;
-			border-color: color-mix(
-				in srgb,
-				var(--primary-background) 10%,
-				transparent
-			) !important;
-		}
-	}
-
-	.markdown-container {
-		color: rgba(0, 0, 0, 0.88);
-	}
-}
-
 .error-container {
 	margin: 8px 0;
 }
-
-.lightMode {
-	.steps-container {
-		width: 20%;
-		height: 100%;
-
-		.steps-container-header {
-			.brand-logo {
-				.brand-logo-name {
-					color: black;
-				}
-			}
-		}
-
-		.invite-user-btn {
-			border: 1px solid var(--l1-border);
-			background: var(--l1-foreground);
-
-			.ant-typography {
-				color: var(--l3-foreground);
-			}
-		}
-	}
-}

frontend/src/container/OnboardingQuestionaire/InviteTeamMembers/InviteTeamMembers.styles.scss

@@ -190,7 +190,9 @@
 	opacity: 0.6 !important;
 	cursor: pointer;
 	padding: 0 !important;
-	transition: background-color 0.2s, opacity 0.2s;
+	transition:
+		background-color 0.2s,
+		opacity 0.2s;
 	box-shadow: none !important;
 
 	svg {
@@ -371,144 +373,6 @@
 	}
 }
 
-.lightMode {
-	.invite-team-members-table-header {
-		.table-header-cell {
-			color: var(--l3-foreground);
-		}
-	}
-
-	.team-member-email-input {
-		background: var(--l2-background) !important;
-		border-color: var(--l1-border) !important;
-		color: var(--l1-foreground) !important;
-
-		input {
-			background: var(--l2-background) !important;
-			border-color: var(--l1-border) !important;
-			color: var(--l1-foreground) !important;
-
-			&::placeholder {
-				color: var(--text-neutral-light-200) !important;
-			}
-
-			&:focus {
-				border-color: var(--bg-robin-500) !important;
-			}
-		}
-
-		&::placeholder {
-			color: var(--text-neutral-light-200) !important;
-		}
-
-		&:hover {
-			border-color: var(--l1-border) !important;
-		}
-
-		&:focus {
-			border-color: var(--bg-robin-500) !important;
-		}
-	}
-
-	.team-member-role-select {
-		.ant-select-selector {
-			background: var(--l3-background) !important;
-			border: 1px solid var(--l1-border) !important;
-			color: var(--l1-foreground) !important;
-
-			.ant-select-selection-placeholder {
-				color: var(--l3-foreground) !important;
-			}
-
-			.ant-select-selection-item {
-				color: var(--l1-foreground) !important;
-			}
-		}
-
-		.ant-select-arrow {
-			color: var(--l3-foreground) !important;
-		}
-
-		&.ant-select-focused .ant-select-selector {
-			border-color: var(--bg-robin-500) !important;
-		}
-
-		&:hover .ant-select-selector {
-			border-color: var(--bg-robin-500) !important;
-		}
-	}
-
-	.remove-team-member-button {
-		border: none !important;
-		background: transparent !important;
-		color: var(--danger-background) !important;
-
-		svg {
-			color: var(--danger-background) !important;
-		}
-
-		&:hover {
-			background: color-mix(
-				in srgb,
-				var(--bg-cherry-400) 10%,
-				transparent
-			) !important;
-			color: var(--danger-background) !important;
-
-			svg {
-				color: var(--danger-background) !important;
-			}
-		}
-	}
-
-	.add-another-member-button {
-		border: 1px dashed var(--l1-border) !important;
-		background: transparent !important;
-		color: var(--l3-foreground);
-
-		svg,
-		[class*='icon'] {
-			color: var(--l3-foreground) !important;
-			display: inline-block !important;
-			opacity: 1 !important;
-		}
-
-		&:hover {
-			border-color: var(--bg-robin-500) !important;
-			border-style: dashed !important;
-			color: var(--l1-foreground);
-			background: color-mix(
-				in srgb,
-				var(--primary-background) 10%,
-				transparent
-			) !important;
-
-			svg,
-			[class*='icon'] {
-				color: var(--l1-foreground) !important;
-			}
-		}
-	}
-
-	.questions-form-container {
-		.invite-users-error-message-container,
-		.invite-users-success-message-container {
-			.success-message {
-				color: var(--bg-success-500);
-			}
-		}
-
-		.partially-sent-invites-container {
-			border: 1px solid var(--l1-border);
-			background-color: var(--l1-foreground);
-
-			.partially-sent-invites-message {
-				color: var(--bg-warning-500);
-			}
-		}
-	}
-}
-
 @keyframes horizontal-shaking {
 	0% {
 		transform: translateX(0);

frontend/src/container/OnboardingV2Container/IngestionDetails/IngestionDetails.styles.scss

@@ -17,17 +17,3 @@
 		color: var(--l2-foreground);
 	}
 }
-
-.lightMode {
-	.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/OnboardingV2Container/OnboardingV2.styles.scss

@@ -603,10 +603,6 @@
 			color: var(--accent-primary);
 			text-decoration: underline;
 		}
-
-		.lightMode & {
-			color: var(--accent-primary);
-		}
 	}
 
 	.onboarding-question {
@@ -1253,399 +1249,6 @@
 	}
 }
 
-.lightMode {
-	.ingestion-setup-details-links {
-		color: var(--accent-primary);
-
-		.learn-more {
-			color: var(--accent-primary);
-		}
-	}
-}
-
 .onboarding-header-container-close-icon {
 	color: var(--l1-foreground);
 }
-
-.lightMode {
-	.setup-flow {
-		&__header {
-			background: rgba(255, 255, 255, 0.9);
-			backdrop-filter: blur(20px);
-
-			&--sticky {
-				background: rgba(255, 255, 255, 0.9);
-			}
-		}
-
-		&__question-block {
-			color: var(--l2-foreground);
-			background-color: var(--l1-background);
-
-			&:before {
-				background-color: var(--l1-background);
-				border: 1px solid var(--l1-border);
-				color: var(--l2-foreground);
-			}
-		}
-
-		&__heading {
-			color: var(--l2-foreground);
-		}
-
-		&__description {
-			color: var(--l2-foreground);
-		}
-
-		&__radio-custom {
-			background-color: var(--l1-background);
-			color: var(--l2-foreground);
-			background: var(--l1-background);
-			cursor: pointer;
-			box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19);
-
-			&:hover {
-				background: var(--primary-background);
-				box-shadow: 0 4px 8px rgba(58, 134, 255, 0.2);
-			}
-
-			&__text {
-				color: var(--l2-foreground);
-			}
-
-			&--selected {
-				background: var(--primary-background);
-				border-color: var(--bg-robin-500);
-				color: var(--l2-foreground);
-				box-shadow: 0 4px 10px rgba(58, 134, 255, 0.4);
-			}
-
-			&--animating {
-				animation: selectPulse 0.6s cubic-bezier(0.19, 1, 0.22, 1);
-			}
-		}
-
-		&__category {
-			width: 100%;
-			color: var(--l2-foreground);
-		}
-
-		&__content-container {
-			display: flex;
-		}
-
-		&__category-filter {
-			margin-left: 20px;
-		}
-
-		&__category-filter-item {
-			color: var(--l2-foreground);
-
-			&--selected {
-				color: var(--l2-foreground);
-			}
-		}
-
-		@media (max-width: 600px) {
-			&__description {
-				color: var(--l2-foreground);
-			}
-		}
-	}
-
-	.question-block {
-		color: var(--l2-foreground);
-		background-color: transparent !important;
-
-		&:before {
-			background-color: var(--bg-robin-100);
-			border: 1px solid var(--l1-border);
-			color: var(--l2-foreground);
-		}
-
-		&.answered {
-			&:before {
-				background-color: var(--primary-background);
-				color: var(--l1-foreground);
-			}
-		}
-
-		&:after {
-			content: '';
-			position: absolute;
-			left: -3px;
-			top: 50px;
-			bottom: -80px;
-			width: 1px;
-			background: linear-gradient(
-				to bottom,
-				var(--bg-robin-400) 0%,
-				var(--bg-robin-400) 50%,
-				transparent 50%,
-				transparent 100%
-			);
-			background-size: 2px 10px;
-		}
-	}
-
-	@keyframes selectPulse {
-		0% {
-			background-color: var(--l2-background);
-			border-color: var(--bg-robin-500);
-		}
-		20% {
-			background-color: rgba(58, 134, 255, 0.5);
-			border-color: var(--bg-robin-500);
-		}
-		40% {
-			background-color: var(--l2-background);
-			border-color: var(--bg-robin-500);
-		}
-		60% {
-			background-color: rgba(58, 134, 255, 0.8);
-			border-color: var(--bg-robin-500);
-		}
-		100% {
-			background-color: var(--primary-background);
-			border-color: var(--bg-robin-500);
-		}
-	}
-
-	.onboarding-v2 {
-		.get-help-btn,
-		.invite-teammate-btn {
-			border: 1px solid var(--l1-border) !important;
-			color: var(--l3-background) !important;
-
-			&:focus-visible {
-				outline: none !important;
-				outline-offset: 0px !important;
-			}
-
-			&.rounded-btn {
-				border-radius: 50px;
-			}
-
-			&:hover {
-				border: 1px solid var(--l1-border) !important;
-				color: var(--text-robin-500) !important;
-			}
-
-			&.primary {
-				background: var(--primary-background);
-				color: var(--l2-foreground) !important;
-				border: none !important;
-
-				&:hover {
-					color: var(--l1-foreground) !important;
-				}
-			}
-
-			&.outlined {
-				border: none !important;
-				color: var(--l2-foreground) !important;
-
-				&:hover {
-					color: var(--text-robin-400) !important;
-				}
-			}
-
-			&.full-width {
-				width: 100%;
-			}
-		}
-	}
-
-	.onboarding-title,
-	.onboarding-filters-title,
-	.onboarding-filters-item-title {
-		color: var(--l2-foreground) !important;
-
-		&.selected {
-			color: var(--accent-primary) !important;
-		}
-	}
-
-	.onboarding-text {
-		color: var(--l2-foreground);
-	}
-
-	.onboarding-data-source-button {
-		color: var(--l2-foreground);
-		background: var(--l3-background);
-		box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19);
-
-		&:hover {
-			border: 1px solid var(--bg-robin-500) !important;
-			color: var(--text-robin-500) !important;
-			background: var(--l2-background) !important;
-			box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
-		}
-
-		&:active {
-			border: 1px solid var(--bg-robin-500) !important;
-			color: var(--text-robin-500) !important;
-			background: var(--l2-background) !important;
-			box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
-		}
-
-		&:focus {
-			border: 1px solid var(--bg-robin-500) !important;
-			color: var(--text-robin-500) !important;
-			box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
-			background: var(--l2-background) !important;
-		}
-
-		&.selected {
-			border: 1px solid var(--bg-robin-500) !important;
-
-			color: var(--text-robin-500) !important;
-			box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
-			background: var(--l2-background) !important;
-		}
-	}
-
-	.questionaire-footer {
-		background-color: var(--l1-background);
-	}
-
-	.onboarding-configure-product-description {
-		background-color: var(--l1-background);
-	}
-
-	.onboarding-data-source-search {
-		margin-top: 12px;
-		margin-bottom: 24px;
-
-		.ant-input {
-			background: var(--l1-background);
-			border: 1px solid var(--l1-border);
-			height: 40px;
-		}
-	}
-
-	.onboarding-add-data-source-container {
-		.onboarding-question {
-			color: var(--l2-foreground);
-		}
-
-		.question-title {
-			color: var(--l2-foreground);
-		}
-
-		.question-sub-title {
-			color: var(--l2-foreground);
-		}
-	}
-
-	.onboarding-product-setup-container {
-		&_left-section {
-			.perlian-bg {
-				background: radial-gradient(
-					circle,
-					var(--l2-foreground) 10%,
-					transparent 0
-				);
-				background-size: 12px 12px;
-				opacity: 1;
-				-webkit-mask-image: radial-gradient(
-					circle at 50% 0,
-					rgba(255, 255, 255, 0.1) 0,
-					rgba(255, 255, 255, 0) 56.77%
-				);
-			}
-		}
-
-		&_right-section {
-			.invite-user-section-content {
-				.ant-btn {
-					background: var(--l1-foreground);
-				}
-
-				.need-help-section-content-divider {
-					color: var(--l2-foreground);
-				}
-			}
-
-			.need-help-section-content {
-				background: rgba(255, 255, 255, 0.1);
-
-				.ant-typography {
-					color: var(--accent-primary);
-				}
-			}
-
-			.configure-product-ingestion-section-content {
-				.ingestion-endpoint-section {
-					background: var(--l1-foreground);
-					box-shadow: 0px 4px 4px 0px rgba(255, 255, 255, 0.19) inset;
-					border: 1px solid var(--l1-border);
-
-					.ingestion-endpoint-section-header {
-						background-color: var(--l1-foreground);
-					}
-
-					.ingestion-endpoint-info-section {
-						background-color: var(--l1-foreground);
-					}
-
-					.ingestion-endpoint-section-title {
-						background-color: var(--l1-foreground);
-					}
-				}
-
-				.ingestion-key-details-section {
-					background: rgba(255, 255, 255, 1);
-				}
-
-				.ingestion-endpoint-section-error-container {
-					background: var(--l1-foreground);
-				}
-			}
-		}
-	}
-
-	.onboarding-data-source-category-container {
-		.onboarding-data-source-category-item {
-			.ant-typography {
-				color: var(--l2-foreground);
-			}
-		}
-	}
-
-	.onboarding-configure-container {
-		.configure-product-docs-section {
-			border: 1px solid var(--l1-border);
-
-			.loading-container {
-				.loading-text {
-					color: var(--l2-foreground);
-				}
-			}
-		}
-
-		.configure-product-ingestion-section {
-			.configure-product-ingestion-section-content {
-				background-color: var(--l1-foreground);
-			}
-		}
-	}
-
-	.invite-team-member-modal {
-		.ant-modal-content {
-			background-color: var(--l1-background);
-		}
-
-		.ant-modal-title {
-			background-color: var(--l1-background);
-		}
-
-		.invite-team-member-modal-content {
-			background-color: var(--l1-background);
-		}
-	}
-
-	.onboarding-header-container-close-icon {
-		color: var(--l3-background);
-	}
-}

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -215,7 +215,11 @@
 				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: 14px;
 				font-style: normal;
@@ -238,7 +242,11 @@
 				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: 14px;
 				font-style: normal;
@@ -444,129 +452,3 @@
 		width: 100px;
 	}
 }
-
-.lightMode {
-	.datePicker {
-		.ant-picker-panel-container {
-			background: var(--card) !important;
-		}
-	}
-
-	.planned-downtime-container {
-		.planned-downtime-content {
-			.title {
-				color: var(--l1-foreground);
-			}
-
-			.schedule-created-at {
-				border: 1px solid var(--l1-border);
-				background-color: var(--l1-background);
-				.ant-typography {
-					color: var(--l3-foreground);
-				}
-				border-top: 0px !important;
-			}
-		}
-	}
-
-	.planned-downtime-table {
-		.ant-table-tbody {
-			.collapse-list {
-				border: 1px solid var(--l1-border);
-				background-color: var(--l1-background);
-
-				.ant-collapse-content-box {
-					.ant-typography {
-						color: var(--l3-foreground);
-					}
-				}
-
-				.ant-typography {
-					color: var(--l2-foreground);
-				}
-			}
-		}
-	}
-
-	.delete-schedule-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(--l1-background);
-						color: var(--l1-foreground);
-					}
-				}
-			}
-
-			.ant-modal-footer {
-				.cancel-btn {
-					background: var(--l3-background);
-					color: var(--l2-foreground);
-				}
-			}
-		}
-	}
-
-	.createDowntimeModal {
-		.ant-modal-content {
-			border: 1px solid var(--l1-border);
-			background: var(--card);
-
-			.ant-modal-header {
-				background-color: var(--card);
-				.ant-typography {
-					color: var(--l3-foreground);
-				}
-			}
-
-			.ant-modal-body {
-				.ant-divider {
-					border: 0.5px solid var(--l1-border);
-				}
-			}
-		}
-	}
-
-	.createForm {
-		.ant-picker,
-		input {
-			border: 1px solid var(--l1-border);
-			background: var(--l1-background);
-		}
-
-		.ant-picker .ant-picker-input input {
-			border: 0px !important;
-		}
-
-		.ant-select {
-			.ant-select-selector {
-				border: 1px solid var(--l1-border);
-				background: var(--l1-background);
-			}
-		}
-
-		.scheduleTimeInfoText {
-			color: var(--l2-foreground);
-		}
-
-		.alert-rule-info {
-			color: var(--l2-foreground);
-		}
-	}
-}

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -3,7 +3,6 @@ import { CheckOutlined } from '@ant-design/icons';
 import {
 	Button,
 	DatePicker,
-	Divider,
 	Form,
 	FormInstance,
 	Input,
@@ -164,7 +163,7 @@ export function PlannedDowntimeForm(
 									values.timezone,
 									shouldKeepLocalTime,
 								),
-						  )
+							)
 						: undefined,
 					recurrence: values.recurrence as RuletypesRecurrenceDTO,
 				},
@@ -216,7 +215,7 @@ export function PlannedDowntimeForm(
 									timezoneInitialValue,
 									values.timezone,
 									!isEditMode,
-							  )
+								)
 							: undefined,
 						startTime: handleTimeConversion(
 							values.startTime,
@@ -228,7 +227,7 @@ export function PlannedDowntimeForm(
 							? undefined
 							: values.recurrence?.repeatOn,
 						repeatType: values.recurrence?.repeatType,
-				  };
+					};
 
 		const payloadValues = {
 			...values,
@@ -442,11 +441,9 @@ export function PlannedDowntimeForm(
 			centered
 			open={isOpen}
 			className="createDowntimeModal"
-			width={384}
 			onCancel={handleCancel}
 			footer={null}
 		>
-			<Divider plain />
 			<Form<PlannedDowntimeFormData>
 				name={initialValues.editMode ? 'edit-form' : 'create-form'}
 				form={form}

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss

@@ -122,36 +122,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.query-functions-container {
-		.add-function-btn {
-			background-color: var(--l3-background) !important;
-		}
-	}
-
-	.query-functions-list {
-		.query-function {
-			border: 1px solid var(--l1-border);
-			.query-function-name-selector {
-				.ant-select-selector {
-					background: var(--l3-background);
-				}
-			}
-
-			.query-function-value {
-				background: var(--l3-background);
-
-				&:focus {
-					border-color: transparent !important;
-				}
-			}
-
-			&::before,
-			&::after {
-				color: var(--l3-background);
-				background-color: var(--l3-background);
-			}
-		}
-	}
-}

frontend/src/container/QueryBuilder/components/RunQueryBtn/RunQueryBtn.scss

@@ -23,15 +23,8 @@
 	padding: 2px 4px;
 	border-radius: 4px;
 	//not using var here to support opacity 60%. To be handled at design system level.
-	background: color-mix(in srgb, var(--l3-background) 60%, transparent);
+	background: color-mix(in srgb, var(--l1-background) 60%, transparent);
+	color: var(--l1-foreground);
 	line-height: 1;
 	font-size: 10px;
 }
-
-.lightMode {
-	.cmd-hint {
-		color: var(--l2-foreground);
-		//not using var here to support opacity 60%. To be handled at design system level.
-		background: color-mix(in srgb, var(--l3-background) 80%, transparent);
-	}
-}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss

@@ -230,7 +230,7 @@
 			align-items: center;
 			border-radius: 2px 0px 0px 2px;
 			border: 1px solid var(--l1-border);
-			background: var(--l1-border);
+			background: var(--l1-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			padding: 0px;
 
@@ -299,14 +299,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.query-builder-search-v2 {
-		.qb-search-bar-tokenised-tags {
-			.ant-tag {
-				background: var(--l3-background);
-				border-color: var(--l1-border);
-			}
-		}
-	}
-}

frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.styles.scss

@@ -22,12 +22,3 @@
 		margin-bottom: 0;
 	}
 }
-
-.lightMode {
-	.resourceAttributesFilter-container {
-		.resource-attributes-selector {
-			border: 1px solid var(--l1-border);
-			background: var(--l1-background);
-		}
-	}
-}

frontend/src/container/RolesSettings/RoleDetails/RoleDetailsPage.styles.scss

@@ -295,7 +295,9 @@
 	color: var(--destructive);
 	opacity: 0.6;
 	padding: 0;
-	transition: background-color 0.2s, opacity 0.2s;
+	transition:
+		background-color 0.2s,
+		opacity 0.2s;
 	box-shadow: none;
 
 	&:hover {
@@ -371,15 +373,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.role-details-page {
-		.role-details-permission-item {
-			background: rgba(0, 0, 0, 0.04);
-
-			&:hover {
-				background: rgba(0, 0, 0, 0.07);
-			}
-		}
-	}
-}

frontend/src/container/RolesSettings/RolesSettings.styles.scss

@@ -250,16 +250,6 @@
 	}
 }
 
-.lightMode {
-	.roles-table-section-header {
-		background: rgba(0, 0, 0, 0.03);
-	}
-
-	.roles-table-row {
-		background: rgba(0, 0, 0, 0.01);
-	}
-}
-
 .create-role-modal {
 	.ant-modal-content {
 		padding: 0;

frontend/src/container/RoutingPolicies/styles.scss

@@ -353,128 +353,3 @@
 		line-height: 20px; /* 142.857% */
 	}
 }
-
-.lightMode {
-	.routing-policies-container {
-		.routing-policies-content {
-			.title {
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	.routing-policies-table {
-		.ant-table-tbody {
-			.policy-list-item {
-				border: 1px solid var(--l1-border);
-				background-color: var(--l1-background);
-
-				.policy-list-item-header {
-					.ant-typography {
-						color: var(--l2-foreground);
-					}
-				}
-
-				.policy-list-item-content {
-					.policy-list-item-content-row {
-						.ant-typography:first-child {
-							color: var(--l2-foreground);
-						}
-
-						.ant-typography:last-child,
-						div .ant-typography {
-							color: var(--l3-foreground);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.create-policy-modal {
-		.ant-modal-content {
-			border: 1px solid var(--l1-border);
-			background: var(--card);
-
-			.ant-modal-header {
-				background-color: var(--card);
-				.ant-typography {
-					color: var(--l3-foreground);
-				}
-			}
-
-			.ant-modal-body {
-				.ant-divider {
-					border: 0.5px solid var(--l1-border);
-				}
-			}
-		}
-
-		.create-policy-container {
-			.input-group {
-				.ant-typography {
-					color: var(--l3-foreground);
-				}
-
-				.ant-input {
-					border: 1px solid var(--l1-border);
-					background: var(--l1-background);
-				}
-
-				.ant-select {
-					.ant-select-selector {
-						border: 1px solid var(--l1-border);
-						background: var(--l1-background);
-					}
-
-					&.ant-select-focused .ant-select-selector {
-						border-color: var(--l1-border) !important;
-						box-shadow: none !important;
-					}
-
-					&:hover .ant-select-selector {
-						border-color: var(--l1-border) !important;
-					}
-				}
-			}
-		}
-	}
-
-	.delete-policy-modal {
-		.ant-modal-content {
-			border: 1px solid var(--l1-border);
-			background: var(--card);
-
-			.ant-modal-header {
-				background: var(--card);
-			}
-
-			.ant-modal-body {
-				.ant-typography {
-					color: var(--l2-foreground);
-				}
-			}
-
-			.ant-modal-footer {
-				.cancel-btn {
-					background: var(--l3-background);
-					color: var(--l3-foreground);
-				}
-
-				.delete-btn {
-					background: var(--danger-background);
-					color: var(--l1-foreground);
-				}
-
-				.delete-btn:hover {
-					color: var(--l1-foreground);
-					background: var(--bg-cherry-600);
-				}
-			}
-		}
-
-		.title {
-			color: var(--l3-foreground);
-		}
-	}
-}

frontend/src/container/SideNav/SideNav.styles.scss

@@ -19,7 +19,10 @@
 	background: var(--l1-background);
 
 	padding-bottom: 48px;
-	transition: all 0.08s ease, background 0s, border 0s;
+	transition:
+		all 0.08s ease,
+		background 0s,
+		border 0s;
 
 	.brand-container {
 		padding: 8px 15px;
@@ -295,7 +298,9 @@
 					.nav-section-title-icon {
 						display: flex;
 						align-items: center;
-						transition: opacity 0.08s ease, transform 0.08s ease;
+						transition:
+							opacity 0.08s ease,
+							transform 0.08s ease;
 
 						&.reorder {
 							display: none;
@@ -332,7 +337,10 @@
 
 					display: none;
 
-					transition: all 0.08s ease, background 0s, border 0s;
+					transition:
+						all 0.08s ease,
+						background 0s,
+						border 0s;
 					transition-delay: 0.03s;
 				}
 
@@ -456,7 +464,10 @@
 				width: 54px;
 				// width: 100%; // temp
 
-				transition: all 0.08s ease, background 0s, border 0s;
+				transition:
+					all 0.08s ease,
+					background 0s,
+					border 0s;
 
 				background: linear-gradient(
 					180deg,
@@ -573,7 +584,11 @@
 
 		color: var(--primary-foreground);
 		font-variant-numeric: lining-nums tabular-nums slashed-zero;
-		font-feature-settings: 'case' on, 'cpsp' on, 'dlig' on, 'salt' on;
+		font-feature-settings:
+			'case' on,
+			'cpsp' on,
+			'dlig' on,
+			'salt' on;
 		font-family: Inter;
 		font-size: 9px;
 		font-style: normal;
@@ -586,7 +601,11 @@
 	.sidenav-beta-tag {
 		color: var(--l1-foreground);
 		font-variant-numeric: lining-nums tabular-nums slashed-zero;
-		font-feature-settings: 'case' on, 'cpsp' on, 'dlig' on, 'salt' on;
+		font-feature-settings:
+			'case' on,
+			'cpsp' on,
+			'dlig' on,
+			'salt' on;
 		font-family: Inter;
 		font-size: 9px;
 		font-style: normal;
@@ -736,7 +755,8 @@
 						background: var(--l2-background);
 
 						/* Drop Shadow */
-						box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
+						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),
@@ -916,7 +936,8 @@
 						background: var(--l2-background);
 
 						/* Drop Shadow */
-						box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
+						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),
@@ -1024,16 +1045,6 @@
 		width: 360px !important;
 		border-radius: 3px !important;
 
-		// Glass blur
-		// background: rgba(18, 19, 23, 0.6); /* based on #121317 */
-		// backdrop-filter: blur(16px);
-		// -webkit-backdrop-filter: blur(16px);
-		// border: 1px solid color-mix(in srgb, var(--l1-foreground) 8%, transparent);
-		// border-radius: 12px;
-		// box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-		// color: white;
-		// padding: 8px 0;
-
 		.ant-dropdown-menu-item {
 			.ant-dropdown-menu-title-content {
 				color: var(--l2-foreground);
@@ -1285,225 +1296,6 @@
 	background-color: var(--secondary) !important;
 }
 
-.lightMode {
-	.sideNav {
-		background: var(--l1-background);
-		border-right: 1px solid var(--l1-border);
-
-		.brand {
-			.brand-logo {
-				.brand-logo-name {
-					color: var(--l1-foreground);
-				}
-			}
-
-			.brand-title-section {
-				.license-type {
-					background: var(--l3-background);
-					color: var(--l1-foreground);
-				}
-
-				.version-container {
-					background: var(--l3-background);
-				}
-
-				.version {
-					color: var(--l1-foreground);
-				}
-			}
-		}
-
-		.get-started-nav-items {
-			.get-started-btn {
-				border: 1px solid var(--l1-border);
-				background: var(--l2-background);
-				color: var(--l1-foreground);
-
-				svg {
-					color: var(--l1-foreground);
-				}
-
-				.nav-item-label {
-					color: var(--l1-foreground);
-				}
-
-				// Hover state (light mode)
-				&:hover:not(:disabled) {
-					background: var(--l3-background);
-					border-color: var(--l1-border);
-
-					color: var(--l1-foreground);
-
-					svg {
-						color: var(--l1-foreground);
-					}
-
-					.nav-item-label {
-						color: var(--l1-foreground);
-					}
-				}
-			}
-		}
-
-		.brand {
-			.brand-logo {
-				.brand-logo-name {
-					color: var(--l1-foreground);
-				}
-			}
-		}
-
-		.brand-container {
-			background: transparent;
-		}
-
-		.nav-wrapper {
-			.nav-top-section {
-				.shortcut-nav-items {
-					.nav-section-title {
-						.nav-section-title-icon {
-							&.reorder {
-								&:hover {
-									color: var(--l1-foreground);
-								}
-							}
-						}
-					}
-				}
-			}
-
-			.secondary-nav-items {
-				border-top: 1px solid var(--l1-border);
-
-				background: linear-gradient(
-					180deg,
-					transparent 0%,
-					var(--l1-background) 27.11%
-				);
-
-				.collapse-expand-handlers {
-					svg {
-						color: var(--l2-foreground);
-						fill: var(--l3-background);
-					}
-				}
-			}
-		}
-
-		&.pinned {
-			.nav-wrapper {
-				.nav-top-section {
-					.shortcut-nav-items {
-						.nav-section-title {
-							.nav-section-title-icon {
-								&.reorder {
-									&:hover {
-										color: var(--l1-foreground);
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-
-		&:not(.pinned):hover,
-		&.dropdown-open {
-			background: var(--l1-background);
-
-			.nav-wrapper {
-				.nav-top-section {
-					.shortcut-nav-items {
-						.nav-section-title {
-							.nav-section-title-icon {
-								&.reorder {
-									&:hover {
-										color: var(--l1-foreground);
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.nav-dropdown-overlay {
-		.ant-dropdown-menu {
-			.ant-dropdown-menu-item {
-				.ant-dropdown-menu-title-content {
-					color: var(--l1-foreground);
-				}
-
-				&:hover:not(.ant-dropdown-menu-item-disabled) {
-					.ant-dropdown-menu-title-content {
-						color: var(--l1-foreground);
-					}
-				}
-			}
-		}
-	}
-
-	.reorder-shortcut-nav-items-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-body {
-				.ant-typography {
-					color: var(--l1-foreground);
-				}
-
-				.reorder-shortcut-nav-items-container {
-					border: 1px solid var(--l1-border);
-
-					.reorder-shortcut-nav-item {
-						border-bottom: 1px solid var(--l1-border);
-
-						.reorder-shortcut-nav-item-icon {
-							color: var(--l1-foreground);
-						}
-
-						.reorder-shortcut-nav-item-label {
-							color: var(--l1-foreground);
-						}
-					}
-				}
-
-				.ant-color-picker-trigger {
-					border: 1px solid var(--l1-border);
-					background: var(--l1-background);
-				}
-			}
-
-			.ant-modal-footer {
-				> button {
-					background: var(--primary-background) !important;
-					color: var(--primary-foreground) !important;
-
-					&.secondary-btn {
-						background-color: var(--l3-background) !important;
-						border: 1px solid var(--l1-border) !important;
-
-						color: var(--l1-foreground) !important;
-					}
-				}
-			}
-		}
-
-		.title {
-			color: var(--l1-foreground);
-		}
-	}
-}
-
 .version-tooltip-overlay {
 	.ant-tooltip-inner {
 		background-color: var(--card);

frontend/src/container/SpanDetailsDrawer/LinkedSpans/LinkedSpans.styles.scss

@@ -50,22 +50,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.linked-spans-container {
-		.item {
-			.item-key {
-				color: var(--l2-foreground);
-			}
-
-			.value-wrapper {
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
-
-				.item-value {
-					color: var(--l2-background);
-				}
-			}
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/NoData/NoData.styles.scss

@@ -18,11 +18,3 @@
 		letter-spacing: -0.07px;
 	}
 }
-
-.lightMode {
-	.no-data {
-		.no-data-text {
-			color: var(--l2-background);
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.styles.scss

@@ -117,7 +117,9 @@
 						color: var(--bg-sakura-400);
 						font-variant-numeric: lining-nums tabular-nums stacked-fractions
 							slashed-zero;
-						font-feature-settings: 'dlig' on, 'salt' on;
+						font-feature-settings:
+							'dlig' on,
+							'salt' on;
 
 						border-radius: 0 50px 50px 0;
 
@@ -193,7 +195,9 @@
 							color: var(--bg-sakura-400);
 							font-variant-numeric: lining-nums tabular-nums stacked-fractions
 								slashed-zero;
-							font-feature-settings: 'dlig' on, 'salt' on;
+							font-feature-settings:
+								'dlig' on,
+								'salt' on;
 						}
 
 						.span-percentile-value-loader {
@@ -289,7 +293,9 @@
 								color: var(--l1-foreground);
 								text-align: right;
 								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: 12px;
 								font-style: normal;
@@ -301,7 +307,10 @@
 								color: var(--l2-foreground);
 								font-variant-numeric: lining-nums tabular-nums stacked-fractions
 									slashed-zero;
-								font-feature-settings: 'dlig' on, 'salt' on, 'ss02' on;
+								font-feature-settings:
+									'dlig' on,
+									'salt' on,
+									'ss02' on;
 								font-family: Inter;
 								font-size: 12px;
 								font-style: normal;
@@ -588,7 +597,9 @@
 					background: color-mix(in srgb, var(--bg-robin-200) 10%, transparent);
 					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: 13px;
 					font-style: normal;
@@ -618,7 +629,9 @@
 		color: var(--l2-foreground);
 		font-variant-numeric: lining-nums tabular-nums stacked-fractions ordinal
 			slashed-zero;
-		font-feature-settings: 'dlig' on, 'salt' on;
+		font-feature-settings:
+			'dlig' on,
+			'salt' on;
 		font-family: Inter;
 		font-size: 12px;
 		font-style: normal;
@@ -629,7 +642,9 @@
 		.span-percentile-tooltip-text-percentile {
 			color: var(--text-sakura-500);
 			font-variant-numeric: lining-nums tabular-nums stacked-fractions slashed-zero;
-			font-feature-settings: 'dlig' on, 'salt' on;
+			font-feature-settings:
+				'dlig' on,
+				'salt' on;
 			font-family: Inter;
 			font-size: 12px;
 		}
@@ -670,34 +685,3 @@
 	align-items: center;
 	gap: 0.5rem;
 }
-
-.lightMode {
-	.span-details-drawer {
-		.span-percentile-values-table-data-row {
-			.dashed-line {
-				border-image: repeating-linear-gradient(
-						to right,
-						var(--l1-border) 0,
-						var(--l1-border) 10px,
-						transparent 10px,
-						transparent 20px
-					)
-					1 stretch;
-			}
-		}
-
-		.current-span-percentile-row {
-			.dashed-line {
-				border-top: 1px dashed var(--primary);
-				border-image: repeating-linear-gradient(
-						to right,
-						var(--primary) 0,
-						var(--primary) 10px,
-						transparent 10px,
-						transparent 20px
-					)
-					1 stretch;
-			}
-		}
-	}
-}

frontend/src/container/SpanDetailsDrawer/SpanLogs/spanLogs.styles.scss

@@ -72,33 +72,3 @@
 		}
 	}
 }
-
-.lightMode {
-	.span-logs {
-		&-empty-content {
-			.description {
-				.no-data-text-1 {
-					color: var(--l2-background);
-
-					.no-data-text-2 {
-						color: var(--l2-background);
-					}
-				}
-			}
-
-			.action-section {
-				.action-btn {
-					border: 1px solid var(--l1-border);
-					background: var(--l3-background);
-					color: var(--l2-background);
-
-					&:hover {
-						border-color: var(--l1-border);
-						background: var(--l2-background);
-						color: var(--l1-background);
-					}
-				}
-			}
-		}
-	}
-}

frontend/src/container/TopNav/AutoRefreshV2/AutoRefreshV2.styles.scss

@@ -55,25 +55,3 @@
 	letter-spacing: -0.07px;
 	justify-content: space-between;
 }
-
-.lightMode {
-	.auto-refresh-root {
-		.ant-popover-inner {
-			border: 1px solid var(--l2-foreground);
-			background: var(--l1-foreground);
-		}
-	}
-
-	.auto-refresh-checkbox {
-		border-bottom: 1px solid var(--l2-foreground);
-		color: var(--l1-border);
-	}
-
-	.refresh-interval-text {
-		color: var(--l2-foreground);
-	}
-
-	.refresh-interval-btns {
-		color: var(--muted-foreground);
-	}
-}

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.styles.scss

@@ -237,62 +237,3 @@
 		}
 	}
 }
-
-// Light mode styles
-.lightMode {
-	.add-span-to-funnel-modal-container {
-		.ant-modal {
-			&-content,
-			&-header {
-				background: var(--l1-foreground);
-			}
-
-			&-title {
-				color: var(--l1-background);
-			}
-
-			&-footer {
-				border-top-color: var(--l1-border);
-				background: var(--l1-foreground);
-				.add-span-to-funnel-modal__discard-button {
-					background: var(--l2-background);
-					color: var(--l1-background);
-				}
-			}
-		}
-	}
-
-	.add-span-to-funnel-modal {
-		&__search-input {
-			background: var(--l1-foreground);
-			border: 1px solid var(--l1-border);
-			color: var(--l1-background);
-
-			input {
-				color: var(--l1-background);
-				background: var(--l1-foreground);
-
-				&::placeholder {
-					color: var(--l2-background);
-				}
-			}
-		}
-
-		&__create-button {
-			background: var(--l3-background);
-			color: var(--l2-background);
-		}
-
-		&__back-button {
-			color: var(--l1-background);
-
-			&:hover {
-				color: var(--l2-background);
-			}
-		}
-
-		&__details h3 {
-			color: var(--l1-background);
-		}
-	}
-}