Give Your Website A Retro Look

Table of contents

• Terminal Vibes
• Amber Theme
• MS DOS Look
• Allowing users pick a style.

In this tutorial we will look at simple CSS style changes or additions you can make to give your website a retro vibe.

Terminal Vibes

This style gives your website the look of a monochrome green terminal.

Style

✅ Wrap📋
01: * {
02:     background-color: #000 !important;
03:     color: #0f0 !important;
04:     font-family: monospace !important;
05: }
06: 

Amber Theme

This theme is inspired by vintage amber CRT monitors.

Style

✅ Wrap📋
01: * {
02:   background-color: #1a0f00 !important;
03:   color: #ffb000 !important;
04:   font-family: monospace !important;
05: }
06: 

MS DOS Look

This one gives your the MS DOS blue screen, white text vibe.

Style

✅ Wrap📋
01: * {
02:   background-color: #0000aa !important;
03:   color: #aaaaaa !important;
04:   font-family: monospace !important;
05: }

The Asterisks (*) allows for the style to be applied to every element where the font, background, and foreground properties can be changed. Also, some of the styles might not take effect if you already applied the important! flag to any of the properties in your existing CSS.

Allowing users pick a style.

The script below adds a selector to allow users pick their prefered style.

The chosen style is stored in localstorage and applied whenever the page is loaded.

✅ Wrap📋
01: <!-- Theme selector -->
02: <select id="retro-theme-selector">
03:   <option value="">Select a Retro look</option>
04:   <option value="green">Terminal</option>
05:   <option value="amber">Amber</option>
06:   <option value="blue">DOS</option>
07: </select>
08: 
09: <!-- Script -->
10: <script>
11: (function() {
12:   const styles = {
13:     green:  { bg: '#000',    color: '#0f0',    font: 'monospace' },
14:     amber:  { bg: '#1a0f00', color: '#ffb000', font: 'monospace' },
15:     blue:   { bg: '#0000aa', color: '#aaaaaa', font: 'monospace' }
16:   };
17: 
18:   const applyTheme = (theme) => {
19:     const selectedStyle = styles[theme];
20:     if (!selectedStyle) return;
21:     document.body.style.cssText = `
22:       background:${selectedStyle.bg}!important;
23:       color:${selectedStyle.color}!important;
24:       font-family:${selectedStyle.font}!important;
25:     `;
26:     document.querySelectorAll('*').forEach(e => {
27:       e.style.cssText += `
28:         background:${selectedStyle.bg}!important;
29:         color:${selectedStyle.color}!important;
30:         font-family:${selectedStyle.font}!important;
31:       `;
32:     });
33:     localStorage.setItem('retroTheme', theme);
34:   };
35: 
36:   const menu = document.getElementById('retro-theme-selector');
37:   if (!menu) return;
38: 
39:   menu.addEventListener('change', e => {
40:     if (e.target.value) applyTheme(e.target.value);
41:   });
42: 
43:   // Apply selected theme
44:   const saved = localStorage.getItem('retroTheme');
45:   if (saved) {
46:     applyTheme(saved);
47:     if (menu) menu.value = saved;
48:   }
49: })();
50: </script>

Enjoy! :)

Here is another article you might like 😊 Automatically Fetch And Update Yahoo Finance Data In Excel