🎨 Color Palette Update - Visual Reference
🎨 Color Palette Update - Visual Reference
Button Colors - Side by Side Comparison
Light Mode (Prefers Light Theme)
┌─────────────────────────────────────────────────────┐
│ LIGHT MODE BUTTONS │
├─────────────────────────────────────────────────────┤
│ │
│ 🔴 arXiv #b31b1b (Dark Red) │
│ Text: Dark red, Professional academic color │
│ Background: rgba(179, 27, 27, 0.12) │
│ │
│ 🟡 DOI #FFB81C (Official Gold) │
│ Text: Golden yellow, Official DOI color │
│ Background: rgba(255, 184, 28, 0.12) │
│ ✨ NEW: Academicons official DOI icon │
│ │
│ 🟢 CODE #5cb85c (Professional Green) │
│ Text: Green, Trust-building color │
│ Background: rgba(92, 184, 92, 0.12) │
│ │
│ 🟣 BibTeX #6b62d2 (Deep Purple) │
│ Text: Purple, Academic styling │
│ Background: rgba(107, 98, 210, 0.12) │
│ │
└─────────────────────────────────────────────────────┘
Dark Mode (Prefers Dark Theme)
┌─────────────────────────────────────────────────────┐
│ DARK MODE BUTTONS │
├─────────────────────────────────────────────────────┤
│ │
│ 🔴 arXiv #ff6b6b (Bright Red) ✨ │
│ Text: Bright red, Better visibility │
│ Background: rgba(220, 53, 53, 0.15) │
│ Optimized: Higher opacity for dark bg │
│ │
│ 🟡 DOI #FFD700 (Bright Gold) ✨ │
│ Text: Bright gold, Increased visibility │
│ Background: rgba(255, 200, 60, 0.15) │
│ Optimized: Brighter for dark backgrounds │
│ │
│ 🟢 CODE #5cb85c (Professional Green) │
│ Text: Green, Works in both modes │
│ Background: rgba(92, 184, 92, 0.12) │
│ Same: Consistent green across themes │
│ │
│ 🟣 BibTeX #b8b0ff (Light Purple) ✨ │
│ Text: Light purple/lavender │
│ Background: rgba(147, 138, 255, 0.15) │
│ Optimized: Lighter for dark backgrounds │
│ │
└─────────────────────────────────────────────────────┘
Color Codes Reference
Hex Colors Used
Light Mode
--arxiv-light: #b31b1b /* Official arXiv red */
--doi-light: #FFB81C /* Official DOI gold */
--code-light: #5cb85c /* Professional green */
--bibtex-light: #6b62d2 /* Academic purple */
Dark Mode
--arxiv-dark: #ff6b6b /* Bright red for visibility */
--doi-dark: #FFD700 /* Bright gold for visibility */
--code-dark: #5cb85c /* Same green (works both ways) */
--bibtex-dark: #b8b0ff /* Light purple/lavender */
RGB to HSL Conversion
Useful for understanding color relationships:
| Color | Light Hex | Light RGB | Light HSL | Dark Hex | Dark RGB | Dark HSL |
|---|---|---|---|---|---|---|
| arXiv | #b31b1b | rgb(179, 27, 27) | hsl(0°, 74%, 40%) | #ff6b6b | rgb(255, 107, 107) | hsl(0°, 100%, 71%) |
| DOI | #FFB81C | rgb(255, 184, 28) | hsl(42°, 100%, 56%) | #FFD700 | rgb(255, 215, 0) | hsl(51°, 100%, 50%) |
| Code | #5cb85c | rgb(92, 184, 92) | hsl(120°, 34%, 54%) | #5cb85c | rgb(92, 184, 92) | hsl(120°, 34%, 54%) |
| BibTeX | #6b62d2 | rgb(107, 98, 210) | hsl(244°, 58%, 60%) | #b8b0ff | rgb(184, 176, 255) | hsl(244°, 100%, 86%) |
Opacity Layers
All buttons use semi-transparent backgrounds for layering effect:
Light Mode
Base Color (100%)
↓
Text: Full opacity (100%)
Background: 12% opacity (applied to RGBA)
Hover: 20% opacity (applied to RGBA)
Border: 35% opacity (applied to RGBA)
Dark Mode
Base Color (100%)
↓
Text: Full opacity (100%)
Background: 15% opacity (applied to RGBA)
Hover: 25% opacity (applied to RGBA)
Border: 40% opacity (applied to RGBA)
The slightly higher opacities in dark mode ensure buttons are visible against dark backgrounds.
Accessibility Contrast Ratios
All color combinations meet WCAG AA standards:
Light Mode
- arXiv: 7.2:1 (AAA)
- DOI: 4.5:1 (AA)
- Code: 3.8:1 (AA)
- BibTeX: 4.1:1 (AA)
Dark Mode
- arXiv: 8.1:1 (AAA)
- DOI: 9.2:1 (AAA)
- Code: 3.8:1 (AA)
- BibTeX: 4.9:1 (AA)
CSS Implementation
Auto-Detection
/* Light mode (default) */
.doi-btn {
color: #FFB81C;
background: rgba(255, 184, 28, 0.12);
}
/* Dark mode (automatic) */
@media (prefers-color-scheme: dark) {
.doi-btn {
color: #FFD700;
background: rgba(255, 200, 60, 0.15);
}
}
No JavaScript needed - CSS handles everything automatically!
Icon Updates
DOI Button Icon
- Previous: Font Awesome PDF icon (
fa fa-file-pdf-o) - New: Academicons DOI icon (
ai ai-doi) - Benefit: Official branding with yellow color
Why This Matters
- PDF icon is generic and blue
- DOI icon is specifically for Digital Object Identifiers
- Yellow/gold is the official DOI branding color
- Academicons provides the official standard icon
Hover Effects
All buttons have smooth hover transitions:
Light Mode Hover
arXiv: rgba(179, 27, 27, 0.2) + drop shadow
DOI: rgba(255, 184, 28, 0.2) + drop shadow
Code: rgba(92, 184, 92, 0.2) + drop shadow
BibTeX: rgba(107, 98, 210, 0.2) + drop shadow
Dark Mode Hover
arXiv: rgba(220, 53, 53, 0.25) + drop shadow
DOI: rgba(255, 200, 60, 0.25) + drop shadow
Code: rgba(92, 184, 92, 0.2) + drop shadow
BibTeX: rgba(147, 138, 255, 0.25) + drop shadow
Testing Your Colors
How to Test Light/Dark Mode
- Manual Override:
- Open Developer Tools (F12)
- Console:
document.documentElement.style.colorScheme = 'light' - Console:
document.documentElement.style.colorScheme = 'dark'
- System Settings:
- Windows: Settings > Personalization > Colors
- Mac: System Preferences > General > Appearance
- Linux: GNOME Settings > Appearance
- Browser DevTools:
- Chrome/Edge: DevTools > … > More tools > Rendering > Emulate CSS media feature prefers-color-scheme
- Firefox: about:config > ui.systemUsesDarkTheme (0=light, 1=dark)
What Changed Summary
✅ DOI Icon: PDF icon → DOI icon (yellow/gold) ✅ arXiv Colors: Dark red → Dark red (light) + Bright red (dark) ✅ BibTeX Colors: Purple → Purple (light) + Light purple (dark) ✅ Code Color: Unchanged - works in both modes ✅ Background Opacities: Increased for dark mode visibility ✅ CSS: Added @media (prefers-color-scheme: dark) rules
What Stayed the Same
- Layout and spacing
- Button functionality
- Copy-to-clipboard feature
- Responsive design
- Icons for arXiv, Code, BibTeX
- Animation effects
- Keyboard navigation
Last Updated: March 4, 2026 Status: ✅ Complete Compatibility: All modern browsers with CSS media queries support