Table Themes

[Alisae]

I'm starting to use the use of tables in mafia games rise (as seen in a lot of NSG's most recent games)

So I made some tables with the goal of them looking nice and being able to contrast and easy on the eyes.

If you want to make some to contribute as well (since I only made dark themed ones), all it takes is trying to find a contrast.


Table color backgrounds should be fairly dark or a de-saturated light tone (I linked to a game where I used some light tones, the green and red ones should definitely work, but feel free to darken them a bit)

Now, if you are working with a darker background, use a lighter text color. Lighter backgrounds should be used with darker text colors.

Once you have the colors you want to work with, head over to here to try to find a good contrast and figure out what feels best for the eyes.

I'll post some creations I made and if anyone else wants to contribute, I'll share their creations as well

[Alisae]

Dark Blue Theme By Ali
Background : #1d232d Text Color : #d0e4f8 Contrast Ratio : 12.12:1

Dark Green theme by Ali
Background : #232D1D Text Color : #e4f8d0 Contrast Ratio : 12.72:1

Dark Red theme by Ali
Background : #2D1D23 Text Color : #F8D0E4 Contrast Ratio : 11.53:1

Purple Theme By Ali
Background : #1F1D2D Text Color : #D0D0F8 Contrast Ratio : 11.05:1

Wood Theme By Ali
Background : #2D271D Text Color : #F8E4D0 Contrast Ratio : 11.97:1

[northsidegal]

as always, feel free to use any of these, but i always appreciate being credited. also, i forgot to actually update any of the contrast ratios.

Blue on Blue
Background : #16398a Text Color : #7ac8f5 Contrast Ratio : 12.12:1

Purple/Cyan
Background : #60063e Text Color : #8ff2be Contrast Ratio : 12.12:1

River Mist
Background : #435866 Text Color : #ced3b6 Contrast Ratio : 12.12:1

Scorched
Background : #f60a27 Text Color : #020b03 Contrast Ratio : 12.12:1

Scorched Inverted
Background : #020b03 Text Color : #f60a27 Contrast Ratio : 12.12:1

Pumpkin Patch
Background : #3a0915 Text Color : #da6237 Contrast Ratio : 12.12:1

Pumpkin Patch Inverted
Background : #da6237 Text Color : #3a0915 Contrast Ratio : 12.12:1

Hometown
Background : #296c0b Text Color : #3cfc79 Contrast Ratio : 12.12:1

The Wizard
Background : #5355e7 Text Color : #fdf9d9 Contrast Ratio : 12.12:1

Haze
Background : #4b308f Text Color : #d5e8ac Contrast Ratio : 12.12:1

---

Purple Heart
Background : #0f002b Text Color : #aa4cde Contrast Ratio : 12.12:1

Purple Heart II
Background : #19062c Text Color : #7e7ea5 Contrast Ratio : 12.12:1

Hazard Warning
Background : #201222 Text Color : #ddfd5f Contrast Ratio : 12.12:1

Hazard II
Background : #040c03 Text Color : #ddfd5f Contrast Ratio : 12.12:1

Triple Play
Background : #040c03 Text Color 1 : #525b56 Text Color 2 : #be9063 Text Color 3 : #a4978e

Focus
Background : #190765 Text Color : #edb558 Contrast Ratio : 12.12:1

---

Deep Woods
Background : #181524 Text Color : #75a361 Contrast Ratio : 12.12:1

Deep Woods Inverted
Background : #75a361 Text Color : #181524 Contrast Ratio : 12.12:1

Academic
Background : #452b41 Text Color : #ada2a4 Contrast Ratio : 12.12:1

Scoreboard
Background : #652a35 Text Color : #91b0b3 Contrast Ratio : 12.12:1

Diner
Background : #a4201c Text Color : #faf09e Contrast Ratio : 12.12:1

[Irrelephant11]

Is there a list of fonts available anywhere for use when formatting with the [font=] tag? I post this here because it seems relevant to the idea of visual themeing

[Alisae]

