Skip to content

Allow changing tailwindcss colors by using css variables #233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zvikasdongre wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Allow changing tailwindcss colors by using css variables #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
49f9526
feat: theme tailwindcss colors via css variables
zvikasdongre Sep 1, 2026
9372c9d
fix: remove unnecessary option in package.json and rearrange vars
zvikasdongre Sep 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@
"@heroicons/react": "^1.0.6",
"@hot-loader/react-dom": "^16.14.0",
"@preact/signals-react": "^1.2.1",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/line-clamp": "^0.4.0",
"@tailwindcss/forms": "^0.5.10",
"axios": "^1.13.2",
"boring-avatars": "^1.7.0",
"chart.js": "^3.8.0",
Expand Down Expand Up @@ -46,7 +45,7 @@
"styled-components": "5.2.1",
"styled-components-breakpoint": "^3.0.0-preview.20",
"swr": "^0.2.3",
"tailwindcss": "3.0.24",
"tailwindcss": "3.4.17",
"use-fit-text": "^2.4.0",
"uuid": "^13.0.0",
"xterm": "^4.19.0",
Expand Down Expand Up @@ -95,7 +94,7 @@
"@types/yup": "^0.29.3",
"@typescript-eslint/eslint-plugin": "^5",
"@typescript-eslint/parser": "^5",
"autoprefixer": "^10.4.7",
"autoprefixer": "^10.4.20",
"babel-jest": "^28.1.1",
"babel-loader": "8.2.5",
"babel-plugin-styled-components": "^2.0.7",
Expand All @@ -122,7 +121,7 @@
"terser-webpack-plugin": "^5.3.14",
"ts-essentials": "^9.1.2",
"ts-jest": "^28.0.5",
"twin.macro": "^2.8.2",
"twin.macro": "^3.4.1",
"typescript": "~5.1.0",
"webpack": "^5.103.0",
"webpack-assets-manifest": "^6.4.0",
Expand All @@ -146,12 +145,13 @@
],
"babelMacros": {
"twin": {
"preset": "styled-components"
"preset": "styled-components",
"config": "./tailwind.config.js"
},
"styledComponents": {
"pure": true,
"displayName": true,
"fileName": true
}
}
}
}
90 changes: 90 additions & 0 deletions resources/scripts/assets/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--tw-white: 0 0% 100%;
--tw-black: 208 25.5% 10%;

--tw-gray-50: 216 33% 97%;
--tw-gray-100: 214 15% 91%;
--tw-gray-200: 210 16% 82%;
--tw-gray-300: 211 13% 65%;
--tw-gray-400: 211 10% 53%;
--tw-gray-500: 211 12% 43%;
--tw-gray-600: 209 14% 37%;
--tw-gray-700: 209 18% 30%;
--tw-gray-800: 209 20% 25%;
--tw-gray-900: 210 24% 16%;

--tw-red-50: 0 85.7% 97.3%;
--tw-red-100: 0 93.3% 94.1%;
--tw-red-200: 0 96.3% 89.4%;
--tw-red-300: 0 93.5% 81.8%;
--tw-red-400: 0 90.6% 70.8%;
--tw-red-500: 0 84.2% 60.2%;
--tw-red-600: 0 72.2% 50.6%;
--tw-red-700: 0 73.7% 41.8%;
--tw-red-800: 0 70% 35.3%;
--tw-red-900: 0 62.8% 30.6%;
--tw-red-950: 0 74.7% 15.5%;

--tw-green-50: 138 76.5% 96.7%;
--tw-green-100: 141 84.2% 92.5%;
--tw-green-200: 141 78.9% 85.1%;
--tw-green-300: 142 76.6% 73.1%;
--tw-green-400: 142 69.2% 58%;
--tw-green-500: 142 70.6% 45.3%;
--tw-green-600: 142 76.2% 36.3%;
--tw-green-700: 142 71.8% 29.2%;
--tw-green-800: 143 64.2% 24.1%;
--tw-green-900: 144 61.2% 20.2%;
--tw-green-950: 145 80.4% 10%;

--tw-blue-50: 214 100% 96.9%;
--tw-blue-100: 214 94.6% 92.7%;
--tw-blue-200: 213 96.9% 87.3%;
--tw-blue-300: 212 96.4% 78.4%;
--tw-blue-400: 213 93.9% 67.8%;
--tw-blue-500: 217 91.2% 59.8%;
--tw-blue-600: 221 83.2% 53.3%;
--tw-blue-700: 224 76.3% 48%;
--tw-blue-800: 226 70.7% 40.2%;
--tw-blue-900: 224 64.3% 32.9%;
--tw-blue-950: 226 57% 21%;

--tw-cyan-50: 183 100% 96.3%;
--tw-cyan-100: 185 95.9% 90.4%;
--tw-cyan-200: 186 93.5% 81.8%;
--tw-cyan-300: 187 92.4% 69%;
--tw-cyan-400: 188 85.7% 53.3%;
--tw-cyan-500: 189 94.5% 42.7%;
--tw-cyan-600: 192 91.4% 36.5%;
--tw-cyan-700: 193 82.3% 31%;
--tw-cyan-800: 194 69.6% 27.1%;
--tw-cyan-900: 196 63.6% 23.7%;
--tw-cyan-950: 197 78.9% 14.9%;

