Skip to content

fix: 深色模式下，比赛编号看不清除 #37

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

Merged
Transparent-fish merged 1 commit into from
Aug 2, 2026
Merged

fix: 深色模式下，比赛编号看不清除 #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion apps/vscode-extension/src/extension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -384,4 +384,4 @@ export async function activate(context: vscode.ExtensionContext) {

export function deactivate() {
log.info("Extension is deactivating...");
}
}
7 changes: 5 additions & 2 deletions packages/ui/src/components/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
return (
<input
ref={ref}
className={`w-full bg-vscode-input-background text-vscode-input-foreground border border-vscode-input-border rounded px-3 py-2
placeholder-vscode-input-placeholder focus:outline-none focus:ring-1 focus:ring-offset-1
className={`w-full bg-vscode-input-background text-vscode-input-foreground border rounded px-3 py-2
border-[var(--vscode-input-border,#6e7681)]
shadow-[inset_0_0_0_1px_var(--vscode-input-border,#6e7681)]
placeholder-vscode-input-placeholder
focus:outline-none focus:ring-2 focus:ring-[var(--vscode-focusBorder,#007fd4)] focus:ring-offset-1
disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
{...props}
/>
Expand Down
6 changes: 4 additions & 2 deletions packages/ui/src/components/Input/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ label, error, className = '', disabled = false, ...props }, ref) => {
const baseStyles = `
block w-full rounded border-vscode-input-border
block w-full rounded
border border-[var(--vscode-input-border,#6e7681)]
shadow-[inset_0_0_0_1px_var(--vscode-input-border,#6e7681)]
bg-vscode-input-background text-vscode-input-foreground
placeholder-vscode-input-placeholder
focus:ring-2 focus:ring-offset-2
focus:ring-2 focus:ring-offset-2 focus:ring-[var(--vscode-focusBorder,#007fd4)]
transition-colors duration-200
form-input
`;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/theme/vscode.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
--vscode-button-secondaryHoverBackground: #45494e;
--vscode-input-background: #3c3c3c;
--vscode-input-foreground: #cccccc;
--vscode-input-border: #3c3c3c;
--vscode-input-border: #6e7681;
--vscode-input-placeholderForeground: #cccccc80;
--vscode-dropdown-background: #3c3c3c;
--vscode-dropdown-foreground: #f0f0f0;
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/theme/vscode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const defaultVSCodeTheme = {
// 输入框相关
'vscode-input-background': '#3c3c3c',
'vscode-input-foreground': '#cccccc',
'vscode-input-border': '#3c3c3c',
'vscode-input-border': '#6e7681',
'vscode-input-placeholderForeground': '#cccccc80',

// 下拉框相关
Expand Down
18 changes: 9 additions & 9 deletions packages/webview/src/WebviewApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
title = "VSCode Extension",
}) => {
const vscode = useVSCode();
const [contest, setContest] = React.useState("abc345");
const [contest, setContest] = React.useState("");
const [tasks, setTasks] = React.useState<Array<{ label: string; value: string; url: string; status?: string }>>([]);
const [selectedTask, setSelectedTask] = React.useState<string>("");
const [problem, setProblem] = React.useState<ContestProblem | null>(null);
Expand Down Expand Up @@ -273,7 +273,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
<div className="font-medium mt-1">获取步骤：</div>
<ol className="list-decimal pl-4 space-y-0.5">
<li>在浏览器中打开 <span className="underline cursor-pointer" onClick={() => vscode.postMessage({ command: "openBrowser", url: "https://atcoder.jp/login" })}>https://atcoder.jp/login</span> 并登录</li>
<li>按 <kbd className="px-1 rounded border border-[var(--vscode-input-border)]">F12</kbd> 打开开发者工具</li>
<li>按 <kbd className="px-1 rounded border border-[var(--vscode-input-border,#6e7681)]">F12</kbd> 打开开发者工具</li>
<li>切换到 <b>Application</b>（Chrome）或 <b>存储</b>（Edge）标签页</li>
<li>左侧找到 <b>Cookies</b> → <b>https://atcoder.jp</b></li>
<li>找到名为 <code className="bg-[var(--vscode-textBlockQuote-background)] px-1 rounded">REVEL_SESSION</code> 的行，双击 <b>Value</b> 列全选复制</li>
Expand All @@ -286,7 +286,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
value={cookieInput}
onChange={(e) => setCookieInput(e.target.value)}
placeholder={hasCookie ? "已保存 Cookie，输入新值可覆盖" : "粘贴 REVEL_SESSION 的 Value"}
className="flex-1 h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
className="flex-1 h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
/>
<Button
onClick={() => {
Expand Down Expand Up @@ -331,8 +331,8 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
value={contest}
onChange={(e) => setContest(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && void loadContest(contest)}
placeholder="输入比赛代号，如 abc345"
className="flex-1 h-[28px] text-[12px]"
placeholder="输入比赛代码，如 abc345"
className="flex-1 h-[28px] text-[12px] bg-white! text-[#000000]! placeholder:text-[#000000]! placeholder:opacity-100! shadow-none!"
disabled={isLoading}
/>
<Button onClick={() => void loadContest(contest)} disabled={isLoading} className="h-[28px] text-[12px]">
Expand Down Expand Up @@ -426,7 +426,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
<select
value={selectedSubmitTask}
onChange={(e) => setSelectedSubmitTask(e.target.value)}
className="w-full h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
className="w-full h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
>
{submitTasks.map((t) => (
<option key={t.value} value={t.value}>{t.label}</option>
Expand All @@ -439,7 +439,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
<select
value={selectedSubmitLanguage}
onChange={(e) => setSelectedSubmitLanguage(e.target.value)}
className="w-full h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
className="w-full h-[28px] text-[12px] px-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)]"
>
{submitLanguages.map((l) => (
<option key={l.id} value={l.id}>{l.label}</option>
Expand All @@ -454,7 +454,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
onChange={(e) => setSourceCode(e.target.value)}
placeholder="在此粘贴或输入代码..."
rows={8}
className="w-full text-[12px] p-2 rounded border border-[var(--vscode-input-border)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)] resize-vertical font-mono"
className="w-full text-[12px] p-2 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none focus:border-[var(--vscode-focusBorder)] resize-vertical font-mono"
/>
</div>

Expand Down Expand Up @@ -610,7 +610,7 @@ const WebviewApp: React.FC<WebviewAppProps> = ({
<select
value={translationMode}
onChange={(e) => setTranslationMode(e.target.value as "api" | "free")}
className="h-[26px] text-[11px] px-1 rounded border border-[var(--vscode-input-border)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none"
className="h-[26px] text-[11px] px-1 rounded border border-[var(--vscode-input-border,#6e7681)] bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] outline-none"
title="翻译模式"
>
<option value="free">免费</option>
Expand Down
Loading