Ask mastina or look in the test thread
If anyone would know, it would probably be her

[mastina]

Ask mastina or look in the test thread
If anyone would know, it would probably be her

I made a fairly extensive list, yes.

It is, by far, incomplete.

But:

Font=Default (?Arial?)

Spoiler: Uniquely Works For Me; Already Listed Or Recommended

Font=Blackadder ITC
Font=Papyrus
Font=Bradley Hand ITC
Font=Gigi
Font=French Script MT
Font=Edwardian Script ITC
Font=Grange Shadow
Font=Imprint MT Shadow
Font=Palace Script MT
Font=Segoe Script
Font=Arial Black
Font=Comic Sans MS
Font=Lucida Console
Font=Century Schoolbook
Font=Garamond
Font=Georgia
Font=Impact
Font=Tahoma
Font=Verdana
Font=Trebuchet MS
Font=Consolas

(popularized by camn)

Spoiler: These Are Also Unique, But Not Listed Already

Font=Agency FB
Font=Arial Narrow
Font=Arial Rounded MT Bold
Font=Bahnschrift
Font=Bahnschrift Condensed
Font=Bahnschrift Light
(A bunch more Bahnschrift that I'm not bothering with.)
Font=Bodoni MT
Font=Bodoni MT Black
Font=Bodoni MT Condensed
Font=Book Antiqua
Font=Bookman Old Style
Font=Calibri
Font=Cambria
Font=Candara
Font=Castellar
Font=Century Gothic
Font=Copperplate Gothic Light
Font=Corbel
Font=Curlz MT
Font=Calisto MT
Font=Constantia
Font=Elephant
Font=Engravers MT
Font=Forte
Font=Gabriola
Font=Gadugi
Font=Garamond
Font=Goudy Old Style
Font=Haettenschweiler
Font=Ink Free
Font=Maiandra GD
Font=Monotype Corsiva
Font=OpenSymbol
Font=Perpetua
Font=PT Serif
Font=Rockwell
Font=Palatino Linotype
Font=Segoe Print
Font=Sitka Text
Font=MS Sans Serif
Font=Lucida Sans
Font=Open Sans

.

Spoiler: Identical, Monospaced

Font=Mono (tag)
Font=Courier
Font=Courier New

Spoiler: Identical to Default

Font=Arial
Font=Helvetica

Spoiler: They All Look Like Times New Roman

Font=Comic Sans
Font=Unicode MS
Font=Serif
Font=Fixedsys
Font=Mono
Font=Andale Mono
Font=Bookman
Font=Palatino
Font=Avant Garde
Font=Times
Font=Times New Roman
Font=MS Serif
Font=Modern
Font=Rage Italic
Font=Roman
Font=Script
Font=Small Fonts
Font=System
Font=Terminal

Fonts are fun! To experiment with at least. (I expect to make use of none of these.)

First two spoilers are unique fonts with their own look. Third spoiler are three different ways to get the appearance generated by the monospace font; the rest look like Times New Roman.

By far not complete a list, but still fairly extensive.

[callforjudgement]

Note that a huge number of these are computer-specific (e.g. all three fonts in the "Identical, Monospaced" section look different to me, whereas all the fonts in the first section, and most of those in the second, are identical). I suspect that the font name is just being given to the browser directly, and so it'll purely depend on which fonts are installed.

In general, it's best to stick to the predefined font families (monospace AaBbIiJjKk, sans-serif AaBbIiJjKk, serif AaBbIiJjKk), which should be interpreted correctly on all browsers; "cursive" and "fantasy" are also defined in the specification but seem not to work everywhere in practice (perhaps due to systems with no appropriate fonts installed).

[mastina]

Should be noted; pretty much all fonts don't work on phones since phones tend to not have most fonts.

[Irrelephant11]

Rockwell italicized

Courier italicized

Comic Sans MS italicized

Arial italicized

Georgia italicized

Nothing italicized

These are the ones that show up on my iOS

[callforjudgement]

I actually intentionally

un

installed Comic Sans to prevent people inflicting it on me :-D