--tw-yellow-50: 54.5 91.7% 95.3%;
--tw-yellow-100: 54.9 96.7% 88%;
--tw-yellow-200: 52.8 98.3% 76.9%;
--tw-yellow-300: 50.4 97.8% 63.5%;
--tw-yellow-400: 47.9 95.8% 53.1%;
--tw-yellow-500: 45.4 93.4% 47.5%;
--tw-yellow-600: 40.6 96.1% 40.4%;
--tw-yellow-700: 35.5 91.7% 32.9%;
--tw-yellow-800: 31.8 81% 28.8%;
--tw-yellow-900: 28.4 72.5% 25.7%;
--tw-yellow-950: 26 83.3% 14.1%;

--chart-grid: hsl(var(--tw-gray-700));
--chart-ticks: hsl(var(--tw-gray-200));
--chart-graph-border: hsl(var(--tw-cyan-400));
--chart-graph-bg: hsl(var(--tw-cyan-700) / 0.5);
--chart-nwIn-border: hsl(var(--tw-cyan-400));
--chart-nwIn-bg: hsl(var(--tw-cyan-700) / 0.5);
--chart-nwOut-border: hsl(var(--tw-yellow-400));
--chart-nwOut-bg: hsl(var(--tw-yellow-700) / 0.5);
}
}
4 changes: 2 additions & 2 deletions resources/scripts/components/server/console/Console.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ import 'xterm/css/xterm.css';
import styles from './style.module.css';

const theme = {
background: th`colors.black`.toString(),
background: 'transparent',
cursor: 'transparent',
black: th`colors.black`.toString(),
black: '#000000',
red: '#E54B4B',
green: '#9ECE58',
yellow: '#FAED70',
Expand Down
100 changes: 100 additions & 0 deletions resources/scripts/components/server/console/StatGraphs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import React, { useEffect, useRef } from 'react';
import { ServerContext } from '@/state/server';
import { SocketEvent } from '@/components/server/events';
import useWebsocketEvent from '@/plugins/useWebsocketEvent';
import { Line } from 'react-chartjs-2';
import { useChart, useChartTickLabel } from '@/components/server/console/chart';
import { hexToRgba } from '@/lib/helpers';
import { bytesToString } from '@/lib/formatters';
import { CloudDownloadIcon, CloudUploadIcon } from '@heroicons/react/solid';
import { theme } from 'twin.macro';
import ChartBlock from '@/components/server/console/ChartBlock';
import Tooltip from '@/components/elements/tooltip/Tooltip';

export default () => {
const status = ServerContext.useStoreState((state) => state.status.value);
const limits = ServerContext.useStoreState((state) => state.server.data!.limits);
const previous = useRef<Record<'tx' | 'rx', number>>({ tx: -1, rx: -1 });

const cpu = useChartTickLabel('CPU', limits.cpu, '%', 2);
const memory = useChartTickLabel('Memory', limits.memory, 'MiB');
const network = useChart('Network', {
sets: 2,
options: {
scales: {
y: {
ticks: {
callback(value) {
return bytesToString(typeof value === 'string' ? parseInt(value, 10) : value);
},
},
},
},
},
callback(opts, index) {
var style = getComputedStyle(document.body);
var nwInBorder = style.getPropertyValue('--chart-nwIn-border');
var nwInBG = style.getPropertyValue('--chart-nwIn-bg');
var nwOutBorder = style.getPropertyValue('--chart-nwOut-border');
var nwOutBG = style.getPropertyValue('--chart-nwOut-bg');

return {
...opts,
label: !index ? 'Network In' : 'Network Out',
borderColor: !index ? nwInBorder : nwOutBorder,
backgroundColor: !index ? nwInBG : nwOutBG,
};
},
});

useEffect(() => {
if (status === 'offline') {
cpu.clear();
memory.clear();
network.clear();
}
}, [status]);

useWebsocketEvent(SocketEvent.STATS, (data: string) => {
let values: any = {};
try {
values = JSON.parse(data);
} catch (e) {
return;
}
cpu.push(values.cpu_absolute);
memory.push(Math.floor(values.memory_bytes / 1024 / 1024));
network.push([
previous.current.tx < 0 ? 0 : Math.max(0, values.network.tx_bytes - previous.current.tx),
previous.current.rx < 0 ? 0 : Math.max(0, values.network.rx_bytes - previous.current.rx),
]);

previous.current = { tx: values.network.tx_bytes, rx: values.network.rx_bytes };
});

return (
<>
<ChartBlock title={'CPU Load'}>
<Line {...cpu.props} />
</ChartBlock>
<ChartBlock title={'Memory'}>
<Line {...memory.props} />
</ChartBlock>
<ChartBlock
title={'Network'}
legend={
<>
<Tooltip arrow content={'Inbound'}>
<CloudDownloadIcon className={'mr-2 w-4 h-4 text-yellow-400'} />
</Tooltip>
<Tooltip arrow content={'Outbound'}>
<CloudUploadIcon className={'w-4 h-4 text-cyan-400'} />
</Tooltip>
</>
}
>
<Line {...network.props} />
</ChartBlock>
</>
);
};
Loading
Loading