Dark, light mode css.

theme.css

/* @tailwind base;
@tailwind components;
@tailwind utilities; */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root {
	--color-gray-50: #fafafa;
	--color-gray-100: #f6f7f8;
	--color-gray-200: #f1f2f3;
	--color-gray-300: #e9eaec;
	--color-gray-400: #e0e2e5;
	--color-gray-500: #dadce0;
	--color-gray-600: #c5c8ce;
	--color-gray-700: #acb0b9;
	--color-gray-800: #8d93a0;
	--color-gray-900: #626875;
	--color-gray-950: #464a53;

	--color-steel-50: #fcfcfd;
	--color-steel-100: #f9fafb;
	--color-steel-200: #e0e6eb;
	--color-steel-300: #cbd4dc;
	--color-steel-400: #b3bfcc;
	--color-steel-500: #9dadbe;
	--color-steel-600: #8599ad;
	--color-steel-700: #6f879f;
	--color-steel-800: #5c738a;
	--color-steel-900: #4e6174;
	--color-steel-950: #455768;

	--color-sky-50: #e7f0fe;
	--color-sky-100: #cee0fd;
	--color-sky-200: #99befa;
	--color-sky-300: #689ff8;
	--color-sky-400: #327df5;
	--color-sky-500: #0b60ea;
	--color-sky-600: #0a58d6;
	--color-sky-700: #0952c8;
	--color-sky-800: #084ab4;
	--color-sky-900: #0844a6;
	--color-sky-950: #07409c;

	--color-green-50: #f0faea;
	--color-green-100: #e1f6d5;
	--color-green-200: #c5edb0;
	--color-green-300: #a7e486;
	--color-green-400: #8cdc60;
	--color-green-500: #6dd338;
	--color-green-600: #63c82c;
	--color-green-700: #59b428;
	--color-green-800: #50a324;
	--color-green-900: #468e1f;
	--color-green-950: #42861e;

	--color-red-50: #ffe6eb;
	--color-red-100: #ffccd6;
	--color-red-200: #ff9eb2;
	--color-red-300: #fe6c89;
	--color-red-400: #fe3960;
	--color-red-500: #fe093a;
	--color-red-600: #ef0131;
	--color-red-700: #da012c;
	--color-red-800: #c60128;
	--color-red-900: #ad0123;
	--color-red-950: #a30121;

	--color-yellow-50: #ffeee5;
	--color-yellow-100: #ffddcc;
	--color-yellow-200: #ffbb99;
	--color-yellow-300: #ff9966;
	--color-yellow-400: #ff7733;
	--color-yellow-500: #ff5500;
	--color-yellow-600: #f05000;
	--color-yellow-700: #e04b00;
	--color-yellow-800: #d14600;
	--color-yellow-900: #c24100;
	--color-yellow-950: #bd3f00;

	--color-yellow-50: #fffcf0;
	--color-yellow-100: #fff7d6;
	--color-yellow-200: #fff0ae;
	--color-yellow-300: #fee780;
	--color-yellow-400: #fede4d;
	--color-yellow-500: #fed216;
	--color-yellow-600: #f9cb01;
	--color-yellow-700: #eabf01;
	--color-yellow-800: #e4bb01;
	--color-yellow-900: #d5ae01;
	--color-yellow-950: #d0aa01;
}

:root {
	/* page */
	--font-family: 'Poppins', Arial, Helvetica, sans-serif;
	--font-family-code: 'JetBrains Mono', 'Fira Code', monospace;
	--font-size: 16px;
	--border-radius: 6px;
	--button-border-radius: 10px;

	/* scrollbar */
	--scrollbar-width: 10px;
	--scrollbar-bg-thin: #e6e6e6;
	--scrollbar-thumb-thin: #6dd338; /* Green #BBFD38; Orange #6DD338; #fa8618 */

	/* inputs */
	--input-border-radius: 10px;
	--input-background-color: var(--bg-third);
	--input-border-color: var(--divider-primary);
	--input-label-color: var(--text-third);

	--input-alert-error: #fe093a;
	--input-alert-error-bg: linear-gradient(
		to right,
		#fe093a15,
		#fe093a06
	);

	--input-alert-info: #55cc55;
	--input-alert-info-bg: linear-gradient(
		to right,
		#55cc5515,
		#55cc5506
	);
}

