There are some minor discrepancies. Window titlebars weren't gradient in Win98 - that came in Win2k and WinME. The combobox dropdown has rounded ages (Win11 + Edge) and there's a gap between it and the textbox. The tree view has different widths for "+" and "-" on the nodes, and neither is properly aligned with the dotted lines of the tree.
The biggest giveaway, though, is that you can drag to highlight text pretty much anywhere.
Win32 GUI wasn't composited until Vista, so it was all GDI 2D primitives rendered directly to the framebuffer. These could be accelerated, but I don't recall any case where some GDI feature would be unavailable if hardware didn't accelerate it - all primitives had software implementations, it just wouldn't be as fast.
However, now that I think about it, such gradient bars must have required at least 16-bit color to work without dithering, so they were probably turned off by default for anything lower. And, at the time, budget video cards had limits on color depth in higher resolutions - e.g. for S3 Trio, if I remember correctly, you got a max of 24-bit color at 800x600, 16-bit at 1024x768, and 8-bit at 1280x1024; you could see the color depth combo box switch as you dragged the resolution slider. So I probably just ran it at 8-bit depth then.
I think they were disabled for 16 color mode, but on 256 colors they were rendered with dithering, which looked kinda cool. I distinctly remember it from playing rollercoaster tycoon; the game ran in 8bpp mode and used the system open/save dialogs.
Styling drop-down contents in most modern browsers os either very limited or impossible. That's why so many UI frameworks reimplement them from scratch, usually with the help of JavaScript
I noticed that too! I wonder what's happening there. I searched the CSS and there's nothing like green in there... Anyone have clues as to what's causing the text within textboxes and such to be green?
My guess is subpixel rendering. The single pixel lines ending up halfway across a pixel, activating more green than it intended to do.
This fix (https://stackoverflow.com/a/22925525) removes the green shine despite being prefixed with -webkit. It's not longer a pixel-perfect match with Windows 98, though, so CRT users may notice the difference!
I think this because there have been a plethora of tools and libraries over the decades (think Tk, WxWidgets, and similar) that emulate the native look-and-feel of the OS and I believe a company has to defend it's IP/copyrights otherwise it implicitly loses the ability to do so in the future.
Consequently, this is why companies will so often be quick to "attack" random side projects people do targeting their IP (even very old IP). It isn't necessarily out of a malicious desire so much as a legal requirement. If they don't then a "serious" company can follow suit and then they have no ability to fight it.
Unix Motif, Windows 3/95/98, Classic MacOS... they were all highly usable. I crave the relentlessly, unashamed, unambiguousness of these old UIs, compared to modern UI which has devolved into something just as pretentious as the much hated skeuomorphism stage, only at the other end of the spectrum: extreme aesthetic minimalism at all cost (the user's cost).
The System 7 UI toolkit was underdeveloped, and forced a lot of applications to roll their own controls (with mixed success). The System 8 "Platinum" appearance mostly resolved that, though; I'd point to that as an excellent design for the era.
I am not sure what you meant with underdeveloped, but I felt as time moved on, macOS became kind of cluttered with many small components that (from my POV) didn't add much. Perhaps you feel many of these components added much needed features?
Usability wise, I feel System 7 was the high point of Classic macOS.
The Control Manager in System 7 (and earlier) was pretty barebones in terms of features. Buttons, checkboxes, radio buttons, scroll bars, popup menus, and text fields -- and that was it. A lot of commonly used UI elements, like heavy lines around default buttons or boxes around groups of controls, weren't part of the Control Manager and had to be implemented by individual applications -- and anything more complex like tables or toolbars was right out.
The System 7 version of Control Manager didn't apply much in the way of styling to controls, either. Windows were white; controls were black and white. Scrollbars got a bit of color in System 7, but nothing else did. It was funtional, but it wasn't pretty, and a lot of applications used custom CDEFs to add a bit of shading and color.
I like the SerenityOS design choices. Looks pretty much like a 2001-or-so UI, but adopting more modern design elements (such as, e.g. breadcrumb navigation widgets) where they actually make sense.
They certainly weren’t really a “dark mode” in the modern usage though I thought, they had ridiculously high contrast still around parts of it?
I don’t remember any of those dark presets being that dark either except for the High Contrast one — but this is going to drive me nuts all day now so I’m going to dig through a Win98 VM and see what I can find!
If there’s one that’s a good fit, might be a fun pull request to write for this project :)
You could come close to a proper dark mode, but would fall short. That's with using the color scheme editor in the control panels. I wasted too much time back in '98 trying to make a proper dark mode. Not that we called it that back then.
The downfall was a type of text (body text?) which used the same color as the titlebar. It couldn't be independently set. Was a bit frustrating back then.
There were the high contrast modes back then, but they were too ugly to use unless you needed the contrast.
Yeah that’s exactly what I remembered: you could make some of the UI dark for sure, but it wasn’t a real dark mode like we expect today; there was still a fair bit of light colouring because it didn’t have enough flexibility?
Definitely was stuck with either light coloring somewhere, or difficult to read text. I remember experimenting with different shades of gray for either the background or the text, but couldn't find one which would work on both dark and light backgrounds. And you'd always have a light background popping up somewhere.
In retrospect, it's a little funny. Apparently the coders & designers at Microsoft in the 90's never anticipated someone wanting a mostly dark desktop. They'd come up with crazy color schemes like Hot Dog, but never any gray & black schemes.
No, you could do it. There is the limitation GP mentions, but that just meant you were limited in choice. Like you had to pick a text color that would look good on title bars and on window background.
There was however no reason software had to adhere to that. You were free to make your app as colorful as possible. Some devs were nice enough to set the text color to black but leave everything else to use the system theme, so with your dark theme you end up with a nice black on black. I think there were even some Microsoft apps that shipped with windows that had parts that were just "hard-coded" to a light theme.
Yeah, I do seem te recall dark mode being better for people with... I think it was cataract? Though with that notable exception dark mode is of course entirely superfluous.
You are correct. There was no OOTB dark mode in 1998. I remember it well because I wasted some time every now and then trying to make one using the appearance control panel. It was frustrating because I could come very close to a universal dark mode. But I remember certain types of text couldn't have their color independently set. One of them (body text? can't remember) used the same color as title bars. Which would make it unusable in a proper dark mode.
I guess I was slightly ahead of my time in wanting system wide dark mode. XP with the theming hacks made me very happy.
Microsoft did actually make a "dark" XP theme. It was available "officially" available but they didn't really market it and it had limited adoption. I stumbled upon it and thought I was v cool for using it.
Another problem with this was that some software was just broken. For some reason, some devs explicitly set the text color of labels in their software to black instead of the system default color, but left everything else—including the background—to use the system's color. So you end up with black on black for your dark theme.
DarkReader extension (available
on all browsers) makes everything have DarkMode. Unless you’re visiting a website designed by <canvas /> loving sadists, then you’ll need a welding helmet.
I can imagine this making the internet a little less scary to some legacy users who are still working with ‘98 tech (you would be horrified at how many there are).
Consider that for some people that terrible operating system might have been the first system the have ever used, maybe as a kid.
I (an avid linux user who spends more time in the terminal than on a UI) certainly recall that my first contact with any computer with a keyboard was Windows 95. It was a complete mystery to me. The fascination that unexplainable object had on a 7 year old certainly had an effect on my life.
And guess what I remember? That grey interface with the blue title bar.
So as crappy as it might have been, as ethically unsound as the company who made it might have behaved themselves, the visual likeness of the system of my childhood tingles some old memories. And that is not even remotely odd. People can be nostalgic for literally everything, because we do not long for the old artifacts themselves, but for the feelings, friends and times we might have had when they were around.
For some of us the grey windows of Microsofts operating system have gained symbolic value beyond the aesthetical or functional qualities inherent to the system itself.
Well alright, but I was tech support for many Windows 98 users back in the day and wow did I hate microsoft. It was such a ridiculous mess, like a house of cards. Fix one thing and another broke, cryptic dll packs when installed fixed some problems then needed patching again and again and again. And everyone blamed tech support. We were incompetent, the software came from god. fml I hate that os
Everyone still blames tech support for everything and I think that will likely continue indefinitely regardless of correctness and quality of software.
Just like for someone working at a 90s McDonalds the old architecture might make them want to vomit while for a kid that grew up during that time that architecture might carry good memories for them.
Both (and more) perspectives can be valid at the same time.
First computer I used was running Dos and Windows 3.1.
But my favorite Windows version is XP, I was doing service desk / junior sysadmin at the time and XP was just so easy to work with. You could fix a lot of problems by simply editing the registry or files in the windows folder directly and you could re-image a machine in about 2 minutes. The control panel was really easy to navigate and consistent.
When it comes to look and feel specifically, these days it's not rare for websites and even apps to use styling such that it's impossible to tell a link from a label, and either from a button - everything is flat, and color differences are often deliberately minimal. That was not a problem in Win98 days.
I wouldn't really call this "faithful", I have yet to see actual pixel-perfect recreations of any Windows UI in any form whatsoever, but I'd love to see one.
I wanted to disagree, most likely because I'm one of the few who completely skipped XP jumping straight from 2000 to Vista. But I can't, turns out you are right, on that project page, in isolation, the elements actually do look good! Much better than what I think of when I think "XP" (mostly the task bar, start button and main window decorations I guess)
Well, I am a Mac guy as well, but I did use Windows quite a bit in the past (.NET dev) and I always much preferred the more "serious" aesthetic of Windows 2000 (very similar to 98) than the "toy" aesthetic of Windows XP.
I'm a bit disappointed by the XP version's use of bitmaps for certain elements; it's completely possible to achieve the XP look purely with box-shadow properties.
Very cool! I want a Windows 2000 version of it. I think that was the nicest looking Windows. It is very close to this, but with a slightly different main GUI color. Not a complete gray, but ever so slightly beige. Makes it more pleasant to the eye, IMO.
> I liked rounded corners on Windows XP. It was the only version of Windows that looked professional and nice at the same time.
It's interesting you say that, since I remember back at the time XP was released, so many people complained about how Windows XP had a "Fisher Price" UI that was distinctly non-professional. (Personally, I always liked XP's look.)
Yeah, the huge blue window decoration with the giant red X and to a lesser degree the mismatched scroll bars really gave it a cheap look, IMO. The rest of the GUI design was actually quite nice. Just these extreme primary colors, overly large GUI elements, and mismatched colors did look bad to me.
Now that's a first to me. Like other commenters said, I also think there was nothing nice about Windows XP's theme. It looked clunky and childish. I mean, I know some people who liked it, but never have I heard anyone refer to it as professional looking.
To give it some credit, CRTs handle such contrast quite differently to modern screen technologies. The CRT itself added a tiny bit of colour bleed and blurring and the fact the colour is radiated out (rather than filtered out, like on LCD based technologies) gave it more contrast than you'd think looking at these colours now.
WCAG defines different contrast rules for different font sizes. Thus "colors are colors" is not strictly true when it comes to evaluating contrast.
On an old CRT, this elements were probably huge (measured in centimeters) compared to how I look at them on my 4k screen now. And that matters when talking about contrast.
No, elements were not "huge" on old CRT's. That's just a fact. Absolute text sizes have remained approximately the same. Have you ever used one? Nothing has changed in terms of information density that would lead to higher contrast now being required. To the contrary -- increased sharpness means you might be able to get away with lower density.
Colours on a properly calibrated CRT are indeed the same as on a calibrated LCD. However, most screens in the world are far from calibrated.
CRTs definitely had worse sharpness, but their colour contrast in areas where light and dark were next to each other was better then even some monitors sold today. I think the blur of the CRT screen is essential for the pixel-perfect look of 90s GUIs as they were designed with the colour stretching in mind.
My computer screens have about four or five dimming zones between them at best and this becomes painfully obvious when trying to watch high-contrast imagery. Single-pixel lines also need to align perfectly with the pixels on my screen or require some kind of blurry processing or you'll get weird artifacts (as others mention, this CSS adds a green tint to some LCD displays). When my screen renders mostly black it's black enough, but when it needs to render black lines over a grey background, the result just doesn't work like it would've on a CRT screen, which has an entirely different image buildup.
Sure, I know that HDR screens with 600 nits exist and I know that they're better than any CRT ever produced has ever been, but for most people, those fancy expensive screens are simply out of reach for the majority of people because of their price. The mediocre mid-range screens are what most people actually rely on for their business and that's the painful truth when designing anything. We can compensate for that in our designed by using the higher pixel densities of modern monitors and adding all kinds of effects, but in my experience, this simply wasn't necessary for CRTs exactly because of their flaws.
CRTs have also been obviously superior for quite a lot longer than people seem to remember. The first generations of LCD screens were simply awful to look at. They were unresponsive, bland, had terrible contrast, the colour representations were all over the place because of needing analog to digital conversion, the UIs of the time were all designed with the blurry CRT effect in mind, the viewing angles were atrocious, it was all quite bad unless you went for the top of the market. I'm sure the more modern flat design and newness of these devices made people buy them before they were any good, but back in those days a high-res CRT would've been a far superior option for anyone not constrained by physical space.
I've recently turned on an old flat screen I found lying around at my parents' place that I thought back in the day was a good screen back then. Looking at it with modern eyes, it's absolutely terrible, actually worse than the 90s CRTs I've used.
I appreciate your comments, but I still have literally no idea what you're talking about. I think you might be confusing contrast with something else, but I don't know what.
There's no difference in colors between LCD/CRT, as calibration can be good or bad for either, and you can calibrate yourself. The idea of color contrast between light/dark being better on CRT makes no sense -- the colors are the same, although LCD's are sharper and actually have darker blacks. Dimming zones can similarly only darken blacks even further which is desired for contrast. And when you talk about "Single-pixel lines also need to align perfectly with the pixels on my screen or require some kind of blurry processing" that's to do with anti-aliasing or scaling, none of which have anything to do with CRT/LCD. "Black lines over a grey background" will always be worse, not better, on CRT due to the gray blurring into the black since phosphors "bleed" more. And we're not talking about first-generation LCD's (or first-generation CRT's), we're talking about the regular LCD's that come on average computers today.
It's clear that you genuinely seem to be perceiving some difference that leads to a preference for CRT... but it's definitely not contrast. The only thing I can guess is it's a preference around disliking antialiasing or disliking "jaggies", or scaling modes, or subpixel rendering maybe? All of those are generally adjustable in system settings though. And the only one specific to LCD's is subpixel rendering, and you can always turn that off. (Macs got rid of it years ago already, anyways.)
I mean yes it was black text (0, 0, 0) against light gray background (192, 192, 192) as shown here.
But there's no universe in which that is "laughably low contrast". It's a full three-quarters of maximum contrast (not accounting for gamma). In fact, the WebAIM contrast checker says that's a contrast ratio of 11.54:1 which far surpasses even the AAA standard of 7:1 [1].
So not really sure what you're talking about.
Also, this was only for UX elements in things like dialogs and toolbars. Obviously content areas like inside a text editor were against a white background.
It does pass the old WebAIM contrast test, although that test doesn't consider font size or font weight.
The proposed WCAG 3 contrast test, the Advanced Perceptual Contrast Algorithm, does consider font size and font weight. If I'm reading this correctly, the minimum recommended font size for normal 400 font weight with these colors is 16.75px, and the 11px seen in this 98.css demo is indeed laughably small: https://www.myndex.com/APCA/?BG=dfdfdf&TXT=222222&DEV=G4g&BU...
That said, what I was referring to primarily was the blue text color (#007AFF) against that grey background color (#dfdfdf), but reviewing that now it appears that blue text color is the default button color in iOS Safari, and likely not the intention of the 98.css authors. I'm only seeing this blue color in iOS Safari, so it likely merely indicates some CSS bug somewhere between 98.css and iOS Safari. But for reference, this blue color scores a dreadful 3:1 on the old WebAIM contrast test, and according this this APCA Contrast Calculator is only suitable for 400 font weight at 37px font size: https://www.myndex.com/APCA/?BG=dfdfdf&TXT=007aff&DEV=G4g&BU...
This was my burnout recovery project in April of 2020. Very much a labor of love and a surprising way to realize I still liked programming. I wrote some scattered thoughts here [0]
I also "run" this project quite differently than I usually do - when I receive a pull request instead of merging it I do a quick glance through the user's github to make sure they're not a spammer before giving them _commit access_ and asking them to merge their own PR [1]. It has worked wonders.
> This was my burnout recovery project in April of 2020.
OS UI projects are actually good for this. Back in the day, when Classic Mac OS was customizable thanks to its Theme Manager, I went through a few Kaleidoscope schemes for the same reason. Very therapeutical.
Strongly agree. Theming in general is a fantastic way to do what you're good at (code and design) but have more agency than "write a test and code that passes it". My goto used to be 3DS home screen themes.
This is awesome that it was so therapeutic to you! I have several such personal projects that I occasionally work on for similar reasons, moreover to experience the joy of pure programming as opposed to the daily BS I deal with.
One critique (more of a suggested improvement) - the dropdown boxes don’t look/behave as they did in Win 98. They actually render as native select tags on my browser when focused and it kind of breaks the immersion. I’m pretty sure implementing this to simulate the 98 version would be a bit difficult and would involve some JavaScript (which I know you want to avoid), but it may be a neat challenge to tinker with.
Although I agree that it breaks immersion but using JS would certainly make this too complicated and probably not worth it, considering it will be buggy for sure.
No - I tend to not take myself too seriously and was very much optimizing for smiles over "usefulness" or "github stars" so it was a self-fulfilling prophecy.
The control panel and menus upon menus upon menus were not very user friendly. The design was built around low-res CRT screens, which very negatively affects modern screens. Hitboxes were often small, especially for the mice at the time. Commonly used UI elements such as the start menu lacked tons of features we take for granted now (searching in the start menu, for example). Icons were low-res and not always clear, though they were made excellently with more care than any other facet of any modern piece of software I can think of. Navigation controls were severely limited, simple things like breadcrumb navigation simply wasn't invented yet.
Windows XP fixed a lot of small issues found in the Win9x/Win2k UI styling. It had its own problems, but going back to the 9x days is not always an improvement.
It says a lot that I find the 9x style so much easier to use than the "modern" flat designs. It's like we're back in the middle of DOS text characters all over again, having UI elements execute actions after you've guessed about what they might do.
As for a modern take on old ideals, the SerenityOS design is an amazing combination of Win9x/Win2k ideas and modern controls. ReactOS is also used to have a new take on the old style, but that has been modernized to Win10-like menu bars in recent releases.
Hmm, am I misparsing the documentation? As far as I can tell from that link,<selectmenu> is actually not yet generally available. (It's also nowhere on MDN.) I was all excited about using it…
<selectmenu> is available in Chromium-based browsers and requires a Canary version as well as the Experimental Web Platform features flag to be enabled in about:flags.
My pet theory is that web.dev exists to raise hype around wildly experimental features and thus put pressure on other browser vendors to implement them.
> styled pop-up menus, which became available recently
It is not available in any mainline browser to my knowledge. It's still under development, and requires a flag to be set to use: https://open-ui.org/prototypes/selectmenu
I think, we'll see broader support soon. It's probably worth waiting, since it's a better solution than any homegrown code, regarding accessibility and overall robustness. (Worst case, you just lose some styling.)
That was a nice touch to include the gradient title bar. I always thought that was a fun feature. Too bad they removed it with Windows 10 / 11 by default.
It’s crazy to see this and realize how much current Windows is unusable. I haven’t used Windows in ~10 years and every time I see the current interface I can’t believe someone is able to use it without losing their mind.
Me, I used Windows for years until ~2008. In 2008 I started using both Mac and Windows. In 2010 I started using Linux, Mac, and Windows. I never really found one better than another. Each one had their strengths, none of them had huge UI issue for me at least.
For example, one plus I find on Windows vs MacOS is I use Chrome with multiple profiles. Windows is able to display an icon per profile in the dock. Mac is not (not idea if this is a limitation of MacOS or Chrome on MacOS)
Another plus I find on Windows is zip support is better. On Mac, to use a zip you double click it and the OS uncompresses the zip. On Windows you double click it and Windows Explorer just looks inside the zip like it's a folder. You can directly copy and paste, or drag and drop, files out of the zip into other folders or apps, no need to first unzip it.
I'm not saying Windows is better, just different. Windows 11 cleaned some things up. Explorer is streamlined compared to 10 for example.
Plenty of things I like on Mac, like Terminal with bash or zsh vs Powershell on Windows (though I can run WSL but for actual windows stuff I usually stick to powershell). Airplay I use often to stream to my TV.
For me the taskbar in W11 is a giant step back, all windows are collapsed into a group. No idea why they removed the ability to keep them expanded other than trying to mimic the look of OSX
My favorite part of Windows is how it likes to add new features and demand my attention. And constantly use tons of cycles on VMs that aren't doing any work. And the bifurcated GUI configuration.
> For example, one plus I find on Windows vs MacOS is I use Chrome with multiple profiles. Windows is able to display an icon per profile in the dock. Mac is not (not idea if this is a limitation of MacOS or Chrome on MacOS)
I have a strong feeling that this is Chrome's limitation. The builtin Activity Monitor on macOS can even plot a realtime graph of CPU usage in the dock icon, and various other apps (including third party) are able to alter their own icon as well, so this doesn't look like a private API. Having two separate instances of an app in the dock is achievable with minimal hackery (I managed to do this a couple of times by accident, just by poking at and exploring the system).
Of course nothing helps if the app doesn't want to go the extra mile to integrate with the platform, which is how we keep ending up with the lowest common denominators for everything.
The port of VS to WPF was definitely not a showcase for WPF capabilities. Pretty much everything was worse or slower after the port. And a ton of features was missing. Even now the customization of toolbars is not as elegant as it was on 2008. Not a surprise that they didn’t use XAML for any other big application
> Not a surprise that they didn’t use XAML for any other big application
UWP/WinUI/Metro uses XAML and Microsoft was very committed to that for a while. UWP didn't really pan out, but that was for reasons other than XAML and WinUI IMO.
I have more or less this theme on my linux installation. It’s both nostalgic and very useable. Just need a slight update for high dpi, since the buttons are a tad hard to click.
Great work! What strikes me the most is how accessible the components are. So easy to make out the different states of each component at a glance. Would love to actually build something with this!
It ran on one of my laptops for many years without any problems.
One strange thing: that laptop seemed to have a rare chipset and Vista was the only OS that came with the correct drivers for power management. I spent several weeks in vain trying to persuade other operating systems (tried old and new versions of Windows and Linux, various drivers and configuration hacks) not to turn the thing into a heater even at 0% CPU load.
Pretty sad. The hardware is still fully functional.
When I click one of the "Click me", "Submit", "Preset" buttons in Components/Button section, entire page jumps with 1 pixel. Looks bad.
Checkbox labels text is selectable. Should not happen in UI. Same about title bars. Title bars also do not set cursor: pointer. Also happens in some other components.
Dropdown contents have wrong colors. I think they use default browser styling or something like that.
Those are minor nitpicks, of course. This style is very nostalgic, thanks for making it. I thought about using this kind of UI for some web app, I think I'll reimplement it myself (because that's the fun), but I'll keep this style in mind.
184 comments
[ 3.2 ms ] story [ 240 ms ] threadThe biggest giveaway, though, is that you can drag to highlight text pretty much anywhere.
https://microsoft.fandom.com/wiki/Windows_98?file=W98-2.png
However, now that I think about it, such gradient bars must have required at least 16-bit color to work without dithering, so they were probably turned off by default for anything lower. And, at the time, budget video cards had limits on color depth in higher resolutions - e.g. for S3 Trio, if I remember correctly, you got a max of 24-bit color at 800x600, 16-bit at 1024x768, and 8-bit at 1280x1024; you could see the color depth combo box switch as you dragged the resolution slider. So I probably just ran it at 8-bit depth then.
[1] https://web.dev/state-of-css-2022/#customizing-select-elemen...
This fix (https://stackoverflow.com/a/22925525) removes the green shine despite being prefixed with -webkit. It's not longer a pixel-perfect match with Windows 98, though, so CRT users may notice the difference!
I think this because there have been a plethora of tools and libraries over the decades (think Tk, WxWidgets, and similar) that emulate the native look-and-feel of the OS and I believe a company has to defend it's IP/copyrights otherwise it implicitly loses the ability to do so in the future.
See: https://www.varnumlaw.com/insights/enforce-your-intellectual...
Consequently, this is why companies will so often be quick to "attack" random side projects people do targeting their IP (even very old IP). It isn't necessarily out of a malicious desire so much as a legal requirement. If they don't then a "serious" company can follow suit and then they have no ability to fight it.
Edit: to be clear, obviously they _can_ sue.
Unix Motif, Windows 3/95/98, Classic MacOS... they were all highly usable. I crave the relentlessly, unashamed, unambiguousness of these old UIs, compared to modern UI which has devolved into something just as pretentious as the much hated skeuomorphism stage, only at the other end of the spectrum: extreme aesthetic minimalism at all cost (the user's cost).
The System 7 UI toolkit was underdeveloped, and forced a lot of applications to roll their own controls (with mixed success). The System 8 "Platinum" appearance mostly resolved that, though; I'd point to that as an excellent design for the era.
Usability wise, I feel System 7 was the high point of Classic macOS.
The System 7 version of Control Manager didn't apply much in the way of styling to controls, either. Windows were white; controls were black and white. Scrollbars got a bit of color in System 7, but nothing else did. It was funtional, but it wasn't pretty, and a lot of applications used custom CDEFs to add a bit of shading and color.
I know you could edit the theme around to set the UI scheme colours to a darker one, but as a kid I could never make it look nice
I don’t remember any of those dark presets being that dark either except for the High Contrast one — but this is going to drive me nuts all day now so I’m going to dig through a Win98 VM and see what I can find!
If there’s one that’s a good fit, might be a fun pull request to write for this project :)
I think this might be it: https://never-obsolete.tumblr.com/post/180144131029/high-con...
edit: yellow and red is from win 3.1's hotdog mode: https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho...
https://hotdoglinux.com/
The downfall was a type of text (body text?) which used the same color as the titlebar. It couldn't be independently set. Was a bit frustrating back then.
There were the high contrast modes back then, but they were too ugly to use unless you needed the contrast.
In retrospect, it's a little funny. Apparently the coders & designers at Microsoft in the 90's never anticipated someone wanting a mostly dark desktop. They'd come up with crazy color schemes like Hot Dog, but never any gray & black schemes.
There was however no reason software had to adhere to that. You were free to make your app as colorful as possible. Some devs were nice enough to set the text color to black but leave everything else to use the system theme, so with your dark theme you end up with a nice black on black. I think there were even some Microsoft apps that shipped with windows that had parts that were just "hard-coded" to a light theme.
I guess I was slightly ahead of my time in wanting system wide dark mode. XP with the theming hacks made me very happy.
https://archive.org/details/WindowsXPRoyaleNoirTheme
I (an avid linux user who spends more time in the terminal than on a UI) certainly recall that my first contact with any computer with a keyboard was Windows 95. It was a complete mystery to me. The fascination that unexplainable object had on a 7 year old certainly had an effect on my life.
And guess what I remember? That grey interface with the blue title bar.
So as crappy as it might have been, as ethically unsound as the company who made it might have behaved themselves, the visual likeness of the system of my childhood tingles some old memories. And that is not even remotely odd. People can be nostalgic for literally everything, because we do not long for the old artifacts themselves, but for the feelings, friends and times we might have had when they were around.
For some of us the grey windows of Microsofts operating system have gained symbolic value beyond the aesthetical or functional qualities inherent to the system itself.
Both (and more) perspectives can be valid at the same time.
But my favorite Windows version is XP, I was doing service desk / junior sysadmin at the time and XP was just so easy to work with. You could fix a lot of problems by simply editing the registry or files in the windows folder directly and you could re-image a machine in about 2 minutes. The control panel was really easy to navigate and consistent.
I really wish XP was still supported.
https://github.com/arturbien/React95
https://github.com/botoxparty/XP.css
https://github.com/Gioni06/terminal.css
https://github.com/jianzhongli/csswin10
https://github.com/khang-nd/7.css
https://github.com/kristopolous/BOOTSTRA.386
https://github.com/lachsfilet/Renkbench
https://github.com/lolstring/window98-html-css-js
https://github.com/micah5/PSone.css
https://github.com/nostalgic-css/NES.css
https://github.com/npjg/classic.css
https://github.com/robbiebyrd/platinum
https://github.com/bryanbraun/after-dark-css
https://github.com/npjg/new-dawn
https://github.com/ritenv/retro-desktop
https://github.com/RoelN/c64css3
https://github.com/sakofchit/system.css
https://github.com/vinibiavatti1/TuiCss
https://code.divshot.com/geo-bootstrap/
Also, agree that Win2000's color scheme was the best looking iteration of the classic Windows look.
No, it just tells a story of what you've been in to years ago.
The color codes burned into my memory are: #aeaedd, #11ff11 and #dddd11. Who wants to guess where these came from?
Windows 10's design is just bland. I don't know why MS went ahead with this soulless design for so many years after Windows 8 came to be.
Windows 11 tries to be nicer but really it's just a fancy cover on legacy designs left over from since Windows 3.1.
My guess is they need it to feel different enough to justify the price tag of a major upgrade.
In reality the changes behind the scene since Windows 7 have been incremental.
It's interesting you say that, since I remember back at the time XP was released, so many people complained about how Windows XP had a "Fisher Price" UI that was distinctly non-professional. (Personally, I always liked XP's look.)
On an old CRT, this elements were probably huge (measured in centimeters) compared to how I look at them on my 4k screen now. And that matters when talking about contrast.
CRTs definitely had worse sharpness, but their colour contrast in areas where light and dark were next to each other was better then even some monitors sold today. I think the blur of the CRT screen is essential for the pixel-perfect look of 90s GUIs as they were designed with the colour stretching in mind.
My computer screens have about four or five dimming zones between them at best and this becomes painfully obvious when trying to watch high-contrast imagery. Single-pixel lines also need to align perfectly with the pixels on my screen or require some kind of blurry processing or you'll get weird artifacts (as others mention, this CSS adds a green tint to some LCD displays). When my screen renders mostly black it's black enough, but when it needs to render black lines over a grey background, the result just doesn't work like it would've on a CRT screen, which has an entirely different image buildup.
Sure, I know that HDR screens with 600 nits exist and I know that they're better than any CRT ever produced has ever been, but for most people, those fancy expensive screens are simply out of reach for the majority of people because of their price. The mediocre mid-range screens are what most people actually rely on for their business and that's the painful truth when designing anything. We can compensate for that in our designed by using the higher pixel densities of modern monitors and adding all kinds of effects, but in my experience, this simply wasn't necessary for CRTs exactly because of their flaws.
CRTs have also been obviously superior for quite a lot longer than people seem to remember. The first generations of LCD screens were simply awful to look at. They were unresponsive, bland, had terrible contrast, the colour representations were all over the place because of needing analog to digital conversion, the UIs of the time were all designed with the blurry CRT effect in mind, the viewing angles were atrocious, it was all quite bad unless you went for the top of the market. I'm sure the more modern flat design and newness of these devices made people buy them before they were any good, but back in those days a high-res CRT would've been a far superior option for anyone not constrained by physical space.
I've recently turned on an old flat screen I found lying around at my parents' place that I thought back in the day was a good screen back then. Looking at it with modern eyes, it's absolutely terrible, actually worse than the 90s CRTs I've used.
There's no difference in colors between LCD/CRT, as calibration can be good or bad for either, and you can calibrate yourself. The idea of color contrast between light/dark being better on CRT makes no sense -- the colors are the same, although LCD's are sharper and actually have darker blacks. Dimming zones can similarly only darken blacks even further which is desired for contrast. And when you talk about "Single-pixel lines also need to align perfectly with the pixels on my screen or require some kind of blurry processing" that's to do with anti-aliasing or scaling, none of which have anything to do with CRT/LCD. "Black lines over a grey background" will always be worse, not better, on CRT due to the gray blurring into the black since phosphors "bleed" more. And we're not talking about first-generation LCD's (or first-generation CRT's), we're talking about the regular LCD's that come on average computers today.
It's clear that you genuinely seem to be perceiving some difference that leads to a preference for CRT... but it's definitely not contrast. The only thing I can guess is it's a preference around disliking antialiasing or disliking "jaggies", or scaling modes, or subpixel rendering maybe? All of those are generally adjustable in system settings though. And the only one specific to LCD's is subpixel rendering, and you can always turn that off. (Macs got rid of it years ago already, anyways.)
I mean yes it was black text (0, 0, 0) against light gray background (192, 192, 192) as shown here.
But there's no universe in which that is "laughably low contrast". It's a full three-quarters of maximum contrast (not accounting for gamma). In fact, the WebAIM contrast checker says that's a contrast ratio of 11.54:1 which far surpasses even the AAA standard of 7:1 [1].
So not really sure what you're talking about.
Also, this was only for UX elements in things like dialogs and toolbars. Obviously content areas like inside a text editor were against a white background.
[1] https://webaim.org/resources/contrastchecker/
The proposed WCAG 3 contrast test, the Advanced Perceptual Contrast Algorithm, does consider font size and font weight. If I'm reading this correctly, the minimum recommended font size for normal 400 font weight with these colors is 16.75px, and the 11px seen in this 98.css demo is indeed laughably small: https://www.myndex.com/APCA/?BG=dfdfdf&TXT=222222&DEV=G4g&BU...
That said, what I was referring to primarily was the blue text color (#007AFF) against that grey background color (#dfdfdf), but reviewing that now it appears that blue text color is the default button color in iOS Safari, and likely not the intention of the 98.css authors. I'm only seeing this blue color in iOS Safari, so it likely merely indicates some CSS bug somewhere between 98.css and iOS Safari. But for reference, this blue color scores a dreadful 3:1 on the old WebAIM contrast test, and according this this APCA Contrast Calculator is only suitable for 400 font weight at 37px font size: https://www.myndex.com/APCA/?BG=dfdfdf&TXT=007aff&DEV=G4g&BU...
This was my burnout recovery project in April of 2020. Very much a labor of love and a surprising way to realize I still liked programming. I wrote some scattered thoughts here [0]
I also "run" this project quite differently than I usually do - when I receive a pull request instead of merging it I do a quick glance through the user's github to make sure they're not a spammer before giving them _commit access_ and asking them to merge their own PR [1]. It has worked wonders.
[0]: https://notes.jordanscales.com/ffa53b57
[1]: https://twitter.com/jdan/status/1528026508564078593
the win 98 there is using css and js. experiments thats aimed at fun is always welcome
https://twitter.com/PCBANGio/status/1493850712471527426
OS UI projects are actually good for this. Back in the day, when Classic Mac OS was customizable thanks to its Theme Manager, I went through a few Kaleidoscope schemes for the same reason. Very therapeutical.
Well done!
One critique (more of a suggested improvement) - the dropdown boxes don’t look/behave as they did in Win 98. They actually render as native select tags on my browser when focused and it kind of breaks the immersion. I’m pretty sure implementing this to simulate the 98 version would be a bit difficult and would involve some JavaScript (which I know you want to avoid), but it may be a neat challenge to tinker with.
Windows 98 dropdowns look like e.g.: https://imgur.com/rVQhAIq
There might be a way: https://web.dev/state-of-css-2022/#customizing-select-elemen...
https://addons.mozilla.org/en-US/firefox/addon/xp-newtab/
The control panel and menus upon menus upon menus were not very user friendly. The design was built around low-res CRT screens, which very negatively affects modern screens. Hitboxes were often small, especially for the mice at the time. Commonly used UI elements such as the start menu lacked tons of features we take for granted now (searching in the start menu, for example). Icons were low-res and not always clear, though they were made excellently with more care than any other facet of any modern piece of software I can think of. Navigation controls were severely limited, simple things like breadcrumb navigation simply wasn't invented yet.
Windows XP fixed a lot of small issues found in the Win9x/Win2k UI styling. It had its own problems, but going back to the 9x days is not always an improvement.
It says a lot that I find the 9x style so much easier to use than the "modern" flat designs. It's like we're back in the middle of DOS text characters all over again, having UI elements execute actions after you've guessed about what they might do.
As for a modern take on old ideals, the SerenityOS design is an amazing combination of Win9x/Win2k ideas and modern controls. ReactOS is also used to have a new take on the old style, but that has been modernized to Win10-like menu bars in recent releases.
(Minor nitpick: I'm missing the combo box, the much discussed genuine UI element of Windows. – Have a look at datalists for input elements.)
[1] https://web.dev/state-of-css-2022/#customizing-select-elemen...
It is not available in any mainline browser to my knowledge. It's still under development, and requires a flag to be set to use: https://open-ui.org/prototypes/selectmenu
It’s crazy to see this and realize how much current Windows is unusable. I haven’t used Windows in ~10 years and every time I see the current interface I can’t believe someone is able to use it without losing their mind.
Me, I used Windows for years until ~2008. In 2008 I started using both Mac and Windows. In 2010 I started using Linux, Mac, and Windows. I never really found one better than another. Each one had their strengths, none of them had huge UI issue for me at least.
For example, one plus I find on Windows vs MacOS is I use Chrome with multiple profiles. Windows is able to display an icon per profile in the dock. Mac is not (not idea if this is a limitation of MacOS or Chrome on MacOS)
Another plus I find on Windows is zip support is better. On Mac, to use a zip you double click it and the OS uncompresses the zip. On Windows you double click it and Windows Explorer just looks inside the zip like it's a folder. You can directly copy and paste, or drag and drop, files out of the zip into other folders or apps, no need to first unzip it.
I'm not saying Windows is better, just different. Windows 11 cleaned some things up. Explorer is streamlined compared to 10 for example.
Plenty of things I like on Mac, like Terminal with bash or zsh vs Powershell on Windows (though I can run WSL but for actual windows stuff I usually stick to powershell). Airplay I use often to stream to my TV.
https://github.com/valinet/ExplorerPatcher
It also brings other Windows 10 UI paradigm's back in.
Most people have been using the taskbar that way for nearly 15 years, only a minority of people would have switched away from the default.
Some things are a dream come true in terms of utility. Others feel really archaic compared to FOSS desktops.
I have a strong feeling that this is Chrome's limitation. The builtin Activity Monitor on macOS can even plot a realtime graph of CPU usage in the dock icon, and various other apps (including third party) are able to alter their own icon as well, so this doesn't look like a private API. Having two separate instances of an app in the dock is achievable with minimal hackery (I managed to do this a couple of times by accident, just by poking at and exploring the system).
Of course nothing helps if the app doesn't want to go the extra mile to integrate with the platform, which is how we keep ending up with the lowest common denominators for everything.
Admittedly I know WPF needs good graphics hardware which I'm sure Citrix is not providing.
I know we need to scale for different screens but the reality is it's slower then ever on faster hardware.
UWP/WinUI/Metro uses XAML and Microsoft was very committed to that for a while. UWP didn't really pan out, but that was for reasons other than XAML and WinUI IMO.
https://khang-nd.github.io/7.css
One strange thing: that laptop seemed to have a rare chipset and Vista was the only OS that came with the correct drivers for power management. I spent several weeks in vain trying to persuade other operating systems (tried old and new versions of Windows and Linux, various drivers and configuration hacks) not to turn the thing into a heater even at 0% CPU load.
Pretty sad. The hardware is still fully functional.
Checkbox labels text is selectable. Should not happen in UI. Same about title bars. Title bars also do not set cursor: pointer. Also happens in some other components.
Dropdown contents have wrong colors. I think they use default browser styling or something like that.
Those are minor nitpicks, of course. This style is very nostalgic, thanks for making it. I thought about using this kind of UI for some web app, I think I'll reimplement it myself (because that's the fun), but I'll keep this style in mind.
Isn’t it better to put the input inside the label tag so you avoid the awkward dead zone between the checkbox and the label text?