/* color mode default settings */
:root {
	color-scheme: light;
	--bg-primary: #fff;
	--bg-secondary: #f5f6fa;
	--bg-third: #fafafb;
	--text-primary: #0d0d0d;
	--text-secondary: #73747a; /* #454850; */
	--text-third: #5f6368; /* #b3b3b3; #D4D7D0 */
	--accent-primary: #6dd338;
	--accent-secondary: #71e935;
	--divider-primary: #dadce0; /* #e7e7e9; #D8DAD5; */
	--text-disabled: #999;
	--btn-gray: #f9f9f9;
	--placeholder: #ddd;
	--logo: url('/default/logo/logo-light.png');
}

/* color mode from browser settings */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--bg-primary: #202331;
		--bg-secondary: #232634;
		--bg-third: #262a3a;
		--text-primary: #fff;
		--text-secondary: #9da2b9;
		--text-third: #666c88;
		--accent-primary: #6dd338;
		--placeholder: #2d3145;
		--code-border: #2d3145;
		--divider-primary: #2d3145;
		--text-disabled: #999;
		--btn-gray: #717171;
		--logo: url('/default/logo/logo-dark.png');
		--input-background-color: var(--bg-third);
		--input-border-color: var(--divider-primary);
		--input-label-color: var(--text-third);
	}
}

/* color mode from html tag attribute */
[color-scheme='light'] {
	color-scheme: light;
	--bg-primary: #fff;
	--bg-secondary: #f5f6fa;
	--bg-third: #fafafb;
	--text-primary: #0d0d0d;
	--text-secondary: #73747a; /* #454850; */
	--text-third: #5f6368; /* #b3b3b3; #d4d7d0; */
	--accent-primary: #6dd338;
	--accent-secondary: #71e935;
	--divider-primary: #dadce0; /* #e7e7e9; #d8dAd5; #d4d7d0; d9d9d9 */
	--text-disabled: #999;
	--btn-gray: #f9f9f9;
	--placeholder: #ddd;
	--logo: url('/default/logo/logo-light.png');
}

[color-scheme='dark'] {
	color-scheme: dark;
	--bg-primary: #202331;
	--bg-secondary: #232634;
	--bg-third: #262a3a;
	--text-primary: #fff;
	--text-secondary: #9da2b9;
	--text-third: #666c88;
	--accent-primary: #6dd338;
	--placeholder: #2d3145;
	--code-border: #2d3145;
	--divider-primary: #2d3145;
	--text-disabled: #999;
	--btn-gray: #717171;
	--logo: url('/default/logo/logo-dark.png');
	--input-background-color: var(--bg-third);
	--input-border-color: var(--divider-primary);
	--input-label-color: var(--text-third);
}

p {
	font-family: var(--font-family);
}

img,
svg {
	display: inline-block;
	max-width: 100%;
}

iframe {
	color-scheme: light !important;
}

* {
	outline: 0px none transparent;
	box-sizing: border-box;
	text-decoration: none;
}

::before,
::after {
	box-sizing: border-box;
	content: none;
}

::placeholder {
	color: var(--placeholder);
	opacity: 1;
}

::selection {
	background: #0e7aff;
	color: #fff;
}

#app {
	overflow: hidden;
	padding: 0px;
	margin: 0px;
}

html,
body {
	margin: 0px;
	padding: 0px;
	min-height: 100vh;
	font-size: var(--font-size);
	font-family: var(--font-family);
	background: var(--bg-primary);
	transition: all 0.5s;
}

html {
	overflow-y: scroll;
}

/* panel scrollbar */
.scrollbar-thin {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb-thin)
		var(--scrollbar-bg-thin);
}

.scrollbar-thin::-webkit-scrollbar {
	width: var(--scrollbar-width);
	background: var(--scrollbar-thumb-thin);
}

.scrollbar-thin::-webkit-scrollbar-thumb {
	background: var(--scrollbar-bg-thin);
}

/* page */
.section {
	float: left;
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.section-center {
	margin: 0px auto;
	height: auto;
	width: 90%;
	max-width: 1120px;
}